2012-06-13 39 views
0

我目前使用燈箱2(http://lokeshdhakar.com/projects/lightbox2/),這一切都工作正常,但我需要稍微調整。Lightbox2 - 多個圖像,一次點擊

我想在單擊縮略圖時垂直顯示所有圖像。因此,如果我有3張圖片全都使用相同的rel =「lightbox [whatever]」,我希望它們都輸出。我不想用next和prev按鈕的「Image 1 of 5」。

我搜遍了所有,並找不到解決方案。如果任何人有任何想法,片段或外部網址,它將不勝感激。

代碼示例:

<a href="resources/images/ClassicCarriers/ClassicCarriers1.jpg" rel="lightbox[classicCarriers]" title=""> 
    <img src="Resources/Images/classicCarriers_grey.jpg" class="recentWork" title="Classic Carriers" alt="Classic Carriers"/> 
</a> 
<a href="resources/images/ClassicCarriers/ClassicCarriers2.jpg" rel="lightbox[classicCarriers]" title=""></a> 
<a href="resources/images/ClassicCarriers/ClassicCarriers3.jpg" rel="lightbox[classicCarriers]" title=""></a> 

回答

0

您也可以使用http://www.jacklmoore.com/colorbox來實現你想要的。請檢查下面的代碼

HTML

<div id="container"> 
    <img src="http://placekitten.com/100/100" width="100px"> 
    <img src="http://placekitten.com/100/100" width="100px"> 
    <img src="http://placekitten.com/100/100" width="100px"> 
</div> 

jQuery的

$(function(){ 
    $('#container img').click(function(e){ 
     e.preventDefault(); 
     $.colorbox({ 
     href: '#container', 
     inline: true 
    });  

    }); 
}); 

現在,當你點擊任何圖像的所有3將在顏色框所示進行。

Working Fiddle

+0

我只是想看看1個縮略圖,然後點擊在燈箱我看到大圖像1 2和3 – balexander

+0

檢查這個http://jsfiddle.net/joycse06/E5Eft/3/ –

+0

差不多在那裏!我在頁面上有大約10個縮略圖,我需要一種方法讓他們所有的工作都可以在不重複每個人的功能的情況下進行。我們可以使用rel =「」嗎?我的JS很糟糕,所以我表示歉意。 – balexander

0

嘗試fancy box。不要將效果直接附加到圖像,而是將其附加到包含三個圖像的HTML。