Configuring the Jquery Image Zoom Plugin
There is an online store of "intimate health products" on WP. I didn't write it, I only got the improvements. so, when working through mobile devices, we have an adaptive layout-just media queries, as I understand it, everything is beautifully(relatively) compressed to fit the size of the display of the device. going to the product card, at the top we see the image itself, which can not be scrolled:
This, as it turned out, achieved via the Jquery Image Zoom Plugin. now the question is-what to do? how do I set up this moment? after all, there is, apparently, an interception of the tap event on the display or what?
1 answers
Option 1: when focusing on the image, reduce and increase it. This is achieved using the Mousewheel, imgViewer, and your Jquery Image Zoom Plugin. The ready-made solution can be viewed here:
Option 2: use css to adjust the images.
.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>