Зум фотографий в карточке товара?

Подкажите, пожалуйста, как реализовать такую возможность зума фотографий в карточке товара на OpenCart 2.0.3.1?
Например, как тут http://avastore.oldaine.ru/index.php?route=product/product&path=18&product_id=43

 

http://forum.opencart-russia.ru/threads/uvelichenie-kartinki-pr-navedenii.1050/#post-6485

 

Сделал модуль зума или лупы.

Во вложении, архив. Разархивировать как обычно в корень.
В модификаторах обновить.
Работает на стандартной теме. На других не тестировал.

 

На теме Coloring работает отлично.
Правда если одна и больше фото, то после переключения на вторую миниатюру, зумит все равно первую. У вас тоже так?

 

на на дефолте проверял.. уже не помню. Проверьте на дефолте, если тоже так же.. посмотрю..

 

А на дефолте оно поп-апит сразу фотку при клике (т.е. разная реализация в шаблонах deafault и coloring).

 

Может кто подскажет, как подправить OCMOD, что бы зум срабатывал не только на первой миниатюре, а и на других?
Пример на сайте: http://bit.ly/2lnswh3
OCMOD от @Vlad

Код:

<modification>
    <name>Zoom-zoom</name>
    <code>Zoom-zoom</code>
    <version>1.0</version>
    <author>Vlad</author>
    <link>http://forum.opencart-russia.ru</link>

    <file path="catalog/view/theme/*/template/common/footer.tpl">
        <operation>
            <search><![CDATA[</body>]]></search>
            <add position="before"><![CDATA[
                <script src="catalog/view/javascript/jquery.elevatezoom.min.js" type="text/javascript"></script>
                <script type="text/javascript">
                $(document).ready(function(){
                    $("#zoom_01").elevateZoom({
                        cursor:"crosshair",
                        zoomWindowFadeIn:500,
                        zoomWindowFadeOut:750,
                        lensFadeIn:500,
                        lensFadeOut:500
                    })
                });
                
                $(window).on("resize",function(){
                    if ($(this).width() < 900) {
                        $("#zoom_01").elevateZoom({cursor:"crosshair", zoomType:"inner", zoomWindowFadeIn:500, zoomWindowFadeOut:750, lensFadeIn:500, lensFadeOut:500});
                    } else {
                        $("#zoom_01").elevateZoom({cursor:"crosshair",zoomType:"window",zoomWindowFadeIn:500,zoomWindowFadeOut:750,lensFadeIn:500,lensFadeOut:500});
                    }
                });
                </script> 
            ]]></add>
        </operation>
    </file>
    <file path="catalog/view/theme/*/template/product/product.tpl">
        <operation>
            <search><![CDATA[<?php echo $thumb; ?>"]]></search>
            <add position="replace"><![CDATA[<?php echo $thumb; ?>" id="zoom_01" data-zoom-image="<?php echo $popup; ?>" ]]></add>
        </operation>
    </file>
    

</modification>

 

Никак. Точнее нужно делать по месту. Посмотрите в исходник указанного сайта и повторите часть js которая по клику меняет большое изображение товара.

 

Товарищ

Скачал ваш модуль, установил, все отлично, но вот как решить проблему с зумом остальных картинкок Подскажите. А то только первая зумируется. А в коде я не силен((((

 

Сделал чтобы менял изображения по клику.

 

Спасибо огромное...

 

Вот что у меня вышло после обновления((((((
https://cloud.mail.ru/public/BoRq/9V8gWquLN

 

Я под версию 2.3 делал. В версиях ниже значения ресайза в контроллере задаются по другому.

 

((( и как быть

 

переделать окмод в строчке где изменения в контроллер вносятся.
Ну или в будни подправлю, сейчас нет времени уже.

 

я в коде не соображаю) буду ждать

еще раз спасибо

 

Для 2.1 и ниже модификатор

 

У меня конфликтует с модулем Video In Product (Видео в карточке товара (в дополнительных изображениях). Вернул пока старый модификатор, надо будет разобраться еще) Но спасибо и на этом!

 

Как решилась проблема?

 

Никак не решилась. Пока отказались от этой идеи. Автору конечно спасибо за модуль который тут выкладывал. Но его надо пилить и пилить. Последнее обновление не исправил ошибку с зумом картинки