Jquery Tools Overlay : PHP foreach 루프가 작동하지 않습니다.

Question

내 사이트에 Jquery Tools의 오버레이를 넣어 여러 오버레이에 프로젝트 정보를 표시했습니다. 이것은 꽤 괜찮은 일이지만, 새로운 프로젝트를 읽고 오버레이로로드하는 코드를 '자동화'하려고 노력해 왔습니다. 무슨 일이 있어도 괜찮아 보이지만 어떤 프로젝트를 클릭하든, 오버레이는 항상 첫 번째 프로젝트의 내용을로드합니다 ...

나는이 문제를 해결하기 위해 많은 인터넷 검색 및 복사 붙여 넣기를했습니다. 아직) 프로그래머의 많은, 내가 코드가 너희들을 놀라게하지 않았 으면 좋겠 .. ;-)

을 어쨌든, 여기 링크입니다 : http://www.wgwd.nl/test

하기를 클릭하면 '프로젝트는'정상 사업부는 모든 부하 있다는 열립니다 그것이 발견 한 프로젝트 (현재 2 개). 하나를 클릭하면 해당 내용이 3 개의 오버레이로 열립니다. 불행히도, 당신이 클릭하는 프로젝트와 독립적으로 같은 내용을로드합니다.

JScript에게 프로젝트의 파일 이름에서 PHP로 생성 된 고유 한 함수 이름을 지정하려고했지만 작동하지 않는 것 같습니다.

아이디어가 있으십니까? 여기 내 코드는 다음과 같습니다.

<? 
    //reads projectfolder and distills 
    //a basename out of the project description.txt 
    $textfiles = glob('content/projects/*.txt', GLOB_BRACE); 
    foreach ($textfiles as $textfile) { ?> 
     <div id="details"> <? 
      $pad = pathinfo ($textfile); 
      $base_name = basename($textfile,'.'.$pad['extension']); 

      // the link that opens the overlays. Don't think the "id" tag is nescessary 
      echo '<a id="'.$base_name.'" href="#" onclick="'.$base_name.'()"><img src="'.$base_name.'/main.jpg"/></a>' ?> 

      <!-- defines overlay, hidden by default --> 
      <div id="dragwindow1" class="overlay ol1"> 
       <a class="close"></a> 
       <? 
        include ('content/projects/'.$base_name.'/content.txt'); 
       ?> 
      </div> 
     </div> 
     <? 
     // the description of each project 
     include ($textfile); 
     ?> 

     <script> 
      // within the foreach open all overlays with function name $base_name 
      var <?=$base_name?> = function() { 
       $("a[rel]").each(function() { 
        $(this).overlay().load(); 
       }); 
      } 

     </script> 
     <hr /> 
    <? } //end foreach ?> 
</div> 

<!-- somehow, without defining these links, the whole 'open all overlay' thing doesn't work --> 
<a rel="div.overlay:eq(0)" type="button" style="display: none">first</an> 
<a rel="div.overlay:eq(1)" type="button" style="display: none">second</a> 
<a rel="div.overlay:eq(2)" type="button" style="display: none">third</a> 

<script type="text/javascript"> 
$(function projects() { 
    // positions for each overlay 
    var positions = [ 
     [120, '15%'], //uppper left, #1 
     [70, '60%'], // lower left, #2 
     ['60%', '40%'], // lower right, #3 
    ]; 

    // setup triggers 
    $("a[rel]").each(function(i) { 

     $(this).overlay({ 
      // common configuration for each overlay 
      oneInstance: false, 

      // setup custom finish position 
      top: positions[i][0], 
      left: positions[i][1], 
     }); 
    }); 
}); 
</script> 

Thx!

EDIT : 관련이없는 코드를 모두 편집하지 않았습니다. 질문 : JavaScript는 foreach 루프의 첫 번째 호출 내용 만 반환합니다. 어쨌든 PHP의 각 루프마다 여러 개의 자바 스크립트 인스턴스를 생성합니까?

Answer 1

솔트! Jquery Tools의 여러 오버레이가 작동 할 수있는 방법을 재정의 한 친구의 크고 큰 도움으로

앞으로 많은 참고 사항없이 참조 할 수 있습니다. :

는 기본적으로 트릭은 다음과 같습니다

<script type="text/javascript"> 
$(function() { 
    // positions for each overlay 
    var positions = [ 
     ['60%', 540], // lower right, #3 
     [80, '65%'], // lower left, #2 
     [120, '12%'], //uppper right, #1 

     ]; 

    // setup triggers 
    $("div.overlay").each(function(i) { 
     $(this).overlay({ 
      // some configuration for each overlay 

      // positioning the overlays 
      top: positions[i % 3][0], 
      left: positions[i % 3][1] 
     }); 
    }); 
}); 

// open all overlays 
function openAll(currentOverlays) { 
    $(currentOverlays).each(function() 
    { 
     $(this).overlay().load(); 
    }); 
} 

// close all overlays 
function closeAll(currentOverlays) { 
    $(currentOverlays).each(function() 
    { 
     $(this).overlay().close(); 
    }); 
} 
</script> 

<div id="projectstarter"> 
    <h2>Projects</h2> 

    <div class="maindetails"> 
     <a class="close"></a> <!-- defines a close button for the overlay --> 

     <? 
     $textfiles = glob('content/projects/*.txt', GLOB_BRACE); 
     rsort($textfiles); 
     foreach ($textfiles as $textfile) { 

      $pad = pathinfo ($textfile); 
      $base_name = basename($textfile,'.'.$pad['extension']); 
      echo '<a href="#" onclick="openAll(\'div.'.$base_name.'\')">'; 
      echo '<img src="./content/projects/'.$base_name.'/projectimage.jpg" class="thumb"/></a></div>'; 
      include '$textfile'; //project description 

     } // end MAIN foreach ?> 
    </div> 
</div> 

<div id="projects"> 
<? 
foreach ($textfiles as $textfile) { 
     $pad = pathinfo ($textfile); 
     $base_name = basename($textfile,'.'.$pad['extension']); ?> 
      <div id="dragwindow3" class="<?=$base_name?> overlay ol3"> 
       <a class="close"></a> 
       <h2>Media</h2> 
       <div class="details"> 
        // include media here 
       </div>    
      </div> 


      <div id="dragwindow2" class="<?=$base_name?> overlay ol2"> 
       <a class="close"></a> 
       <h2>Credits</h2> 
       <div class="details"> 
        // include credits here 
       </div> 
      </div> 

      <div id="dragwindow1" class="<?=$base_name?> overlay ol1 "> 
       <a class="close"></a> 
       <h2>Content</h2> 
       <div class="details"> 
        // include content here 
       </div> 
      </div> 

    <? } ?> 
<script> 
    $("#projectstarter").overlay(); 
    $("#projectstarter").draggable().resizable({ghost: true}); 
    $(".ol1").draggable().resizable({ghost: true}); 
    $(".ol2").draggable().resizable({ghost: true}); 
    $(".ol3").draggable().resizable({ghost: true}); 
</script>