Disable Zoom and Expand on touchscreen devices.

Integration of Magic Zoom Plus from http://www.magictoolbox.com with Actinic.
Post Reply
norman
Site Admin
Posts: 1242
Joined: Sat Feb 07, 2004 9:55 pm

Disable Zoom and Expand on touchscreen devices.

Post by norman » Tue Jan 07, 2014 4:41 pm

You can disable the Zoom and Expand features on touch type devices so that the add-on just swaps the main product image.

To do this, go to Design / Library / Layouts / Zoom Image Layout / Magic Zoom Support and look for the line:

Code: Select all

$(document).ready(function(){
Immediately after this add:

Code: Select all

// additional code to disable Zoom and Expand when using a touch device
var deviceAgent = navigator.userAgent.toLowerCase();
var isTouchDevice = ('ontouchstart' in document.documentElement) || 
	deviceAgent.match(/(iphone|ipod|ipad|android|iemobile|blackberry|bada)/);
if ( isTouchDevice )
	{
	$( "a[id^='mz-']" ).each(function(){$(this).attr('rel', 'disable-zoom:true;disable-expand:true;');});
	}
You could further tweak this to only operate on screens below a particular size.

Or remove |ipad so the full feature set works on ipads (but not iphones).

Note that the code above may need tweaking as new devices come into use.
Norman

Post Reply