Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

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

Друзья.

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

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

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


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

 

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

 

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> 

готово.

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

  • 1 месяц спустя...

 

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

 

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

 

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