• Зарегистрирован: 14.02.2016
  • Сообщений: 2

Тема: Zoom/увеличение внутри фото товара

В теме fashion реализована функция увеличения фото при наведении в том же фрейме при помощи javascript (jquery.zoom.min). В сеточных темах почему-то её нет, хотя очень бы пригодилась.

Подскажите пожалуйста, в какие места и файлы необходимо внести изменения для реализации работы данного скрипта?

Повысить оценку Понизить оценку

  • Зарегистрирован: 25.03.2016
  • Сообщений: 21
  • Рейтинг: 5

Re: Zoom/увеличение внутри фото товара

Перед тем как вносить измения, пожалуйста ознакомьтесь с вот этим руководством:
http://readyscript.ru/faq/#faq-change-template


За функцию увеличения фото в теме fashion отвечает плагин \resource\js\jquery.zoom.min.js

Чтобы его использовать, нужно:

1. скопировать его в свою тему

2. импортировать его в шаблон \moduleview\catalog\product.tpl, добавив в начало следующую конструкцию:

{addjs file="jquery.zoom.min.js"}

3. изменить вывод фотографий в шаблоне

{foreach $images as $key => $image}
    <a href="{$image->getUrl(800,600,'xy')}" data-id="{$image.id}" class="item mainPicture {if ($offer_images && ($image.id!=$offer_images.0)) || (!$offer_images && !$image@first)} hidden{/if} zoom" {if ($offer_images && in_array($image.id, $offer_images)) || (!$offer_images)}rel="bigphotos"{/if} data-n="{$key}" target="_blank" data-zoom-src="{$image->getUrl(947, 1300)}"><img class="winImage" src="{$image->getUrl(350,486,'xy')}" alt="{$image.title|default:"{$product.title} фото {$key+1}"}"></a>
{/foreach}

4. привязать скрипт к фотографиям, добавив следующий скрипт в $(window).load

    $('.productImages .zoom').each(function() {
        $(this).zoom({
            url: $(this).data('zoom-src'),
            onZoomIn: function() {
                $(this).siblings('.winImage').css('visibility', 'hidden');
                
            },
            onZoomOut: function() {
                $(this).siblings('.winImage').css('visibility', 'visible');
            }            
        });
    });

Повысить оценку Понизить оценку

  • Зарегистрирован: 14.02.2016
  • Сообщений: 2

Re: Zoom/увеличение внутри фото товара

Почему-то не работает + переключение фото с нажатием на миниатюры перестает функционировать (миниатюры не реагируют никак на клики, всегда висит главное фото)

Поэкспериментировал с темами perfume, young - везде аналогичный результат.
Опытным путем, заменяя файлы, определил, что загвоздка где-то в пункте 3.

Можете на примере, скажем темы young, показать, как корректно внести изменения в product.tpl?

Повысить оценку Понизить оценку

  • Откуда: Краснодар
  • Зарегистрирован: 01.09.2014
  • Сообщений: 2,955
  • Рейтинг: 252

Re: Zoom/увеличение внутри фото товара

Ну мы не можем это дать. т.к. для young полный листинг, то это довольно долго описывать и делать. Мы Вам дали вверху, то что надо сделать. Но допилить Вам надо самостоятельно, т.к. в любом случае, вам надо разбираться javascript и вёрстке если уж Вы принялись переделывать.

Мы можем Вам помочь если у Вас затык какой-то конкретный. Т.е. чтобы Вы тоже немножко разбирались в теме. Посмотрите консоль ошибок в FireFox может там что-то. Используйте console.log. Или дайте пример, того что вы уже сделали, чтобы мы могли хотябы в готовом чем-то Вам подсказать.

СайтЗакусило Александр

Повысить оценку Понизить оценку