Настройка Jquery Image Zoom Plugin

209

08 марта 2017, 19:05

имеется интернет-магазин "товаров интимного здоровья" на WP. писал не я, мне достались лишь доработки. итак, при работе через мобильные устройства у нас работает адаптивная верстка - просто медиа-запросами, как я понимаю, красивенько(относительно) всё сжимается под размеры дисплея уст-ва. зайдя в карточку товарА, вверху мы видим само изображение, по которому нельзя скроллить:

это, как выяснилось, достигается посредством Jquery Image Zoom Plugin. теперь вопрос - как быть? как настроить этот момент? ведь происходит, видимо, перехват события тапа по дисплею или что?

Answer 1

Вариант 1: при фокусе на картинке уменьшать и увеличивать её. Достигается с помощью плагинов Mousewheel, imgViewer и ваш Jquery Image Zoom Plugin. Готовое решение можно посмотреть здесь:

Вариант 2: с помощь css подогнать картинки.

.img-container { 
  width:200px;  
  height:200px; 
  display:flex; 
  justify-content: center; 
  align-items: center; 
  background: #e1e1e1; 
  margin-top: 10px; 
} 
.img-container img { 
  width:auto; 
  max-width:100%; 
  height:auto;  
  max-height:100%; 
}

<div class="img-container"> 
        <img src="https://cdn.riastatic.com/photosnew/auto/photo/infiniti_qx70__160250419b.jpg" > 
 
    </div> 
    <div class="img-container"> 
        <img  src="http://euroavto.in/journalist/images/news/210/icon/d_22.jpg" /> 
    </div>