为什么fancybox的内容在WordPress中是一样的？

Question

我想用fancybox 2显示一些博客文章。想要了解关于文章的详细信息的用户将点击文章缩略图，其余内容将打开并弹出。

所有的缩略图用fancybox打开，但这次其他缩略图的内容与第一篇文章相同。这是我在我的主题文件中添加的代码。

<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> 

这里是完全版的主题文件：

<?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 --> 

有没有人有想过这事？非常感谢！

Answer 1

您的ID始终相同，这就是为什么您看到相同的内容。尝试使用此代码：

<?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 -->