Всплывающее изображение colorbox на мобильном

[michnoff]

Приветствую! Имеется магазин сантехники на ocstore 1.5.5.1.2. не могу справиться с всплывающим изображением colorbox( например при увеличении изображения в карточке товара). Если сайт отображается в полном размере(мобильной верстки нет), то всплывающее изображение отображается слева и не в полный размер - вот так http://pixs.ru/showimage/Bezimyanni_6691044_22501114.png , а нужно, что бы изображение открывалось по ширине дисплея во весь размер вот так http://pixs.ru/showimage/Bezimyanni_5886507_22501123.png. Это можно как то поправить? Если нужна ссылка на магазин http://shop-grohe.by/

Змінено 27 червня 2016 користувачем michnoff

[cloudrc]

Попробуйте это:

// Респонсивный ColorBox

jQuery.colorbox.settings.maxWidth = '95%';

jQuery.colorbox.settings.maxHeight = '95%';

// Функция ресайза ColorBox

var resizeTimer;

function resizeColorBox()

{

if (resizeTimer) clearTimeout(resizeTimer);

resizeTimer = setTimeout(function() {

if (jQuery('#cboxOverlay').is(':visible')) {

jQuery.colorbox.load(true);

}

}, 300);

}

// Ресайз при изменении размера окна браузера и

// изменении ориентации мобильного устроиства

jQuery(window).resize(resizeColorBox);

window.addEventListener("orientationchange", resizeColorBox, false);

Пс. Извиняюсь, что код не спрятал в форму, пишу с мобильного)

Змінено 27 червня 2016 користувачем cloudrc

[Dotrox]

Либо можно просто заменить ColorBox на FancyBox, который из коробки отлично поддерживает адаптивность.

[Tom]

https://opencartforum.com/files/file/1499-photobox/

[michnoff]

Попробуйте это:

// Респонсивный ColorBox

jQuery.colorbox.settings.maxWidth = '95%';

jQuery.colorbox.settings.maxHeight = '95%';

// Функция ресайза ColorBox

var resizeTimer;

function resizeColorBox()

{

if (resizeTimer) clearTimeout(resizeTimer);

resizeTimer = setTimeout(function() {

if (jQuery('#cboxOverlay').is(':visible')) {

jQuery.colorbox.load(true);

}

}, 300);

}

// Ресайз при изменении размера окна браузера и

// изменении ориентации мобильного устроиства

jQuery(window).resize(resizeColorBox);

window.addEventListener("orientationchange", resizeColorBox, false);

Пс. Извиняюсь, что код не спрятал в форму, пишу с мобильного)

Очень сложные манипуляции для меня! может подскажешь хотя бы какие файлы редактировать нужно? Заранее благодарен

[cloudrc]

Вставляйте в product.tpl перед <?php echo $footer; ?> следующий код:

<script>
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';
jQuery.colorbox.settings.opacity = '0.5';

        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }

        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
</script>

Меняя jQuery.colorbox.settings.maxWidth и jQuery.colorbox.settings.maxHeight можно менять размер окна.

Змінено 29 червня 2016 користувачем cloudrc

[michnoff]

Вставляйте в product.tpl перед <?php echo $footer; ?> следующий код:

<script>
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';
jQuery.colorbox.settings.opacity = '0.5';

        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }

        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
</script>

Меняя jQuery.colorbox.settings.maxWidth и jQuery.colorbox.settings.maxHeight можно менять размер окна.

Попробовал, ни как не повлияло на отображение