Jump to content
Sign in to follow this  
vksenos

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

Recommended Posts

Друзья.

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

 

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> 

готово.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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

 

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

 

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

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.