Нужен модуль зумма("лупы") для изображения на карточке товара

olorin · 18 квітня 2017

Нужно установить модуль для зумма изображения(бесплатный) но пока что мои поиски не дали результатов, устанавливал один модуль, который поломал весь сайт... По этому прошу вашей помощи ув. форумчане.

unknown · 18 квітня 2017

@olorin не модуль, но как вариант ссылка

olorin · 18 квітня 2017

13 минут назад, unknown сказал:

@olorin не модуль, но как вариант ссылка

Спасибо, как раз то что нужно, буду пробовать. Но не будет ли конфликта?

unknown · 18 квітня 2017

Зависит от того что у вас уже есть и как поставить.

Сделайте бэкап

Пробуйте

Змінено 18 квітня 2017 користувачем unknown

olorin · 20 квітня 2017

В 18.04.2017 в 17:32, unknown сказал:

@olorin не модуль, но как вариант ссылка

Спасибо, как раз то что нужно, буду пробовать. Но не будет ли конфликта?Попробовал реализовать этот плагин по предложенной вами ссылке - он работает но некорректно. Лупа появляется, но она не увеличивает изображение и появляется не на месте курсора а вообще в стороне.И так же после отведения курсора от изображения сама лупа никуда не исчезает. В js я не шарю, так что прошу помощи исправить скрипт. Вообщем вот скрин + сам скрипт

jquery.imageLens.js

Змінено 20 квітня 2017 користувачем olorin

unknown · 20 квітня 2017

olorin, читайте тут

Там есть демо страница и js файлы.

Spoiler

Quote
Include jQuery and the plugin on a page. Include your images and initialise the plugin.
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

<script>
    $('#zoom_01').elevateZoom();
</script>

У вас должен быть src с маленьким изображением, т.е. такой как сейчас, а data-zoom-image с большим.

В конце файла нужно вызвать дополнение.

И js файл у вас какой-то другой.

Посмотрите по ссылке

olorin · 21 квітня 2017

21 час назад, unknown сказал:

olorin, читайте тут

Там есть демо страница и js файлы.

Показать контент

У вас должен быть src с маленьким изображением, т.е. такой как сейчас, а data-zoom-image с большим.

В конце файла нужно вызвать дополнение.

И js файл у вас какой-то другой.

Посмотрите по ссылке

суть ясна, а реализация нет. т.к. изображение то подтягивается пыхой. Вопрос в том где мне взять изображение увеличенное. Товар же может меняться админом. А если задать атрибуты высоты и ширини изображения тегу img тот что должен быть с бОльшей картинкой?

olorin · 21 квітня 2017

честно говоря я не совсем понимаю как это реализовать

unknown · 21 квітня 2017

1 hour ago, olorin said:

Вопрос в том где мне взять изображение увеличенное.

А откуда берётся popup изображение, которое появляется при нажатии на фотографию товара?

Система - Настройки - Изображение - Всплывающее изображение - выставляете нужный размер всплывающего изображения (1000 на 1000, например)

в data-zoom-image (большое избр.) вставляете переменную popup (отвечает за всплывающее изображение)

добавляете в тег img id для зума, в этом случае zoom_01

          <?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="zoom_01" data-zoom-image="<?php echo $popup; ?>" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>

Внизу, там где все скрипты, вызываете

<script>
    $('#zoom_01').elevateZoom();
</script>

Для настройки зума под ваши нужды, используйте тот сайт и настройки, которые вам больше подходят

не забудьте в header прописать путь к jquery.elevatezoom.js

Змінено 21 квітня 2017 користувачем unknown

olorin · 21 квітня 2017

57 минут назад, unknown сказал:
А откуда берётся popup изображение, которое появляется при нажатии на фотографию товара?

Система - Настройки - Изображение - Всплывающее изображение - выставляете нужный размер всплывающего изображения (1000 на 1000, например)

в data-zoom-image (большое избр.) вставляете переменную popup (отвечает за всплывающее изображение)

добавляете в тег img id для зума, в этом случае zoom_01
          <?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="zoom_01" data-zoom-image="<?php echo $popup; ?>" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>
Внизу, там где все скрипты, вызываете
<script>
    $('#zoom_01').elevateZoom();
</script>
Для настройки зума под ваши нужды, используйте тот сайт и настройки, которые вам больше подходят

не забудьте в header прописать путь к jquery.elevatezoom.js

Спасибо большое за разъяснения, буду пробовать.

olorin · 22 квітня 2017

unknown,

в data-zoom-image (большое избр.) вставляете переменную popup (отвечает за всплывающее изображение)

добавляете в тег img id для зума, в этом случае zoom_01

этот пункт не совсем понятен

olorin · 22 квітня 2017

unknown,
я залил js файлы на ftp, в header.tpl указал путь к скриптам, в product.tpl изображению указал айдишник zoom_1, и в конце страницы product.tpl вставил

<script>
    $('#zoom_01').elevateZoom();
</script>

в итоге такая вот вещь получилась

olorin · 22 квітня 2017

В 21.04.2017 в 19:50, unknown сказал:
А откуда берётся popup изображение, которое появляется при нажатии на фотографию товара?

Система - Настройки - Изображение - Всплывающее изображение - выставляете нужный размер всплывающего изображения (1000 на 1000, например)

в data-zoom-image (большое избр.) вставляете переменную popup (отвечает за всплывающее изображение)

добавляете в тег img id для зума, в этом случае zoom_01
          <?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="zoom_01" data-zoom-image="<?php echo $popup; ?>" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>
Внизу, там где все скрипты, вызываете
<script>
    $('#zoom_01').elevateZoom();
</script>
Для настройки зума под ваши нужды, используйте тот сайт и настройки, которые вам больше подходят

не забудьте в header прописать путь к jquery.elevatezoom.js

и может я id не тому изображению указал?

unknown · 22 квітня 2017

2 hours ago, olorin said:

этот пункт не совсем понятен

Я же код вам написал, там всё есть

Вам осталось только найти у себя и заменить на этот

<?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="zoom_01" data-zoom-image="<?php echo $popup; ?>" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>

Зайти в админку и

Quote

Система - Настройки - Изображение - Всплывающее изображение - выставляете нужный размер всплывающего изображения (1000 на 1000, например)

olorin · 22 квітня 2017

17 минут назад, unknown сказал:

Я же код вам написал, там всё есть

Вам осталось только найти у себя и заменить на этот


<?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="zoom_01" data-zoom-image="<?php echo $popup; ?>" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>

Зайти в админку и

Не, это я понял. А по поводу переменной popup которую вставить нужно можете разъяснить?

olorin · 22 квітня 2017

24 минуты назад, unknown сказал:

Я же код вам написал, там всё есть

Вам осталось только найти у себя и заменить на этот


<?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="zoom_01" data-zoom-image="<?php echo $popup; ?>" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>

Зайти в админку и

Всё заработало!

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

olorin · 22 квітня 2017

1 час назад, unknown сказал:

Я же код вам написал, там всё есть

Вам осталось только найти у себя и заменить на этот


<?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img id="zoom_01" data-zoom-image="<?php echo $popup; ?>" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>

Зайти в админку и

Может вы сможете и по этой теме помочь?

legioner26 · 15 червня 2019

Вхід

Нужен модуль зумма("лупы") для изображения на карточке товара

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information