Великолепное всплывающее окно Inline Lightbox Gallery, как указать элемент в массиве из html-ссылки

Хотел использовать этот пример «элемента»: http://codepen.io/dimsemenov/pen/sHoxp

но вместо одной кнопки я хотел бы иметь несколько кнопок для каждого встроенного элемента (например, галереи). Например, как мне создать вторую кнопку, которая откроет элемент массива данных 2 (Пол Айриш)? Есть ли способ указать ссылку на кнопку? Спасибо!


magnific-popup
person user3200608    schedule 28.03.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Мне пришлось сделать что-то подобное, и я понятия не имел, как это сделать, поэтому, надеюсь, это поможет кому-то позже.

Все мои модальные окна были встроенными, но мне также нужен был список для каждого элемента на странице, чтобы вы могли щелкнуть ссылку, и она откроется в элементе 2 или 3 и т. д., но при этом позволит вам перемещаться по галерее. Я основал свой код на этом http://codepen.io/dimsemenov/pen/zvLny и добавлены дополнительные части для идентификаторов.

По сути, вам просто нужно добавить атрибут данных, например data-slideid, к отдельным ссылкам и передать его при открытии magnific. После того, как вы все установили, вы можете указать, в каком элементе он открывается, передав значение из data-slideid. Если у кого-то есть лучшее решение, я хотел бы знать!

Проверьте мой ниже

<div id="gallery1" class="mfp-hide">
   <div class="slide" data-slideid="0">slide 1</div>
   <div class="slide" data-slideid="1">slide 2</div>
   <div class="slide" data-slideid="2">slide 3</div>
</div>

// single link opens gallery starting at first slide
<p><a href="#gallery1" class="open-gallery-link" data-slideid="0">view gallery</a></p>

// individual links opens gallery starting at relevant slide
<a href="#gallery1" data-slideid="0" class="open-gallery-link">Slide1</a>
<a href="#gallery1" data-slideid="1" class="open-gallery-link">Slide2</a>
<a href="#gallery1" data-slideid="2" class="open-gallery-link">Slide3</a>



$('.open-gallery-link').click(function() {
   var itemNum = $(this).data("slideid"); // get the id
   var items = [];
   $( $(this).attr('href') ).find('.slide').each(function() {
      items.push( {
      src: $(this) 
   } );
 });

 $.magnificPopup.open({
    items:items,
    gallery: {
     enabled: true 
    }
 },itemNum); // set it in here
});
person Fox    schedule 18.01.2015