Why fancybox contents are the same in Wordpress?

问题:

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.

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!

回答1:

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