0
我想用fancybox 2顯示一些博客文章。想要了解關於文章的詳細信息的用戶將點擊文章縮略圖,其餘內容將打開並彈出。爲什麼fancybox的內容在WordPress中是一樣的?
所有的縮略圖用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 -->
有沒有人有想過這事?非常感謝!
它看起來像你在裏面[的循環](https://codex.wordpress.org/The_Loop)當您迴應你的縮略圖,但外面當你的呼應彈出窗口。你究竟在哪裏放置這個代碼? –
你好,我使用大流主題,它包括一些文件,這是特別的主題。我更改了logo-slider.php文件,現在我將文件的完整版本添加到了我的第一篇文章中。 @JordiNebot – Katzenliebe