All geek questions in one place

Scrolling not working on a mobile phone on an image image Elevatezoom.js-zoom-image

I used the following code to scale images on the product details page, but when the image of the zoom plugin you want to scroll and you are standing on the image with your finger, you cannot scroll up or down on mobile phones

<div class="relative d_inline_b m_bottom_10 qv_preview d_xs_block" style="height: 440px"> <img title="Silver Diamond Band Ring" itemprop="image" style="cursor:zoom-in;position: relative;top: 50%;transform: translateY(-50%);" id="zoom_image" src="/img/product/thumb/1510161025300784.jpg" data-zoom-image="/img/product/big/1510161025299740.jpg" class="tr_all_hover" alt="Silver Diamond Band Ring"> <a href="/images/preview_zoom_1.jpg" class="d_block button_type_5 r_corners tr_all_hover box_s_none color_light p_hr_0"><i class="fa fa-expand"></i></a> </div>
+1
source share
2 answers

The problem is solved with this:

Find the touchmove event in jquery.elevatezoom.js and remove all preventDeafult() from it.

+1
source

I just had the same problem and your answer was very useful, but when you remove warnDefault (), the elevatezoom functionality is removed from the desktop view.

I would delete only for mobile devices using javascript mediamatch:

  if (window.matchMedia("(max-width: 640px)").matches) { /* The viewport is less than, or equal to, 640 pixels wide */ } else { /* The viewport is greater than 640 pixels wide */ e.preventDefault(); }

To make the above changes, go to elevatezoom.js and find 'e.preventDefault ();' and replace with the code above. Change the maximum width: 640 pixels to the desired viewing port.

Hope this helps someone

+1
source

Source: https://habr.com/ru/post/1206648/

More articles:


All Articles