Fancybox：使用背景图片

Question

我在照片部分的fancybox遇到了一些麻烦。

当您单击其中一个图像时，它会加载与页面上相同的大小（图像实际上要大得多），并且还会从页面中删除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

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

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

Answer 2

你需要将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>