Как отключить zoom у фотографий при наведении?

30 июля 2018 г.

#

Как отключить zoom у фотографий при наведении?

Столкнулся с одной проблемой, такой как zoom при наведении мышкой на картинку который ее увеличивает, он ужасно ведет себя в мобильных телефонах. У мобильников нет мышки и ты не можешь прокрутить страницу вниз не коснувшись экрана. И вот когда ты доходишь до картинки где работает этот эффект ты просто скользишь на месте, не можешь сдвинуть страницу никуда, потому что срабатывает zoom. Человеку ничего не остается кроме как закрыть страницу. Все мобильные пользователи априори не могут пользоваться сайтом. Это же кошмар какой-то!!

Как это можно было реализовать и не подумать о мобильных устройствах?? Это у меня у одного такая проблема возникла? Почему никто раньше не обращал на это внимание? Как убрать для мобильных устройств это или вообще убрать ??

Модератор 30 июля 2018 г.

#

Re: Как отключить zoom у фотографий при наведении?

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

30 июля 2018 г.

#

Re: Как отключить zoom у фотографий при наведении?

Да, я это прекрасно понимаю) Но так не должно быть, чтобы когда посетитель доходит до картинки он просто застряет на ней и не может никуда сдвинуться. Ему остается только закрыть страницу. Этого не должно быть даже в стандартном демонстрационном шаблоне. У вас прекрасные адаптивные шаблоны и такой фейл извините с картинкой товара. Откажитесь от такого зума в стандартном шаблоне если его не исправить для мобильных устройств.

Модератор 30 июля 2018 г.

#

Re: Как отключить zoom у фотографий при наведении?

raink,
вы даже не написали о каком шаблоне идет речь!

30 января 2020 г.

#

Re: Как отключить zoom у фотографий при наведении?

Речь о шаблоне "Адаптивный шаблон" https://www.hostcms.ru/shop/market/shop-templates/multipurpose/responsive/ В карточке товара эта проблема актуальна на планшетах и смартфонах. Подозреваю, правки требует файл '/hostcmsfiles/jquery/jquery.elevatezoom-3.0.8.min.js' либо грамотное удаление стилей в XSL-шаблоне:

<div class="thumbnails">
            
            <xsl:if test="image_small != ''">
               <div class="main-image">
                  <a href="{dir}{image_large}" class="thumbnail elevatezoom-gallery">
                     <img id="zoom" src="{dir}{image_large}" data-zoom-image="{dir}{image_large}"/>
                  </a>
               </div>

               <div id="additional-images" class="additional-images-slider">
                  <div class="item">
                     <a href="{dir}{image_large}" class="elevatezoom-gallery active" data-image="{dir}{image_large}" data-zoom-image="{dir}{image_large}">
                        <img src="{dir}{image_large}" height="100" width="100"/>
                     </a>
                  </div>

                  <xsl:for-each select="property_value[tag_name='img'][file !='']">
                     <div class="item">
                        <a href="{../dir}{file}" class="elevatezoom-gallery" data-image="{../dir}{file}" data-zoom-image="{../dir}{file}">
                           <img height="100" width="100" src="{../dir}{file}"/>
                        </a>
                     </div>
                  </xsl:for-each>
               </div>
            </xsl:if>
         </div>

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

Если кто-то может подсказать решение, будет очень здорово.

lbrstudio@mail.ru

1 февраля 2020 г.

#

Re: Как отключить zoom у фотографий при наведении?

O`Breea писал(а):

<img id="zoom" src="{dir}{image_large}" data-zoom-image="{dir}{image_large}"/>

Если убрать id="zoom" то перестанет работать для картинки функция elevateZoom. Если необходимо отключение только в мобильных устройствах то вам понадобиться программно сделать проверку.

E-mail: info@syrbek.ru / телега: @syrbek /skype: activexm / syrbek.ru / Поддержка сайтов / г. Москва [HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, Git, SVN, Redmine]

Авторизация