從頁面上的鏈接觸發fancybox - 圖像庫與多個相冊

我做了一個圖像庫與多個相冊，每個相冊包含不同數量的照片。我試圖得到兩個花哨的行爲從頁面上的鏈接觸發fancybox - 圖像庫與多個相冊

需求1 - 點擊相冊的主圖像打開一個漂亮的盒子，並瀏覽所有相冊的主要圖像。我得到這部分工作

需求2 - 在每張專輯下面我有一個錨標記，顯示專輯中的照片數量。當我點擊這個錨標籤時，花式框應該只瀏覽那個特定相冊的照片。我不確定如何將此錨標記綁定到觸發器fancybox並瀏覽相冊中的圖像。我有一個靜態json文件，我有兩個屬性primaryPhoto和imagesContained(array)。

請問有人能幫我解決這個問題嗎？

$.each(data.gallery,function(i,item) { 
$.each(item.albums, function(i,photos) { 
     imageFolder = sec.mediumUrl; 
     imgInsert += '<a href="' + photos + '" class="grouped_elements" rel="Gallery' + count + '" class="big_img"' +'">'; 
    }); 
    '<a href="' + imgThumb + '" class="description2" title="Hello world">' + count + '</a></div>'; 
    count++; 
});

我試圖訪問它像這樣

$("a.description2").click(function() { 
$("a.grouped_elements").fancybox({ 
       'transitionIn': 'none', 
       'transitionOut': 'none', 
       'titlePosition': 'over', 
       'titleFormat': function (title, currentArray, currentIndex, currentOpts) { 
        return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + '/' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>'; 
       } 
      }); 

});

來源

2012-06-25 ahsu

我想你需要在這裏發佈一些代碼以獲得更快的幫助。 – JFK

@JFK嗨JFK添加了我的部分代碼。謝謝。 – ahsu

您的要求2

我一直在這個問題上我自己的項目了一整天，我只是想出了用解決方案。

說這是你網頁上的畫廊：

<a id="Gallery_1" rel="gallery1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a> 
<a rel="gallery1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>

*請注意我在畫廊增加了一個叫做「Gallery_1」到第一個鏈接的ID 1 *

然後，你有文本在畫廊下面，使用以下javascript：

<a style="cursor: pointer;" onclick='$("a#Gallery_1").trigger ("click");'>Your Link Text</a>

這對我來說非常合適。希望能幫助到你！

來源

2012-06-25 23:03:11 RevConcept

對我不起作用:( – ahsu

對不起......不知道爲什麼它不起作用。如果您想查看更多代碼，請在本網站上查看：http://tallycm.com/客戶端。點擊「+」按鈕以按照您嘗試的方式激活畫廊。 – RevConcept

基本上你的HTML渲染代碼應該是類似的東西：

相冊1：

<a class="grouped_elements" rel="gallery1" href="image01.jpg" title="title01"><img src="thumb01.jpg" alt="" /></a> 
<a class="grouped_elements" rel="gallery1" href="image02.jpg" title="title02"><img src="thumb02.jpg" alt="" /></a> 
<a class="grouped_elements" rel="gallery1" href="image03.jpg" title="title03"><img src="thumb03.jpg" alt="" /></a>

等

專輯2：

<a class="grouped_elements" rel="gallery2" href="image10.jpg" title="title10"><img src="thumb10.jpg" alt="" /></a> 
<a class="grouped_elements" rel="gallery2" href="image11.jpg" title="title11"><img src="thumb11.jpg" alt="" /></a> 
<a class="grouped_elements" rel="gallery2" href="image12.jpg" title="title12"><img src="thumb12.jpg" alt="" /></a>

等

專輯3：

<a class="grouped_elements" rel="gallery3" href="image20.jpg" title="title20"><img src="thumb20.jpg" alt="" /></a> 
<a class="grouped_elements" rel="gallery3" href="image21.jpg" title="title21"><img src="thumb21.jpg" alt="" /></a> 
<a class="grouped_elements" rel="gallery3" href="image22.jpg" title="title22"><img src="thumb21.jpg" alt="" /></a>

等

注意每個專輯已經設置了不同的rel屬性不管他們都共享同一個class所以我們可以用$("a.grouped_elements").fancybox({// options here})火的fancybox任何專輯。

現在，爲了從不同的鏈接啓動每個專輯（顯示專輯中照片數量的錨定標籤，如您的示例中所示），我們將爲每個專輯分配相同的class但爲不同ID（@RevCocnept建議是未嘗不可。）

<a id="gallery1" class="description2" href="javascript:;">open album 1</a> 
<a id="gallery2" class="description2" href="javascript:;">open album 2</a> 
<a id="gallery3" class="description2" href="javascript:;">open album 3</a>

通知每個ID具有完全相同的值作爲對應的相冊的rel值。

現在我們可以用一個腳本進行這三個錨，針對他們共同class：我們使用.eq(0)開始從第一個元素畫廊

$(".description2").click(function(){ 
$('.grouped_elements[rel="'+this.id+'"]').eq(0).trigger("click"); 
});

通知，否則它就會從最後一個元素開始添加在DOM中

來源

2012-06-26 16:58:06 JFK

從頁面上的鏈接觸發fancybox - 圖像庫與多個相冊

回答

相關問題