在Fancybox中使用Post Thumbnail

Question

我正在尝试设置我的页面，以便当用户单击当前帖子的缩略图时，它会在Fancybox弹出窗口中展开。

<?php 
    $featured_img_url = get_the_post_thumbnail_url($post->ID);
?>

<?php if ( has_post_thumbnail() ) { ?>
    <div class="featured-image" data-fancybox="gallery" href="<?php $featured_img_url ?>"
        <?php the_post_thumbnail(); ?>
    </div>
<?php } ?>

这是有效的，因为图像在单击时按预期打开。但是当我点击叠加层时，缩略图就消失了。 display: none已添加到内联中。

我也试过用<a>标签包装div并使用它，但这有相同的结果。

<?php 
    $featured_img_url = get_the_post_thumbnail_url($post->ID);
?>

<?php if ( has_post_thumbnail() ) { ?>
    <a href="<?php $featured_img_url ?>" class="fancybox" data-fancybox="gallery">
        <div class="featured-image bShadow">
            <?php the_post_thumbnail(); ?>
        </div> 
    </a>
<?php } ?>

我在分配有高级自定义字段的页面上有其他图像可以正常使用Fancybox，所以我假设问题是如何使用php来获取缩略图。

编辑：这是当前结果的视频：https://www.useloom.com/share/f525f4f0e4c642c8800e82532a99e326

Answer 1

看起来您的功能链接没有正确的URL，它被视为“内联”内容而不是“图像”。

无论如何，你可以按照这个演示 - https://codepen.io/fancyapps/pen/VGoRqO?editors=1010 - 并通过为特色链接添加data-fancybox-trigger属性来使用“触发元素”功能。