previous exampleHome
next example

Advanced jQuery Mouseover Zoom (jQuery.axZmMouseOverZoom) together with AJAX-ZOOM fullscreen on click (last updated 2014-04-06)

Mouseover Zoom loading...

Despite looking similar to other mouseover zoom scripts this AJAX-ZOOM mousehover extension offers more than it lookes like at first. When the user clicks on the lens AJAX-ZOOM with real high resolution tiled view opens at several modes, try it:

Open AJAX-ZOOM at fullscreen mode
Open AJAX-ZOOM in responsive "Fancybox"
Open AJAX-ZOOM in regular "Fancybox"
Open AJAX-ZOOM in "Colorbox"
Enable monitor size fullscreen: - enable - disable

In addition the size of the flyout window for simple mousehover effect can instantly fit to browsers window size or some other element (e.g. text to the right) so beeing responsive. And it works on touch devices like iOS and Android.

The sliding thumbnail gallery below the mousehover image is optional. It can be replaced or disabled. The one you see here is one of AJAX-ZOOM extensions too. It is highly configurable, skinable, responsive and touch friendly - see more examples here. The previously used "jCarousel" has been completly removed from this example.

On default only the high resolution "master images" (source images) need to be defined. All thumbnails and flyout view images are instantly generated by AJAX-ZOOM "image 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 these are around 5-7% of the actual resolution and size. By clicking on the lens the user can explore the entire image with AJAX-ZOOM, which utilizes image tiles technology, so the entire master image never loads into browsers cache and can be even protected from direct access over http e.g. with htaccess. 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.

Open example32_clean.php to see the html without anything else around...

The code

		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/">
		<head>
		<title>AJAX-ZOOM mouseover zoom click fullscreen zoom</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="imagetoolbar" content="no">

		<!-- jQuery core, needed! -->
		<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 rel="stylesheet" type="text/css" href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.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/jquery.axZm.mouseOverZoom.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../axZm/extensions/jquery.axZm.mouseOverZoom.js"></script>
		<script type="text/javascript" src="../axZm/extensions/jquery.axZm.mouseOverZoomInit.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 rel="stylesheet" href="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.css" media="screen" 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 rel="stylesheet" href="../axZm/plugins/demo/colorbox/example1/colorbox.css" media="screen" type="text/css">
		<script type="text/javascript" src="../axZm/plugins/demo/colorbox/jquery.colorbox.js"></script>
		
		</head>
		<body>
		
		<!-- Wrapper for media, this HTML is all you need -->
		<div style="float: left; width: 252px; position: relative; height: 480px; margin: 0px 20px 20px 0px">
			
			<!-- Container for mouse over image -->
			<div id="mouseOverZoomContainer" style="position: absolute; width: 250px; height: 375px; background-color: #FFFFFF; border: #888 1px solid">
				Mouseover Zoom loading...
			</div>
			
			<!-- gallery with thumbs (will be filled with thumbs by javascript) -->
			<div id="mouseOverZoomGallery" style="position: absolute; width: 252px; bottom: 0px; display: none;">
				Gellery loading...
			</div> 
			
		</div>
		
		<script type="text/javascript">
		jQuery.fn.mouseOverZoomInit({
			axZmPath: "auto", // Path to AJAX-ZOOM, e.g. /zoomTest/axZm/
			divID: "mouseOverZoomContainer", // DIV for mouseover zoom
			galleryDivID: "mouseOverZoomGallery", // DIV id of the gallery
			
			// Objecct containing absolte paths to the master images, optional with titles. Start with 1, not 0
			// Your master image can be as big as you want, it never loads into cache
			// You can also protect the directory with .htaccess or other http access restrictions.
			// Alternatively you can link to your static images with these keys: 
			// "zoom" - big mouseover image, "preview" - preview image and "thumb" - image for the gallery. 
			// "img" - your master image is needed anyway to open AJAX-ZOOM on click
			images: {
				1: {img: "/pic/zoom/fashion/fashion_004.jpg", title: "Test Title 1"},
				2: {img: "/pic/zoom/fashion/fashion_003.jpg", title: "Test Title 2"},
				3: {img: "/pic/zoom/fashion/fashion_001.jpg", title: "Test Title 3"},
				4: {img: "/pic/zoom/fashion/fashion_002.jpg", title: "Test Title 4"},
				5: {img: "/pic/zoom/fashion/fashion_008.jpg", title: "Test Title 5"},
				6: {img: "/pic/zoom/fashion/fashion_010.jpg", title: "Test Title 6"}
			}
		});
		</script>
		</body>
		</html>
		

Documentation

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 $.mouseOverZoomInit(options) which acts like a proxy to the other plugins.

Needed plugins: Optional plugins to open AJAX-ZOOM: Optional plugins:
ValueDefaultDescription
axZmPath'auto' Path to AJAX-ZOOM, e.g. '/zoomTest/axZm/'; 'auto' might not always work so if you experience any difficulties please set the path manually as first.
divID''DIV (container) ID for mouseover zoom
galleryDivID''DIV (container) id of the gallery, set to false to disable gallery
galleryAxZmThumbSlidertrueUse $.axZmThumbSlider on gallery thumbnails or not
galleryAxZmThumbSliderParam{}$.axZmThumbSlider parametrs if "galleryAxZmThumbSlider" is enabled; for full list of options see under: /axZm/extensions/axZmThumbSlider/ or http://www.ajax-zoom.com/axZm/extensions/axZmThumbSlider/
thumbW50Gallery thumb width
thumbH80Gallery thumb height
images{} Object containing absolte paths to the master images, optional with titles. Start with 1, not 0. Your master image "img" can be as big as you want, it never loads into cache You can also protect the directory with .htaccess or other http access restrictions.
			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"
				}
			}
			
Alternatively you can link to your static images with these keys:

"zoom" - big mouseover image
"preview" - preview image
"thumb" - image for the gallery.
"img" - your master image is needed anyway to open AJAX-ZOOM on click; this image can be in a directory with restricted access over http;
"title" - optional title

			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"
				}
			}
			
In case "zoom", "preview" and "thumb" are not defined, AJAX-ZOOM will generate these images out of "img" instantly on-the-fly
preloadMouseOverImagesfalsePreload all preview and mouseover images, possible values: false, true, 'oneByOne'
width'auto'Width of the preview image or 'auto' (depending on parent container size - "divID", see above); this is also the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly.
height'auto'Height of the preview image or 'auto' (depending on parent container size - "divID", see above); this is also the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly.
mouseOverZoomWidth1200 Max width of the image that will be shown in the zoom window; this is the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly. To set the width of the fly out window see "zoomWidth" under "mouseOverZoomParam".
mouseOverZoomHeight1200 Max height of the image that will be shown in the zoom window; this is the value which will be passed to your AJAX-ZOOM imaging server to generate this image on-the-fly. To set the height of the fly out window see "zoomHeight" under "mouseOverZoomParam".
ajaxZoomOpenMode'fancyboxFullscreen'Ver. 4.1.5+ Determines how AJAX-ZOOM is opened when the user clicks on preview images / lens, possible values: 'fullscreen' (see also "fullScreenApi" option below), 'fancyboxFullscreen', 'fancybox', 'colorbox'; By editing $.mouseOverZoomInit you can extend the plugin to be used with different types of modal boxes to load AJAX-ZOOM into.
fancyBoxParam{}If fancybox is used in "ajaxZoomOpenMode" option, Fancybox options
colorBoxParam{}If colorbox is used in "ajaxZoomOpenMode" option, Colorbox options
example'mouseOverExtension'Ver. 4.1.5+ configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fullscreen'
exampleFancyboxFullscreen'mouseOverExtension'Ver. 4.1.5+ configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fancyboxFullscreen'
exampleFancybox'modal'Ver. 4.1.5+ configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'fancybox'
exampleColorbox'modal'Ver. 4.1.5+ configuration set which is passed to ajax-zoom when ajaxZoomOpenMode is 'colorbox'
fullScreenApifalsetry to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except IE and mobile
axZmCallBacks{}AJAX-ZOOM has several callbacks, http://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart
quality90Jpeg quality of the preview image and
qualityZoom80Jpeg quality of the zoom image shown in the flyout window
onLoadnullCallback function
onImageChangenullCallback function
onMouseOvernullCallback function
onMouseOutnullCallback function
   
spinnertrueUse ajax loading spinner without gif files etc
spinnerParam{}Spinner options, for more info see: http://fgnass.github.com/spin.js/
   
mouseOverZoomParam{}JS object containing specific options to this mouseover zoom, see below:
ValueDefaultDescription
position'right'Position of the flyout zoom window, possible values: 'inside', 'top', 'right', 'bottom', 'left'
posAutoInside150applies when width (left, right) or height (top, bottom) of zoom window are less than this px value (zoomWidth || zoomHeight are set to auto); if zoomWidth || zoomHeight are fixed, applies when zoom window is out of page border
autoFlip120Flip right to left and bottom to top if less than int px value or false to disable
biggestSpacefalseOverrides position option and instantly chooses the direction, disables autoFlip; playes nicely when zoomWidth and zoomHeight are set to 'auto'
zoomFullSpacefalseUses full screen height (does not align to the map / disables adjustY) if position is right or left || uses full screen width (does not align to the map / disables adjustX) if position is top or bottom
zoomWidth'auto'Width of the zoom window e.g. 540 or 'auto' or Ver. 4.1.5+ jQuery selector|correction value, e.g. '#refWidthTest|+20'; so if you want to have a width of the zoom window same as for example a responsive container to the right (so it is fully covered) and max possible height, then define the id of this container to the right, e.g. 'myArticleData', set "zoomWidth" to '#myArticleData|+10' and "zoomHeight" to 'auto'.
zoomHeight'auto'Height of the zoom window e.g. 375, or 'auto' or or Ver. 4.1.5+ jQuery selector|correction value, e.g. '#refWidthTest|+20'
autoMargin15If zoomWidth or zoomHeight are set to 'auto', the margin to the edge of the screen
adjustX15Horizontal margin of the zoom window
adjustY-1Vertical margin of the zoom window
lensOpacity0.30Opacity of the selector lens
zoomAreaBorderWidth1Border thickness of the zoom window
galleryFade300Speed of inner fade or false
shutterSpeed150Speed of shutter fadein or false; applies only if image proportions are different from container
showFade300Speed of fade in for mouse over
hideFade300Speed of fade out for mouse over
flyOutSpeedfalseVer. 4.0.10+ speed for flyout or false to disable
flyOutTransition'linear'Ver. 4.0.10+ transition of the flyout
flyOutOpacity0.6Ver. 4.0.10+ initial opacity for flyout
flyBackSpeedfalseVer. 4.0.10+ speed for fly back or false to disable
flyBackTransition'linear'Ver. 4.0.10+ transition of the fly back
flyBackOpacity'0.2'Ver. 4.0.10+ final opacity of fly back
smoothMove2Integer bigger than 1 indicates smoother movements; set 0 to disable
tintfalseColor value around the lens or false
tintOpacity0.5Opacity of the area around the lens when tint is not false
showTitletrueEnable / disable title on zoom window
titleOpacity0.5Opacity of the title container
titlePosition'top'Position of the title, top or bottom
cursorPositionX0.5Cursor over lens horizontal offset, 0.5 is middle
cursorPositionY0.55Cursor over lens vertical offset, 0.5 is middle
touchClickAbort500Ver. 4.1.5+ time in ms after which click is aborted without touch movement and mousehover is initialized
loadingtrueDisplay loading information, CSS .mouseOverLoading
loadingMessage'Loading...'Loading message, not needed, can be just the spinner - see below
loadingWidth90Width of loading container
loadingHeight20Height of loading container
loadingOpacity1.0Opacity of the loading container (the transparent background is set via png image on default, see css class)
MORE EXAMPLES
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom