Jump to content
Sign in to follow this  
olorin

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

Recommended Posts

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

Share this post


Link to post
Share on other sites
13 минут назад, unknown сказал:

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

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

 

Share this post


Link to post
Share on other sites

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

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

Пробуйте

 

Edited by unknown

Share this post


Link to post
Share on other sites
В 18.04.2017 в 17:32, unknown сказал:

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

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

Screenshot_16.png

jquery.imageLens.js

Edited by olorin

Share this post


Link to post
Share on other sites

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 файл у вас какой-то другой.

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

 

Share this post


Link to post
Share on other sites
21 час назад, unknown сказал:

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

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

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

 

 

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

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

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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

Edited by unknown

Share this post


Link to post
Share on other sites
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

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

Share this post


Link to post
Share on other sites

unknown,

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

Screenshot_17.png

Share this post


Link to post
Share on other sites
В 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 не тому изображению указал?

Share this post


Link to post
Share on other sites
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, например)

 

Share this post


Link to post
Share on other sites
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 которую вставить нужно можете разъяснить?

Share this post


Link to post
Share on other sites
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 } ?>

 

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

 

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

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

Share this post


Link to post
Share on other sites
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 } ?>

 

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

 

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

Share this post


Link to post
Share on other sites

 

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.