Перейти к содержанию
vksenos

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

Рекомендуемые сообщения

Друзья.

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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> 

готово.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

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

 

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

 

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% ширины экрана, но сохранял пропорции. (Для того, чтобы большие картинки не перекрывали весь экран)? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.