Как можно настроить отображение галереи из определённого набора изображений в magnific Popup?

Question

Семен

swiper , javascript

Как можно настроить отображение галереи из определённого набора изображений в magnific Popup?

Добрый день, коллеги! 

Прошу вашей помощи в разрешении проблемы с magnificPopup. 

Ситуация следующая: у меня есть слайдер с галереями, в который интегрирован magnificPopup. При клике на ссылку-картинку, открывается попап, в котором должна отображаться галерея только из конкретного слайда.

Однако возникла проблема: в попап-галерее собираются изображения из всех галерей и слайдеров, а не только из нужного слайда.

ВОПРОС: Как можно разделить галереи так, чтобы попап показывал изображения исключительно из конкретного слайда, а не все сразу из всего слайдера?

Есть песочница для тестирования. 

Заранее спасибо за ваше содействие!

12 октября 2024 г. 11:32

Ответы на вопрос 1

Похожие вопросы

Answer 1

Добрый день!

Для того чтобы настроить галерию в magnificPopup так, чтобы она открывала только изображения из определенного слайда, вам нужно убедиться, что вы используете уникальные группы для каждой галереи.

Вот пошаговая инструкция, как это можно сделать:

### 1. Реализация структуры HTML

Предположим, у вас есть слайдер с несколькими слайдами, и каждый слайд содержит изображения:

```html
<div class="slider">
    <div class="slide" id="slide1">
        <a class="popup-gallery" href="img1.jpg"><img src="img1-thumb.jpg" alt="Image 1"></a>
        <a class="popup-gallery" href="img2.jpg"><img src="img2-thumb.jpg" alt="Image 2"></a>
    </div>
    <div class="slide" id="slide2">
        <a class="popup-gallery" href="img3.jpg"><img src="img3-thumb.jpg" alt="Image 3"></a>
        <a class="popup-gallery" href="img4.jpg"><img src="img4-thumb.jpg" alt="Image 4"></a>
    </div>
</div>
```

### 2. Настройка уникальной группы для каждой галереи

Теперь вам нужно установить уникальный атрибут для каждой группы ссылок внутри каждого слайда. Например, используйте атрибут `data-group` с уникальным значением:

```html
<div class="slider">
    <div class="slide" id="slide1">
        <a class="popup-gallery" data-group="slide1" href="img1.jpg"><img src="img1-thumb.jpg" alt="Image 1"></a>
        <a class="popup-gallery" data-group="slide1" href="img2.jpg"><img src="img2-thumb.jpg" alt="Image 2"></a>
    </div>
    <div class="slide" id="slide2">
        <a class="popup-gallery" data-group="slide2" href="img3.jpg"><img src="img3-thumb.jpg" alt="Image 3"></a>
        <a class="popup-gallery" data-group="slide2" href="img4.jpg"><img src="img4-thumb.jpg" alt="Image 4"></a>
    </div>
</div>
```

### 3. Инициализация magnificPopup

Теперь используйте jQuery для инициализации magnificPopup, следя за тем, чтобы функция собирала только элементы с одинаковым `data-group` при открытии:

```javascript
$(document).ready(function() {
    $('.popup-gallery').magnificPopup({
        type: 'image',
        gallery: {
            enabled: true
        },
        // Передаем атрибут data-group в качестве фильтра
        callbacks: {
            beforeOpen: function() {
                var groupName = $(this.st.el).data('group');
                this.st.group = $.map($(`.popup-gallery[data-group="${groupName}"]`), function(el) {
                    return $(el).data('magnific-popup');
                });
            }
        }
    });
});
```

### 4. Проверка работы

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

### Заключение

Данная настройка позволяет вам изолировать галереи так, чтобы каждая открывала только соответствующие изображения из конкретного слайда. Убедитесь, что вы правильно назначаете уникальные идентификаторы (группы) для ваших галерей. Этот подход должен решить вашу проблему. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!