fancybox不同圖像的不同風格

我想要控制我的fancybox組中的一些圖像。fancybox不同圖像的不同風格

這與我在這個領域提出的另一個問題有關，但是正在進入問題的不同部分，所以我開始了一個新問題。

鑑於代碼

<div id="gallery"> 
    <a href="photos/pic1.jpg" rel="lightbox-left" title=""> 
     <img src="photos/pic1_2.jpg" /></a> 

    <a href="photos/pic2.jpg" rel="lightbox-left" title="my title" class="flag"> 
     <img src="photos/pic2_2.jpg" /></a> 
</div>

你會看到包含第二圖像（pic2.jpg）中的一個標籤有一個類「標誌」的。這是因爲我想讓它的風格與另一個不同。比方說，我希望它具有綠色背景。

我能做到這一點的東西所有實例像

.fancybox-skin { 
    background-color: green; 
}

而是適用於所有的顯示畫面。顯然，我的'旗'類只適用於MY元素，而不適用於生成的fancybox代碼。

有什麼辦法可以控制生成的代碼的特定實例嗎？

我知道wrapCSS屬性，但是，正如我所看到的那樣，它會將一個包含類放在所有圖像中，而不僅僅是指定的圖像......或者我錯過了什麼？

來源

2012-10-31 Ken

感謝@Janis指着我在正確的方向！

使用連接到beforeShow事件中，我能得到一個可以接受的效果如下代碼...

 $('#gallery a').fancybox({   
     beforeShow: function() { 
      if ($(this.element).hasClass('flag')) { 
       this.skin.css("background-color", "green");     
      } 
     }, ...etc...

我有是能夠得到在當前性能的主要問題元素其中

$(this.element)

允許我做。

來源

2012-11-01 11:30:33 Ken

您可以根據當前項目使用回調進行樣式設置。例如：

$(".fancybox").fancybox({ 
    beforeShow: function() { 

     if (this.index == 0) { 
      this.skin.css("background-color", "green"); 

     } else if (this.index == 1) { 
      this.skin.css("background-color", "blue"); 
     } 

    } 
});

見行動 - http://jsfiddle.net/LehkV/

有不同的方法分別設置參數，請參見＃15從http://fancyapps.com/fancybox/#useful

來源

2012-10-31 15:58:12 Janis

感謝您的建議，但第一種方法並沒有真正做我想做的......我想在一個特定的效果是被使用，例如，一類HTML聲明。這樣，我可以輕鬆地添加圖像，並根據需要在使用此圖像的各個頁面上標記圖像。上面顯示的方法已經內置了圖像的知識，即讓第一個綠色，等等＃從技巧和竅門15看上去很有希望，也許我可以用hasClass功能使用它。 – Ken

這只是一個例子，它取決於你如何組織你的代碼。有很多可能的場景，例如，您可以將顏色存儲爲「數據」屬性 - http://jsfiddle.net/brq5b/ – Janis

fancybox不同圖像的不同風格

回答

相關問題