为什么fancybox的内容在Wordpress中是相同的? [英] Why fancybox contents are the same in Wordpress?

问题描述

我想显示一些带有fancybox 2的博客帖子.想要了解有关帖子的详细信息的用户，将单击帖子缩略图，其余内容将弹出.

I want to display some blog posts with fancybox 2. User who wants to learn detail information about post, will click the post thumbnail and the rest of content will open with popup.

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

All the thumbnails open with fancybox but this time the other thumbnails' contents are same with the first post. Here are my codes which I added in my theme file.

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

这是主题文件的完整版本:

And here is full version of the theme file:

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

有人对此有任何想法吗?非常感谢！

Has anybody got any idea about that? Thanks a lot!

推荐答案

您的ID始终相同，这就是为什么您看到相同内容的原因.尝试使用以下代码:

Your ID always same, that's why you see same content. Try to use this code:

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

这篇关于为什么fancybox的内容在Wordpress中是相同的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！