serii81
@serii81
Я люблю phр...

Как включить галлерею magnific popup при клике на кнопку?

Добрый вечер.
У меня есть такой блок с картинками.
<div class="product-image-big">
            <a href="#" class="woocommerce-product-gallery__trigger" id="js-woocommerce-product-gallery__trigger">
                <img draggable="false" class="emoji" alt="" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/1f50d.svg">
            </a>
            <div class="product-image-big__images" id="js-product-image-big__images">
                <div class="product-image-big__images-wrap">
                    <a href="<?php echo get_template_directory_uri() . '/img/product-single/1.jpg'; ?>" class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/1.jpg'; ?>" alt="#1">
                    </a>
                    <a href="<?php echo get_template_directory_uri() . '/img/product-single/1.jpg'; ?>" class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/2.jpg'; ?>" alt="#2">
                    </a>
                    <a href="<?php echo get_template_directory_uri() . '/img/product-single/1.jpg'; ?>" class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/3.jpg'; ?>" alt="#3">
                    </a>
                    <a href="<?php echo get_template_directory_uri() . '/img/product-single/1.jpg'; ?>" class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/4.jpg'; ?>" alt="#4">
                    </a>
                    <a href="<?php echo get_template_directory_uri() . '/img/product-single/1.jpg'; ?>" class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/5.jpg'; ?>" alt="#5">
                    </a>
                </div>
            </div>
        </div>


Вот ссылка на страницу benefis-wp.myihor.ru/ru/product/the-forest-king-p-1802

На картинке с товаром есть кнопак в виде иконки поиска.

При клике по ней, нужно, чтобы сработала галлерея из блока с id js-product-image-big__images.

На сайте с документацией прописан механизм при клике на кнопки и вывод элементов в галлереи, только мне не понятно как добавлять в элемент свойство items картинки
items: [
                {
                    src: $('#js-product-image-gallery img')
                },
            ],


Я сделал перебор картинок через jquery.
let gallery = $('#js-product-image-gallery img');
        for(var key in gallery){
        	console.log(gallery[key]);
        }


Но получаю множество свойств, но мне нужно вытащить только пути к картинкам, положить в объект и передать в свойство items.

Заранее благодарен за подсказку.
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
@VeryLongAgoDid
Всё возможно
let gallery = $('#js-product-image-gallery img');
for(let key in gallery){
    console.log( gallery[key].attr('src') );
}

А дальше сам ;)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы