Мне пришлось сделать что-то подобное, и я понятия не имел, как это сделать, поэтому, надеюсь, это поможет кому-то позже.
Все мои модальные окна были встроенными, но мне также нужен был список для каждого элемента на странице, чтобы вы могли щелкнуть ссылку, и она откроется в элементе 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