RAJNIK PATEL RAJNIK PATEL - 6 days ago 5
Javascript Question

scrolling not working in mobile on image of elevatezoom.js data-zoom-image

I used following code for zoom images in product details page but on when image of zoom pluging you want to scroll and you stand on the image with your finger can not scroll Up or Down in 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>

Answer

Issue solved by doing this :

Search for touchmove event in jquery.elevatezoom.js and remove all preventDeafult() from it.