Использование миниатюр сообщений с Fancybox

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 был добавлен к нему встроенным.

Я также пытался обернуть 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 } ?>

Iчтобы другие изображения на странице были назначены с помощью расширенных настраиваемых полей, которые отлично работают с Fancybox, поэтому я предполагаю, что проблема заключается в том, как я пытаюсь получить уменьшенное изображение, используя php.

Редактировать: вотвидео текущего результата: https://www.useloom.com/share/f525f4f0e4c642c8800e82532a99e326

Answer 1

Похоже, вы не указали правильный URL-адрес для выбранной ссылки, и он рассматривается как "встроенный" контент вместо "изображения".

В любом случае, вы можете следовать этой демонстрации - https://codepen.io/fancyapps/pen/VGoRqO?editors=1010 - и использовать функцию «триггерный элемент», добавив атрибут data-fancybox-trigger для избранной ссылки.