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>