Комментарии пользователя Сергей Бурдужа

<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 для миниатюры?

Написано более трёх лет назад

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

Сергей Бурдужа @serii81 Автор вопроса

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

Написано более трёх лет назад

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

Сергей Бурдужа @serii81 Автор вопроса

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');
        });

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

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

Написано более трёх лет назад

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

Сергей Бурдужа @serii81 Автор вопроса

Написано более трёх лет назад

Как исключить первый элемент из цикла wordpress?

Сергей Бурдужа @serii81 Автор вопроса

Дмитрий, а вы поделитесь кодом как это сделать?
Просто у меня вот такая верстка

<!-- News -->
<section class="section section-updates">
    <div class="section-ribbon">
        <i class="fa fa-bullhorn"></i>
    </div><!-- /.section-ribbon -->

    <header class="section-head">
        <h2>Latest News &amp; Events</h2>
        <h6>Checkout our latest updates</h6>
    </header><!-- /.section-head -->

    <div class="row">
        <div class="column large-6 medium-6">
            <div class="event">
                <div class="event-date">
                    <p>APRIL 21, 2015</p>
                </div><!-- /.event-date -->

                <div class="event-box">
                    <div class="event-image">
                        <a href="#">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/images/temp/event.jpg"
                                 width="270" height="177" alt=""/>
                        </a>
                    </div><!-- /.event-image -->

                    <div class="event-entry">
                        <h4>
                            <a href="#">New chip traps clusters of migrating tumor cells</a>
                        </h4>

                        <p>Said open land form moved air his signs moveth creepeth appear appear it. Appear living
                            you dry our tree one.</p>

                        <a href="#" class="link-more">
                            <i class="fa fa-plus"></i>
                            Know More
                        </a>
                    </div><!-- /.event-entry -->
                </div><!-- /.event-box -->
            </div><!-- /.event -->
        </div><!-- /.column large-6 -->

        <div class="column large-6 medium-6">
            <ul class="list-events">
                <li>
                    <a href="#">
								<span class="image">
									<img src="<?php echo get_template_directory_uri(); ?>/assets/images/temp/event1.jpg"
                                         width="270" height="177" alt=""/>
								</span>

                        <span class="title">New blood test can quickly diagnose irritable bowel syndrome.</span>
                    </a>
                </li>

                <li>
                    <a href="#">
								<span class="image">
									<img src="<?php echo get_template_directory_uri(); ?>/assets/images/temp/event2.jpg"
                                         width="270" height="177" alt=""/>
								</span>

                        <span class="title">Family history has 'no adverse effect' on breast cancer outcomes.</span>
                    </a>
                </li>

                <li>
                    <a href="#">
								<span class="image">
									<img src="<?php echo get_template_directory_uri(); ?>/assets/images/temp/event3.jpg"
                                         width="270" height="177" alt=""/>
								</span>

                        <span class="title">Brain area that decodes speech timing discovered.</span>
                    </a>
                </li>

                <li>
                    <a href="#">
								<span class="image">
									<img src="<?php echo get_template_directory_uri(); ?>/assets/images/temp/event4.jpg"
                                         width="270" height="177" alt=""/>
								</span>

                        <span class="title">Metabolic syndrome affects more than a third of Americans.</span>
                    </a>
                </li>
            </ul><!-- /.list-events -->
        </div><!-- /.column large-6 -->
    </div><!-- /.row -->

    <div class="section-actions">
        <a href="#" class="button btn-light-blue btn-small">CHECK OUT MORE NEWS</a>
    </div><!-- /.section-actions -->
</section><!-- /.section-updates -->

Написано более трёх лет назад

Как исключить первый элемент из цикла wordpress?

Сергей Бурдужа @serii81 Автор вопроса

Круто.
Только я сперва узнал id первого поста.
Потом во втором цикле прописал cat__not_in и id поста.

Получилось немного запутанно, но работает))

Спасибо вам за ответ.

Написано более трёх лет назад

Как настроить плавный переход по якорным ссылкам на мультиязычном сайте?

Сергей Бурдужа @serii81 Автор вопроса

Во втором if

if (browserHref === 'http://prodinfo.myihor.ru/' || browserHref === 'http://prodinfo.myihor.ru/en/' || browserHref === 'http://prodinfo.myihor.ru/ru/') {

Мне нужно, чтобы плавный скролл был только на главной.

И этот код работает.

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

Написано более трёх лет назад

Как настроить плавный переход по якорным ссылкам на мультиязычном сайте?

Сергей Бурдужа @serii81 Автор вопроса

Конечно нету.
Я немного видоизменил код

let scrollToAbout = function () {

		$('#js-main-menu li a').on('click', function (e) {
			let href = $(this).attr('href');
			if (href === 'http://prodinfo.myihor.ru/#js-offers' || href === 'http://prodinfo.myihor.ru/en/#js-offers' || href === 'http://prodinfo.myihor.ru/ru/#js-offers') {
				let browserHref = $(location)[0].href;

				if (href === 'http://prodinfo.myihor.ru/' || href === 'http://prodinfo.myihor.ru/en/' || href === 'http://prodinfo.myihor.ru/ru/') {
					e.preventDefault();

					let about = $('.offers');
					let aboutOffsetTop = about.offset().top;

					$('html, body').animate({
						scrollTop: aboutOffsetTop
					}, 1000);
				}


			}
		});

	};
	scrollToAbout();

Написано более трёх лет назад

Как в с помощью wpglobus вывести только кодировки языка на сайт?

Сергей Бурдужа @serii81 Автор вопроса

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

Написано более трёх лет назад

Как в с помощью wpglobus вывести только кодировки языка на сайт?

Сергей Бурдужа @serii81 Автор вопроса

То, что вы мне выдали, это просто объект, в котором находится массив с данными.
А мне нужно вывести кодировку языков с ссылками.

Так вот, что я придумал.

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

Написано более трёх лет назад