Как открыть лайтбокс на мобильном устройстве?

Question

[ALEX]

Здравствуйте. Есть сайт www.ostin.tattoo . При нажатии на картинку в галерее открывается лайтбокс с ней. На мобильном устройстве этого не происходит. Как сделать чтобы при нажатии он открывался и на мобильном устройстве. Что уже не перепробовал, перерыл все функции темы. Плагины не предлагать. Заранее благодарен за вашу помощь ))

Comments

[archelon]

если в настройках плагина нужной галочки нет, то сам скрипт надо ковырять. где-то прописано, что скрипт работает при ширине экрана от ~1024px.

Answer 1

[Боб Хоуп]

Привет, посмотрел в custom.js файле и в функции pixflow_portfolioPopup проверяется, что ширина экрана не менее 1024 пикселей, прежде чем открывать попап.

Чтобы попап заработал на мобильном, нужно поправить функцию вот так:

function pixflow_portfolioPopup() {
    'use strict';

    $('body').on('click',".inside .item-wrap.portfolio-popup",function(e){
        var element= e.target || e.srcElement;
        if ((e.which != 2) ) { // <-- убрал проверку ширины экрана здесь.
            if (element.attributes.class.nodeValue.indexOf('icon') < 0) {
                $.magnificPopup.open({
                    items: {
                        src: $(this).find(".item-image").attr('data-src')
                    },
                    overflowY:'scroll',
                    type: 'image',
                    closeOnContentClick: false,
                    closeBtnInside: false,
                    mainClass: 'mfp-with-zoom mfp-img-mobile',
                    callbacks: {
                        beforeOpen: function () {
                        },
                        afterClose: function () {
                            $("html").css({'overflow-y': 'auto'});
                        },
                    }
                }, 0);
            }
        }
    });
    $('body').on('click', ".outside .item-image.portfolio-popup", function () {
         //убрал проверку ширины экрана здесь.
            $.magnificPopup.open({
                items: {
                    src: $(this).attr('data-src')
                },
                overflowY:'scroll',
                type: 'image',
                closeOnContentClick: false,
                closeBtnInside: false,
                mainClass: 'mfp-with-zoom mfp-img-mobile',
                callbacks: {
                    beforeOpen: function () {
                    },
                    afterClose: function () {
                        $("html").css({'overflow-y': 'auto'});
                    },
                }
            }, 0);
    });
}

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

Comments

[ALEX]

а можете подсказать путь к файлу в котором вы нашли эту функцию

[Боб Хоуп]

Вот он: www.ostin.tattoo/wp-content/themes/massive-dynamic...

[ALEX]

огромное спасибо вам))

[Боб Хоуп]

Нужная функция в этом файле начинается на строчке 7073. Но у меня есть подозрение, что этот файл может собираться вордпрессом из кучки разных js-файлов, включенных в тему.

[Боб Хоуп]

Да не за что ;)

[ALEX]

Боб Хоуп: function pixflow_portfolioPopup() {
'use strict';

$('body').on('click',".inside .item-wrap.portfolio-popup",function(e){
var element= e.target || e.srcElement;


$.magnificPopup.open({
items: {
src: $(this).find(".item-image").attr('data-src')
},
overflowY:'scroll',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
callbacks: {
beforeOpen: function () {
},
afterClose: function () {
$("html").css({'overflow-y': 'auto'});
},
}
}, 0);


});
$('body').on('click', ".outside .item-image.portfolio-popup", function () {

$.magnificPopup.open({
items: {
src: $(this).attr('data-src')
},
overflowY:'scroll',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
callbacks: {
beforeOpen: function () {
},
afterClose: function () {
$("html").css({'overflow-y': 'auto'});
},
}
}, 0);
});
}

[ALEX]

изменил код к этому виду, все ровно он проверяет ширину экрана

[ALEX]

Боб Хоуп: что еще можно попробовать сделать

[Боб Хоуп]

Александр Ожиняк: только что проверил с мобильного: на вашем сайте теперь поп-ап открывается. Может у вас на компьютере/мобильном в кэше просто старый файл сидит? Можно попробовать почистить кэш или сделать хард-рефреш.

[ALEX]

Боб Хоуп: Здравствуйте, большое вам спасибо, очистил кеш и все работает. Только есть один небольшой нюанс: лайтбокс не открывается на IOS. С андроидом все хорошо.