Fancybox：使用背景圖片

我在照片的部分有fancybox有點麻煩。Fancybox：使用背景圖片

當您點擊其中一個圖像時，它會加載與頁面相同的尺寸（圖像實際上更大），同時也會從頁面中刪除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內。

來源

2013-03-12 Rob

可以做什麼，只是把當前的背景圖像內'DIV'並給它facybox類，如果你想爲照片的相框背景，然後將其作爲'DIV'的背景....這似乎是一個設計邏輯問題，不涉及到專櫃 – Peeyush 2013-03-12 15:24:37

@Peeyush是否沒有辦法調整jQuery ？我必須以這種方式設置div，因爲它可以處理來自Wordpress的可變圖像大小。 – Rob 2013-03-12 15:37:58

您需要設置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>

來源

2013-03-13 06:42:17 JFK

完美！不能相信我沒有嘗試在鏈接上的類！ – Rob 2013-03-13 09:08:05

您是否使用Firebug或任何其他檢查員檢查過，Fancybox加載的圖像實際上是您想要的「大圖像」？

因爲我有，並且您正在加載完全相同的圖像。 :)

來源

2013-03-12 15:44:14 Nemanja

這實際上是正確的，只是縮略圖圖像具有一定的CSS尺寸，而實際的圖像尺寸爲533x800像素。如何在fancybox中將圖像製作爲實際尺寸？ – Rob 2013-03-12 16:08:03

這是一個答案？看起來像是對我的問題或評論。 – JFK 2013-03-13 06:43:15

這應該是一個**評論**，而不是一個答案！ – 2013-03-13 06:48:57

Fancybox：使用背景圖片

回答

相關問題