Start a new topic
Implemented

additional options for mobile

To go along with this in the bug reports, http://starplugins.freshdesk.com/support/discussions/topics/76707


There are a few options I can think of to help this.


1. ability to disable cloudzoom if width < X

2. initiate cloudzoom if finger is held on image for Xms


the scrolling issue does complicate things and it could be confusing for the end user. 




2 people like this idea

Thanks for these suggestions. I think these are the most pragmatic solution so far.  


Will look to implement for the next release (next week). Thanks again.

I was looking for the #2 feature also. It's really difficult to scroll down the page on a mobile device at the moment. Any news on this?

Is the disable zoom feature been implemented for mobile yet?

 

There are now three features for mobile:


disableOnScreenWidth - this allows Cloud Zoom to disable itself on narrow screen devices e.g. 

disableOnScreenWidth:300 will disable zoom on screens of 300 pixels or less.


autoInside - this allows Cloud Zoom to automatically switch to 'inside' mode on narrow screens e.g.

autoInside: 300 will switch to 'inside' mode on screens of 300 pixels or less.


touchStartDelay - Delay in milliseconds that touch needs to be held down before zoom opens. This can allow normal page touch-scrolling to still work when images take up full device width. Example: touchStartDelay: 250 would open the zoom after image is held for 1/4 second.







 Where in the code do I add the  disableOnScreenWidth:300?



We are using CloudZoom for WooCommerce.  Thanks so much!

 

Hi,


Edit the plugin in WP Admin.


Find this:


        $.extend($.fn.CloudZoom.defaults, {

            // Add desired default Cloud Zoom properties here.

            zoomSizeMode: 'image',

            captionPosition: 'bottom'

        });


Change it to this:


        $.extend($.fn.CloudZoom.defaults, {

            // Add desired default Cloud Zoom properties here.

            zoomSizeMode: 'image',

            captionPosition: 'bottom',

            disableOnScreenWidth:300

        });


Save the changes, and that should do it. 


You'll need to make sure your cloudzoom.js version is reasonable recent to use that feature.


I added changed out that code and it successfully disabled it for mobile but it also disabled it completely an allows you to now click on the image.  Here is a link to the site www.pro-gard.com

Thanks!
Jenn

 

That's because you're missing a comma after 'bottom':


     captionPosition: 'bottom' ,

     disableOnScreenWidth:300


which is causing the page to crash with errors. When the zoom is disabled correctly, the gallery elements will still work to change the image, but without the zoom. 


If you need further help with this, please open a support ticked as it's easier to track progress.


Thanks.

Thanks so much!!  It works perfect :)