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>

Fancybox：使用背景图片

2 个答案: