왜 fancybox 내용이 Wordpress에서 동일합니까?

Question

fancybox2로 블로그 게시물을 표시하고 싶습니다. 게시물에 대한 세부 정보를 배우고 자하는 사용자는 게시물 미리보기 이미지를 클릭하고 나머지 콘텐츠는 팝업으로 열립니다.

모든 미리보기 이미지는 fancybox로 열리지 만 이번에는 다른 미리보기 이미지의 내용이 첫 번째 게시물과 동일합니다. 여기 내 테마 파일에 추가 한 코드가 있습니다.

<?php 
    $query = ff_get_query_for_section(); 
?> 
<!-- Logotypes Section --> 

      <section <?php ff_print_section_attributes($query->get('section-options'), 'small-section pt-10 pb-10');// class="small-section bg-dark pt-10 pb-10"?>> 
       <div class="container relative"> 

        <div class="row"> 
        <div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2"> 


          <div class="thumbnail"> 

           <div id="content-1" class="content mCustomScrollbar"> 

            <?php 
$catquery = new WP_Query('cat=48&posts_per_page=10'); 
while($catquery->have_posts()) : $catquery->the_post(); 

?> 

<ul class="referans"> 
<div class="reffoto"><a href="#inline1" rel="gallery" class="fancybox"><?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?></a> 

<div id="inline1" style="width:400px;display: none;"> 
    <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?><?php the_content(); ?> 

</div> 


</div> 
<div class="refyazi"><?php echo substr(get_the_excerpt(), 0,70); ?>...</div> 
</ul> 


<?php endwhile; ?> 



<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 


     </div> 
    </div> 

          </div> 
         </div> 
        </div> 
       </div> 

      </section> 

      <!-- End Logotypes --> 

아무도 그것에 대해 어떤 생각을 가지고 있습니다 :

<a href="#inline1" rel="gallery" class="fancybox"><?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?></a> 

<div id="inline1" style="width:400px;display: none;"> 
    <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?><?php the_content(); ?> 

</div> 

그리고 여기 테마 파일의 전체 버전인가? 고마워요!

Answer 1

귀하의 ID는 항상 동일하므로 동일한 콘텐츠가 표시됩니다. 당신이 당신의 작은 이미지를 에코 때 [루프] (https://codex.wordpress.org/The_Loop) 안에있는 것처럼

<?php $query = ff_get_query_for_section(); ?> 
<!-- Logotypes Section --> 
<section <?php ff_print_section_attributes($query->get('section-options'), 'small-section pt-10 pb-10');// class="small-section bg-dark pt-10 pb-10"?>> 
    <div class="container relative"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2"> 
       <div class="thumbnail"> 
        <div id="content-1" class="content mCustomScrollbar"> 
         <?php $i = 0; ?> 
         <?php $catquery = new WP_Query('cat=48&posts_per_page=10'); ?> 
         <?php while($catquery->have_posts()) : $catquery->the_post();?> 
          <ul class="referans"> 
           <div class="reffoto"> 
            <a href="#inline<?php echo $i; ?>" rel="gallery" class="fancybox"> 
             <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?> 
            </a> 
            <div id="inline<?php echo $i; ?>" style="width:400px;display: none;"> 
             <?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?> 
             <?php the_content(); ?> 
            </div> 
           </div> 
           <div class="refyazi"> 
            <?php echo substr(get_the_excerpt(), 0,70); ?>... 
           </div> 
          </ul> 
          <?php $i++; ?> 
         <?php endwhile; ?> 
         <script> 
         // Get the modal 
         var modal = document.getElementById('myModal'); 

         // Get the button that opens the modal 
         var btn = document.getElementById("myBtn"); 

         // Get the <span> element that closes the modal 
         var span = document.getElementsByClassName("close")[0]; 

         // When the user clicks the button, open the modal 
         btn.onclick = function() { 
          modal.style.display = "block"; 
         } 

         // When the user clicks on <span> (x), close the modal 
         span.onclick = function() { 
          modal.style.display = "none"; 
         } 

         // When the user clicks anywhere outside of the modal, close it 
         window.onclick = function(event) { 
          if (event.target == modal) { 
           modal.style.display = "none"; 
          } 
         } 
         </script> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 
<!-- End Logotypes -->