Перейти к содержанию
olorin

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

Рекомендуемые сообщения

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
13 минут назад, unknown сказал:

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Пробуйте

 

Изменено пользователем unknown

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 18.04.2017 в 17:32, unknown сказал:

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

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

Screenshot_16.png

jquery.imageLens.js

Изменено пользователем olorin

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
21 час назад, unknown сказал:

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

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

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

 

 

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

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

 

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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

Изменено пользователем unknown

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

unknown,

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Screenshot_17.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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 не тому изображению указал?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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, например)

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 которую вставить нужно можете разъяснить?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 } ?>

 

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 } ?>

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.