Галерея Fancybox показывает все изображения

Question

Галерея Fancybox показывает все изображения

0

В настоящее время я использую драгоценный камень fancybox-rails, чтобы показать галерею изображений. То, что я хотел бы сделать, чтобы иметь одну ссылку, открывает галерею всех изображений. Вот мой текущий код:

 <% 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, который позволит скрывать эти ссылки и просто открыть одну галерею?

user2184718 10 дек. 2013, в 20:26

Источник

Теги:

jquery

ruby-on-rails

image

fancybox

1 ответ

Ещё вопросы

JFK · Accepted Answer · 2013-12-10T18-35-00.000Z

Поместите все свои ссылки под скрытое подразделение, подобное (rendered 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