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

Question

[Сергей Бурдужа]

Добрый вечер.
У меня есть такой блок с картинками.

<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.

Заранее благодарен за подсказку.

Answer 1

[VeryLongAgoDid]

let gallery = $('#js-product-image-gallery img');
for(let key in gallery){
    console.log( gallery[key].attr('src') );
}

А дальше сам ;)

Comments

[Сергей Бурдужа]

[VeryLongAgoDid]

Сергей Бурдужа, а если так?
console.log( gallery[key].prop('src') );

[Сергей Бурдужа]

VeryLongAgoDid, Все же это слишком заморочено.
Вот я нашел другое решение

$('#js-woocommerce-product-gallery__trigger').on('click', function(event) {
            event.preventDefault();

            var gallery = $(this).attr('href');

            $(gallery).magnificPopup({
                delegate: 'a',
                type:'image',
                gallery: {
                    enabled: true
                }
            }).magnificPopup('open');
        });

Только придется доработать.

Но, все равно, спасибо, что откликнулись.

[VeryLongAgoDid]

Сергей Бурдужа, не за что. Единственно сразу посоветую сменить имя переменной gallery. Вам же этот код потом править

[Сергей Бурдужа]

VeryLongAgoDid, да, спасибо. И главное, работает. А я сам не додумался.

[Сергей Бурдужа]

VeryLongAgoDid, У вас не будет немного времени просто взглянуть benefis-wp.myihor.ru/ru/product/the-forest-king-p-1802

Вот весь код

<div class="product-image-big">
            <a href="#js-product-image-gallery" 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">
                    <div class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/1.jpg'; ?>" alt="#1">
                    </div>
                    <div class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/2.jpg'; ?>" alt="#2">
                    </div>
                    <div class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/3.jpg'; ?>" alt="#3">
                    </div>
                    <div class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/4.jpg'; ?>" alt="#4">
                    </div>
                    <div class="img-wrap">
                        <img src="<?php echo get_template_directory_uri() . '/img/product-single/5.jpg'; ?>" alt="#5">
                    </div>
                </div>
            </div>
        </div>
        <ul class="product-image-gallery" id="js-product-image-gallery">
            <a href="<?php echo get_template_directory_uri() . '/img/product-single/1.jpg'; ?>">
                <img src="<?php echo get_template_directory_uri() . '/img/product-single/small/1.jpg'; ?>" alt="#1">
            </a>
            <a href="<?php echo get_template_directory_uri() . '/img/product-single/2.jpg'; ?>">
                <img src="<?php echo get_template_directory_uri() . '/img/product-single/small/2.jpg'; ?>" alt="#2">
            </a>
            <a href="<?php echo get_template_directory_uri() . '/img/product-single/3.jpg'; ?>">
                <img src="<?php echo get_template_directory_uri() . '/img/product-single/small/3.jpg'; ?>" alt="#3">
            </a>
            <a href="<?php echo get_template_directory_uri() . '/img/product-single/4.jpg'; ?>">
                <img src="<?php echo get_template_directory_uri() . '/img/product-single/small/4.jpg'; ?>" alt="#4">
            </a>
            <a href="<?php echo get_template_directory_uri() . '/img/product-single/5.jpg'; ?>">
                <img src="<?php echo get_template_directory_uri() . '/img/product-single/small/5.jpg'; ?>" alt="#5">
            </a>
        </ul>

let showOnClickImage = function () {
			$('#js-product-image-gallery img').each(function () {
				let alt = $(this).attr('alt');
				let span = '<span>' + alt + '</span>';
				$(this).parent().append(span);
			});

			$('#js-product-image-gallery a:first-child img').addClass('active');

			$('#js-product-image-gallery a').on('click', function (e) {
				e.preventDefault();
				let img = $(this).find('img');

				$('#js-product-image-gallery img').removeClass('active');
				img.addClass('active');
				let alt = img.attr('alt');
				let imgId = alt.slice(1);

				let imgWidth = 422;
				let imgLeft = 0;


				if (imgId === 1) {
					imgLeft = 0;
				} else {
					imgLeft = '-' + (imgWidth * (imgId - 1));
				}

				$('#js-product-image-big__images .product-image-big__images-wrap').css({
					'left': imgLeft + 'px'
				});
			});
		};
		showOnClickImage();
	});
</script>

После перезагрузки страницы, кликаю на миниатюры, и начинает работать слайдер.
Миниатюры обернуты в тег a, и для них прописал preventDefault.

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

То, есть, нужно после клика на иконку поиска, опять задать prevent default для миниатюры?

[VeryLongAgoDid]

Утром решил разобраться почему первый вариант выдавал ошибку. Действительно, чтобы воспользоваться функцией attr() из jQuery нужно обернуть коллекцию полученных элементов ещё раз. Вот так выглядит финальный результат:

let gallery = $('#js-product-image-gallery img');
for (let key in gallery) {
	console.log( $(gallery[key]).attr("src") );
}