[Решено] Динамичный размер увеличенного размера в карточке товара

[vksenos]

Друзья.

Как побороть стандартные настройки opencart (1.5.6.4) по увеличенному изображению товара во всплывающем окне? Что бы окно менялось в зависимости от размера изображения (например вертикаль, горизонталь).

Помогите пожалуйста.

[halfhope]

Colorbox (просмотрщик фото) не адаптивный и делать такого не умеет. Используйте FancyBox / Lightbox / Magnific PopUp.

[Tom]

Делал на дефолтном шаблоне.С колорбоксом.Можно дописать скрипт который будет загружать картинку в процентном соотношении.

 

Для начала отрубаем  размеры картинок и выводим их реальный размер

 

catalog\controller\product\product.php

 

находим

$this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));

заменяем на 

  $this->data['popup'] = 'image/' . $product_info['image'];

ниже находим 

'popup' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),

заменяем на 

'popup' => 'image/' . $result['image'],

теперь добавим скрипт в шаблон

 

catalog\view\theme\ШАБЛОН\template\product\product.tpl

 

перед 

<?php echo $footer; ?>

добавляем

 

<script type="text/javascript"><!--
        jQuery.colorbox.settings.maxWidth  = '99%';
        jQuery.colorbox.settings.maxHeight = '99%';


        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> 

готово.

[vksenos]

Шикарноооо))) То что нужно)) Благодарю!) Все получилось)

[Josper2]

 

Делал на дефолтном шаблоне.С колорбоксом.Можно дописать скрипт который будет загружать картинку в процентном соотношении.

 

Для начала отрубаем  размеры картинок и выводим их реальный размер

 

catalog\controller\product\product.php

 

находим

$this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));

заменяем на 

  $this->data['popup'] = 'image/' . $product_info['image'];

ниже находим 

'popup' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),

заменяем на 

'popup' => 'image/' . $result['image'],

теперь добавим скрипт в шаблон

 

catalog\view\theme\ШАБЛОН\template\product\product.tpl

 

перед 

<?php echo $footer; ?>

добавляем

 

<script type="text/javascript"><!--
        jQuery.colorbox.settings.maxWidth  = '99%';
        jQuery.colorbox.settings.maxHeight = '99%';


        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> 

готово.

А как прописать, что бы размер картинки при открытии не превышал .. допустим 70% ширины экрана, но сохранял пропорции. (Для того, чтобы большие картинки не перекрывали весь экран)? 

[Tom]

Внимательно просмотрите ещё раз весь код мной написанный.Думаю проценты найти не такая проблема и изменить на свои.

[Josper2]

Внимательно просмотрите ещё раз весь код мной написанный.Думаю проценты найти не такая проблема и изменить на свои.

Да, я заметил эти проценты, но у меня ничего не меняется. Поставил по 5% и на высоту и на ширину... а воз и ныне там..

[Tom]

Значит не так или не то сделано.В моем примере картинки физически не могут быть больше экрана,так как им указан размер в 99 процентов по отношению к экрану.

[Josper2]

Значит не так или не то сделано.В моем примере картинки физически не могут быть больше экрана,так как им указан размер в 99 процентов по отношению к экрану.

А может предустановленный модуль загрузки фото нарушить данный код?

[Josper2]

Конкретно вот этот 

Загрузчик картинок для магазинов с большим числом товаров 1.1.1

[Tom]

Понятия не имею.

[Tom]

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

[Josper2]

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

У меня колорбокс и стоит (ИМХО)))) 

Вот мой несчастный сайт

[Tom]

Максимум что могу посоветовать,это скрипт разместить не в самом низу а внутри дива картинок.

<div class="image">
...............................</a>
<script type="text/javascript"><!--
        jQuery.colorbox.settings.maxWidth  = '99%';
        jQuery.colorbox.settings.maxHeight = '99%';


        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>
</div>

[Josper2]

 

Максимум что могу посоветовать,это скрипт разместить не в самом низу а внутри дива картинок.

<div class="image">
...............................</a>
<script type="text/javascript"><!--
        jQuery.colorbox.settings.maxWidth  = '99%';
        jQuery.colorbox.settings.maxHeight = '99%';


        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>
</div>

Спасибо большое! Попробую отпишусь)