Несколько галерей с Magnific Popup

Я пытаюсь создать страницу с несколькими галереями, используя подключаемый модуль jQuery Magnific-Popup. I разные разделы, содержащиеся в divs с отдельными идентификаторами, и класс .gallery, содержащий изображения.

<div id="content_1">
    <p>Some content</p>
    <div class="gallery">
        <a href="img/pic_1"><img src="img/pic_1.jpg"></a>
        <a href="img/pic_2"><img src="img/pic_2.jpg"></a>
    </div>
</div>
<div id="content_2">
    <p>More content</p>
    <div class="gallery">
        <a href="img/pic_3"><img src="img/pic_3.jpg"></a>
        <a href="img/pic_4"><img src="img/pic_4.jpg"></a>
    </div>
</div>

Чтобы галереи были отдельными во всплывающем окне, я несколько раз инициализировал скрипт для каждого раздела контента. Однако, когда я это делаю, после первого раздела контента во всплывающем окне галереи появляется больше изображений (точнее, в два раза больше), чем я связал. Я новичок в javascript, поэтому я не уверен, что просто упускаю что-то очевидное.


magnific-popup
person PnkNja15    schedule 20.05.2013    source источник
comment
stackoverflow.com/questions/16603714 /   -  person Dmitry Semenov    schedule 21.05.2013

Ответы (1)


arrow_upward
15
arrow_downward

Из документации:

Чтобы иметь несколько галерей на странице, вам нужно создать новый экземпляр Magnific Popup для каждой отдельной галереи. Например

<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #1)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #1)</a>
</div>
<div class="gallery">
    <a href="path-to-image.jpg">Open image 1 (gallery #2)</a>
    <a href="path-to-image.jpg">Open image 2 (gallery #2)</a>
    <a href="http://vimeo.com/123123" class="mfp-iframe">Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.</a> 
</div>

Javascript

$('.gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
        delegate: 'a', // the selector for gallery item
        type: 'image',
        gallery: {
          enabled:true
        }
    });
});

Надеюсь, это поможет!

person benbrandt    schedule 28.10.2015
comment
Я использовал тот же подход (из-за документации), но он разделяет все изображения из каждой галереи с каждой галереей, пока я не перезагружу страницу (используя турбоссылки, может быть, это часть проблемы?) - person Jake Smith; 21.09.2016