我正在尝试使用 Fancybox 3 创建一个内联元素库。我已经让各个弹出窗口正常工作,现在我正在尝试弄清楚如何利用 Fancybox 默认导航行为让用户能够循环浏览弹出窗口元素。
这是我的代码:
<ul id="testiFeed" class="list-unstyled">
<?php
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 9 );
$loop = new WP_Query( $args );
$i = 1;
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li>
<div class="testiPadding">
<a data-fancybox data-src="#hidden-content-<?php echo $i ?>" href="javascript:;">
<div class="testiBox" style="background-image: url(<?php the_post_thumbnail_url('medium_large'); ?>);">
<p class="testiUser">@<?php the_field('instagram_username'); ?></p>
<div class="testiCover"></div>
</div>
</a>
</div>
</li>
<div class="testiPopup" style="display: none;" id="hidden-content-<?php echo $i ?>">
<div class="testiRow">
<div class="testiHalf testiFeature" style="background-image: url(<?php the_post_thumbnail_url('large'); ?>);">
</div>
<div class="testiHalf testiRight">
<div class="testiAuthor">
<div class="testiProfile" style="background-image: url(<?php the_field('user_photo'); ?>);"></div>
<h2><?php the_title(); ?></h2>
<p><em><i class="fa fa-instagram"></i> @<?php the_field('instagram_username'); ?></em></p>
</div>
<div class="testiContent">
<?php the_content(); ?>
</div>
<div class="testiShare">
<p>Share <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a></p>
</div>
</div>
</div>
</div>
<?php $i++; endwhile;
?>
</ul>
我尝试将 rel="group1" 和 data-fancybox="group" 添加到触发弹出但没有运气的锚元素。
我找到了其他类似的解决方案,但仅适用于旧版本的 Fancybox,它不适用于 Fancybox 3。
有什么想法吗?