Fancybox Gallery顯示所有圖片

我目前正在使用fancybox-rails gem來顯示圖片庫。我想要做的就是讓一個鏈接打開所有圖像的畫廊。這裏是我當前的代碼：
Fancybox Gallery顯示所有圖片

<% for painting in @gallery %> 
    <%= link_to "view gallery", painting.image_url.to_s, { :class => "grouped_elements", :rel => "studio_images", :title => painting.caption } %> 
<% end %><br>

此代碼是給我八個不同的環節，所有連接到同一個畫廊。我想只顯示一個鏈接，並打開整個畫廊。我在這裏理解，我正在創建八個不同的鏈接，但我希望能夠在添加新圖像時動態添加到此圖庫。下面是我的JS代碼：

jQuery -> 
    $("a.grouped_elements").fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : false 
    });<br>

有什麼我可以做的jQuery將允許這些鏈接被隱藏，只是有一個鏈接打開畫廊？

來源

2013-12-10 user2184718

放置一個隱藏的分工下，所有的鏈接像（渲染HTML）

<div style="display: none"> 
    <a rel="studio_images" class="grouped_elements" href="image01.jpg"></a> 
    <a rel="studio_images" class="grouped_elements" href="image02.jpg"></a> 
    <a rel="studio_images" class="grouped_elements" href="image03.jpg"></a> 
    ... etc. 
</div>

注意，由於鏈接將被隱藏，你不需要設置任何縮略圖或文本。

你可以保留你當前的fancybox初始化腳本。

然後，創建一個鏈接（隱藏div外），您會使用火您的畫廊，是這樣的：

<a id="triggerGallery" href="image01.jpg">open gallery</a>

注意的href指向畫廊的第一個圖像。如果javascript被禁用，它仍然會鏈接到這個圖像。或者你可以只是做href="javascript:;"

然後綁定click行動的#triggerGallery選擇像

$("#triggerGallery").click(function (e) { 
    e.preventDefault(); 
    $(".grouped_elements").eq(0).trigger("click"); 
});

你必須把它寫在正確的軌道格式雖然。

通知我們使用.eq(0)來定位畫廊的第一個元素。

請參閱JSFIDDLE

來源

2013-12-10 21:12:57 JFK

Fancybox Gallery顯示所有圖片

回答

相關問題