为什么Wordpress中的fancybox内容是一样的

Question

我想用fanybox 2显示一些博客文章。用户谁想要了解详细信息的帖子，将点击帖子缩略图和内容的其余部分将与弹出打开。

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

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