Fancybox 3风格问题

Question

当我点击其中一个预览图像时，为了显示fancybox图库，它只是向右滑动图像并给我这个破碎的叠加层。不确定这里的问题是什么......

HTML（注意我正在使用WordPress和高级自定义字段）：

<?php if ( have_rows("inspiration_gallery") ) : ?>

      <?php $i = 0; while ( have_rows("inspiration_gallery") ) :
        the_row();
        $img = get_sub_field("inspiration_image");
        $img_id = $img['ID'];
        $img_url = $img['url'];
        $gallery_id = $gallery_id ? $gallery_id : $img_id;
        $related = get_sub_field("inspiration_related");
      ?>

        <?php if ($i == 0): ?>
          <!-- Preview Image -->
          <a class="inspiration__preview-link" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>">
            <?php echo wp_get_attachment_image( $img_id, "full", false, array("class" => "inspiration__prev_img") ); ?>
          </a>

        <?php else: ?>

          <!-- Gallery Fancybox Link -->
          <a class="inspiration__gallery-link none" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>"></a>

        <?php endif; ?>

      <?php $i++; endwhile; ?>

    <?php endif; ?>

我已经将最新版本的Fancybox JS和CSS文件排入队列。