php - Fancybox：使用背景图片

Question

我在照片部分的花式框有点麻烦。

当您单击其中一个图像时，它会加载与页面上相同的大小（图像实际上要大得多），并且还会从页面中删除 div。

我想将 div 的全尺寸背景图像加载到fancybox中。

<div class="main-photo fancybox" rel="group" style="background-image:url('<?php echo $photo; ?>');">
   <a href="<?php echo the_sub_field('photo'); ?>">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/picture-of-health-photo-frame.png" height="240" width="360" />
   </a>
</div>

链接中的img实际上是相框，我不想将其包含在fancybox 中。

Answer 1

您需要设置class="fancybox"为锚<a>标签，而不是<div>标签，所以：

<div class="main-photo" rel="group" style="background-image:url('<?php echo $photo; ?>');">
   <a class="fancybox" href="<?php echo the_sub_field('photo'); ?>">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/picture-of-health-photo-frame.png" height="240" width="360" />
   </a>
</div>

Answer 2

您是否使用 Firebug 或任何其他检查器检查过 Fancybox 加载的图像实际上是您想要的“大图像”？

因为我有，并且您正在加载完全相同的图像。:)