change jqzoom parameters on browser resize / orientation change

[tonycajjo]

when you change orientation or browser size, the jqzoom will be in the wrong spot.

 

so i've added the following code to products.js to fix the jqzoom popup location when you orientation changes.

if (window.DeviceOrientationEvent) {
    window.addEventListener('orientationchange', function() { location.reload(); }, false);
}

the only problem is that is a crude way of fixing a simple problem.  i tried to add the following code but it doesnt work.  (to set the parameters based on borwser size)  how can i get the .js to reload or how do i cahnge the code below to get it the jqzoom settings to be set again.

if (window.DeviceOrientationEvent) {
    //set jqZoom parameters if needed
	if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled && window.innerWidth >= 768 && window.innerWidth <= 992)
	{
		$('.jqzoom').jqzoom({
			zoomType: 'reverse', //innerzoom/standard/reverse/drag
			zoomWidth: 255, //zooming div default width(default width value is 200)
			zoomHeight: 205, //zooming div default width(default height value is 200)
			xOffset: 21, //zooming div default offset(default offset value is 10)
			yOffset: 0,
			title: false,
			position:'right',
			imageopacity: 0.2,
			showEffect: 'fadein',  
            hideEffect: 'fadeout',
		});
	}
	if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled && window.innerWidth > 992 && window.innerWidth <= 1200)
	{
		$('.jqzoom').jqzoom({
			zoomType: 'reverse', //innerzoom/standard/reverse/drag
			zoomWidth: 325, //zooming div default width(default width value is 200)
			zoomHeight: 225, //zooming div default width(default height value is 200)
			xOffset: 21, //zooming div default offset(default offset value is 10)
			yOffset: 57,
			title: false,
			position:'right',
			imageopacity: 0.2,
			showEffect: 'fadein',  
            hideEffect: 'fadeout',
		});
	}
	if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled && window.innerWidth > 1200)
	{
		$('.jqzoom').jqzoom({
			zoomType: 'reverse', //innerzoom/standard/reverse/drag
			zoomWidth: 400, //zooming div default width(default width value is 200)
			zoomHeight: 275, //zooming div default width(default height value is 200)
			xOffset: 21, //zooming div default offset(default offset value is 10)
			yOffset: 71,
			title: false,
			position:'right',
			imageopacity: 0.2,
			showEffect: 'fadein',  
            hideEffect: 'fadeout',
		});
	}
}

any suggestions?  i want to implement the same code for browser resize:

$(window).resize( function() {
	
	//set jqZoom parameters
}

[Eolia]

On the top of the global.js

$(window).on('orientationchange',function(){
	document.location.reload(true);
});