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

为什么WordPress中的fancybox内容是相同的？

1 个答案: