2

Originally, the images in my theme had imagezoom on hover. However, this made it impossible to scroll over images when viewing the page on mobile phone - you just ended up zooming instead. Because of that, I decided to hide the imagezoom container from images.

However, I still can't scroll when hitting the main image of a product in mobile view. Can someone please help me figure out why?

Example: http://tiny.cc/79r92x Video of the scroll problem: https://youtu.be/wzWshmPIhiE

I have spoken to my theme developer, but they don't acknowledge the problem.

  • Did my answer work out for you in the end? – Milan Simek Sep 25 '15 at 0:38
  • Yes and thank you very much for your efforts. I have just accepted your answer :-) – user2806026 Sep 25 '15 at 4:42
  • Cheers. My pleasure! – Milan Simek Sep 25 '15 at 14:26
2

On line 1606 of your example page you can see the following javascript:

jQuery("#sns_product_img_media #zoom_img_media").on("click", function(e) { 
                    var ez = jQuery('#sns_product_img_media #zoom_img_media').data('elevateZoom');  
                    jQuery.fancybox(ez.getGalleryList()); 
                    return false;
                });

Remove the line that says return false;. That one causes the issue.

You can also test it in your browser console by pasting the following:

jQuery("#sns_product_img_media #zoom_img_media").unbind();
jQuery("#sns_product_img_media #zoom_img_media").on("click", function(e) { 
                    var ez = jQuery('#sns_product_img_media #zoom_img_media').data('elevateZoom');  
                    jQuery.fancybox(ez.getGalleryList()); 
                });

You'll see that it works well without the return false; statement when testing in mobile view.

(Just to clarify, the issue has to do with the way fancybox is initiated in the theme. )

EDIT:

It turns out the elevatezoom jQuery plugin is the culprit. In the file http://www.propagandashop.dk/js/sns/elevatezoom/jquery.elevatezoom.js you should search for the string touchmove.

It's defined 3 times, remove the e.preventDefault() that's defined in the callback function for the touchmove event.

enter image description here

After this you should be good!

  • Thank you very much. I really appreciate your help! I see that your suggestion about pasting the code in console works very well. BUT, it doesn't change anything when I remove the return false from my code. Can you please check the example page again and tell me if you see any other errors? Thanks again. – user2806026 Sep 23 '15 at 6:38
  • Hmm.. I keep having trouble with this. I tried removing the whole jQuery code as well, but that doesnt work either. Maybe it's actually the unbinding part of the console code that solves the issue? Could that be the case? :-) – user2806026 Sep 23 '15 at 16:21
  • Yeah that could be the case indeed. You might want to check out propagandashop.dk/skin/frontend/sns_avaz/default/js/app.js, and especially the pointerTarget.on('touchend', function(e) { line – Milan Simek Sep 23 '15 at 16:42
  • It seems it uses different detection methods, and uses e.preventDefault(), which prevents the click event to bubble up and possibly prevents a drag that way – Milan Simek Sep 23 '15 at 16:43
  • Hmm. Thanks! Do you think I can safely remove the whole mentioned function from app.js, or should I remove something specific? :-) – user2806026 Sep 23 '15 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.