时间戳

首页 > 解决方案 > 将帖子缩略图与 Fancybox 一起使用

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

问题描述

我正在尝试设置我的页面，以便当用户单击当前帖子的缩略图时，它会在 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

标签： phpjquerywordpressfancybox

解决方案

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

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

推荐阅读