将帖子缩略图与 Fancybox 一起使用

Posted 2023-05-09

【中文标题】将帖子缩略图与 Fancybox 一起使用

【英文标题】：Using Post Thumbnail with Fancybox

【发布时间】：2019-07-06 04:34:04

【问题描述】：

我正在尝试设置我的页面，以便当用户单击当前帖子的缩略图时，它会在 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 已内联添加到其中。

我也尝试将 div 包装在 <a> 标记中并使用它，但结果相同。

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

【参考方案1】：

您的特色链接的网址似乎不正确，它被视为“内联”内容而不是“图片”。

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