Responsive AJAX-ZOOM mousehover zoom jQuery extension Ver. 4.1.2 [2015-10-06] with optional 360° spins or multilevel 3D

About AJAX-ZOOM: what makes the difference exactly?

On default only the high resolution "master images" (source images) need to be defined, see "images" object / array in the example code below. This "images" object is basically the only thing which needs to be replaced dynamically by your application.

All thumbnails and flyout view images are instantly generated by AJAX-ZOOM "image server" which is located at your place (server). The size of the flyout image can be set to e.g. 1200x1200px, which are at most 1.44 Mio. pixels. For a 21 megapixels master image made by e.g. Canon EOS 5D these are around 5-7% of the actual resolution and size.

Alternatively to AJAX-ZOOM PHP based "image server" the paths to these flyout "preview" images can be hardset (see "images" option below) to point to some static (already scaled) images.

By clicking on the lens your users can explore the details of the entire big image with AJAX-ZOOM, which utilizes image tiles technology (simmilar to google maps where the view "gets sharp" when you zoom in), so the big master image never loads into browsers cache; it can be even protected from direct access over http e.g. with .htaccess - (simply put .htaccess file with this code and nothing else into the top directory with your master images: deny from all).

Same as with thumbnails all image tiles can be generated instantly on-the-fly or pregenerated with AJAX-ZOOM special batch tool...

Details about responsiveness

The width of the container in the left column of this responsive page layout is set to 32% of the window width. Consequently the child elements in the left column are 100% width and do change their width instantly depending on window width. So does AJAX-ZOOM mouseover zoom extension.

But what about the height of this mouseover zoom? It can be set to a fixed pixel value; if your responsive layout takes into account the height it can also be set to some variable value; but most likely you would just want to preserve a certain proportion of the height depending on width. In this case just set the new "heightRatio" option e.g. to 1.0 and the height of mouseover will be instantly adjusted making the mouseover square. If your images are mostly portrait orientated (common for fashion retailers), then you could set "heightRatio" value to e.g. 1.5; setting "heightRatio" to 'auto' will set the proportion instantly to the proportion of the actual image. Be aware though that if proportion of the images in the gallery is different the height will change on image switching, which might be unwanted behavior.

Setting "heightRatio" option may result in that the height of the mouseover zoom is bigger than window height and the image is not fully visible. To prevent this you can limit the calculated height with the "maxSizePrc" option. The value of 1.0 would limit the height to 100% of window height; a value of 0.8 to 80% of window height; you can also define two values, e.g. '1.0|-120' which would be window height minus 120px.

This responsive example page layout "collapses" the three column layout when the width of the browser window is less than a certain amount of pixels. This is done over CSS "media queries" and max-width condition which is common in modern templates, e.g. @media only screen and (max-width: 960px){...} With the new options called "heightMaxWidthRatio" and "widthMaxHeightRatio" you can take account of these changes and adjust e.g. "heightRatio" depending on max-width, e.g. heightMaxWidthRatio: ["960|0.8", "700|0.7"]. The above basically means that below 960px of window width the "heightRatio" option turns into 0.8 and below 700px "heightRatio" turns into 0.7;

The "flyout" window with bigger image is set to cover the middle column div (the text over gray background) - "zoomWidth" and "zoomHeight" options of "mouseOverZoomParam" are set to the selector '#middleSideContent' which is simply the id of the middle column. In case the browsers window is less than 960px the design of this example page changes in the way that the width of mouse over image is 100%; consequently there is no room for the flyout window, so this mousehover changes the "position" option of "mouseOverZoomParam" from 'right' to 'inside' (inner zoom).

Notes: this responsive page layout is not well elaborated and is only meant to show how the new responsiveness of AJAX-ZOOM mouseover zoom extension does work. Resize the browser window to see the effect.

JavaScript & CSS files in Head

<!-- jQuery core, needed if not already present! -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- AJAX-ZOOM core, needed! -->
<link href="../axZm/axZm.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

<!-- Include mousewheel script, optional -->
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>

<!-- Include thumbSlider JS & CSS, optional -->
<link href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>

<!-- Preloading spinner, optional -->
<script type="text/javascript" src="../axZm/plugins/spin/spin.min.js"></script>

<!-- AJAX-ZOOM mouse over zoom extension, needed! -->
<link href="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoom.4.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoom.4.js"></script>
<script type="text/javascript" src="../axZm/extensions/axZmMouseOverZoom/jquery.axZm.mouseOverZoomInit.4.js"></script>

<!--  Fancybox lightbox javascript, please note: it has been slightly modified for AJAX-ZOOM, only needed if ajaxZoomOpenMode below is set to "fancyboxFullscreen" or "fancybox", optional -->
<link href="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.js"></script>

<!--  AJAX-ZOOM extension to load AJAX-ZOOM into maximized fancybox, requires jquery.fancybox-1.3.4.css and jquery.fancybox-1.3.4.js, optional -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.openAjaxZoomInFancyBox.js"></script>

<!-- Colorbox plugin, only needed if ajaxZoomOpenMode below is set to "colorbox", optional -->
<link href="../axZm/plugins/demo/colorbox/example2/colorbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../axZm/plugins/demo/colorbox/jquery.colorbox-min.js"></script>

<!-- Please call pinit.js only once per page -->
<script data-pin-build="parsePinBtns" type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

<!-- IE < 9 @media query support -->
<script src="../axZm/plugins/css3-mediaqueries.min.js"></script>

<style type="text/css">
	/******************************
		AJAX-ZOOM mouseover block 
	******************************/

	/* wrapper for all html */
	#az_mouseOverZoomParent{
		position: relative; 
		width: 100%;
	}

	#az_mouseOverZoomContainer{
		position: relative; 
		background-color: #FFFFFF; 
		border: #AAA 1px solid;
	}

	#az_mouseOverZoomGallery{
		position: relative; 
		margin-top: 20px; 
		height: 76px; 
		width: 100%; 
		display: none;
	}
</style>
		

HTML markup

<!-- AJAX-ZOOM mouseover block  -->
<div id="az_mouseOverZoomParent">
	<!-- Container for mouse over image -->
	<div id="az_mouseOverZoomContainer">
		Mouseover Zoom loading...
	</div>
	
	<!-- gallery with thumbs (will be filled with thumbs by javascript) -->
	<div id="az_mouseOverZoomGallery">
		Gellery loading...
	</div>
 </div>
<!-- AJAX-ZOOM mouseover block END -->
		

Javascript

You do not need all the options below to be listed as many are set to their default values.

Dependencies

Several different plugins are used in this mouseover zoom tool. Depending on the configuration not all of them are needed but they all are included in the download package. The options below refer to jQuery.mouseOverZoomInit(options) which acts like a proxy to the other plugins.

• jquery.axZm.mouseOverZoom.js - main mouseover zoom extension;
• jquery.axZm.mouseOverZoomInit.js - function to build all needed html and call other plugins which simplifies integration; if you would like to change something in the source code of jquery.axZm.mouseOverZoomInit.js please copy it renamed in the same directory so your changes do not get overwritten when you or somebody else will be updating AJAX-ZOOM later.
• jquery.axZm.js - main AJAX-ZOOM javascript file which loads AJAX-ZOOM to display high resolution image when the user clicks on the lens; depending on AJAX-ZOOM configuration AJAX-ZOOM loads some other stoff dynamically, so you do not have to worry about it.

• jquery.fancybox-1.3.4.js - needed if "ajaxZoomOpenMode" option is set to 'fancyboxFullscreen' or 'fancybox';
• jquery.axZm.openAjaxZoomInFancyBox.js - needed if "ajaxZoomOpenMode" option is set to 'fancyboxFullscreen';
• jquery.colorbox.js - needed if "ajaxZoomOpenMode" option is set to 'colorbox'; please note that colorbox has at least five skins which are changed over the included css file: /axZm/plugins/demo/colorbox/example2/colorbox.css

• jquery.axZm.thumbSlider.js - needed if "galleryAxZmThumbSlider" option is set to true; this is the replacement for previously used jcarousel (jQuery plugin for sliding thumbs which has got too old);
• spin.js - needed if "spinner" option is set to true;
• jquery.mousewheel.js - needed if in "galleryAxZmThumbSlider" option is set to true and in "galleryAxZmThumbSliderParam" the suboption "mouseWheelScrollBy" is used;

Documentation

		images: {
			1: {
				img: "/pic/fashion_001.jpg", 
				title: "Test Title 1"
			},
			2: {
				img: "/pic/fashion_002.jpg", 
				title: "Test Title 2"
			},
			3: {
				img: "/pic/fashion_003.jpg", 
				title: "Test Title 3"
			}
		}
		

		images: {
			1: {
				zoom: "/cache/fashion_001_1200x1200.jpg",
				preview: "/cache/fashion_001_350x400.jpg",
				thumb: "/cache/fashion_001_80x100.jpg"
				img: "/pic/fashion_001.jpg", 
				title: "Test Title 1"
			},
			2: {
				zoom: "/cache/fashion_002_1200x1200.jpg",
				preview: "/cache/fashion_002_350x400.jpg",
				thumb: "/cache/fashion_002_80x100.jpg",
				img: "/pic/fashion_002.jpg", 
				title: "Test Title 2"
			},
			3: {
				zoom: "/cache/fashion_003_1200x1200.jpg",
				preview: "/cache/fashion_003_350x400.jpg",
				thumb: "/cache/fashion_003_80x100.jpg",
				img: "/pic/fashion_003.jpg", 
				title: "Test Title 3"
			}
		}
		

			images: [
				{	img: "/pic/fashion_001.jpg", 
					title: "Test Title 1"
				},
				{	img: "/pic/fashion_002.jpg", 
					title: "Test Title 2"
				},
				{	img: "/pic/fashion_003.jpg", 
					title: "Test Title 3"
				}
			]
		

		images360: {
			1: {
				path: "/pic/zoom3d/Uvex_Occhiali", 
				position: "first"
			}
		}
		

 		{
			boxMargin: 0,
			boxPadding: 10,
			boxCenterOnScroll: true,
			boxOverlayShow: true,
			boxOverlayOpacity: 0.75,
			boxOverlayColor: "#777",
			boxTransitionIn: "fade", // 'elastic', 'fade' or 'none'
			boxTransitionOut: "fade", // 'elastic', 'fade' or 'none'
			boxSpeedIn: 300,
			boxSpeedOut: 300,
			boxEasingIn: "swing",
			boxEasingOut: "swing",
			boxShowCloseButton: true, 
			boxEnableEscapeButton: true,
			boxOnComplete: function(){},
			boxTitleShow: false,
			boxTitlePosition: "float", // 'float', 'outside', 'inside' or 'over'
			boxTitleFormat: null
		}
 		

			transition: "elastic",
			speed: 300,
			scrolling: true,
			title: true,
			opacity: 0.9,
			className: false,
			current: "image {current} of {total}",
			previous: "previous",
			next: "next",
			close: "close",
			onOpen: false,
			onLoad: false,
			onComplete: false,
			onClosed: false,
			overlayClose: true,
			escKey: true
		

					<script data-pin-build="parsePinBtns" type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
				

				spinnerParam: { 
					lines: 11, // The number of lines to draw
					length: 3, // The length of each line
					width: 3, // The line thickness
					radius: 4, // The radius of the inner circle
					corners: 1, // Corner roundness (0..1)
					rotate: 0, // The rotation offset
					color: "#FFFFFF", // #rgb or #rrggbb
					speed: 1, // Rounds per second
					trail: 90, // Afterglow percentage
					shadow: false, // Whether to render a shadow
					hwaccel: false, // Whether to use hardware acceleration
					className: "spinner", // The CSS class to assign to the spinner
					zIndex: 2e9, // The z-index (defaults to 2000000000)
					top: 0, // Top position relative to parent in px
					left: 1 // Left position relative to parent in px
				}