Question

我目前正在使用fancybox-rails gem来显示图片库。我想做的就是让一个链接打开所有图像的图库。这是我目前的代码：

 <% 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中做些什么来隐藏这些链接并且只有一个链接打开图库？

Answer 1

将所有链接放在隐藏的部门下（如渲染的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

Fancybox Gallery显示所有图像

1 个答案: