example31_responsive.phpHOMEExamples overviewDownloadAsk a question
example32_clean.php

Responsive jQuery Mouseover Zoom (jQuery.axZmMouseOverZoom) together with AJAX-ZOOM fullscreen or lightbox on click & optional 360°/3D object spins with zoom!

Mouseover Zoom loading...
This mouseover extension (version: 3.x) is depreciated and will be completely removed / replaced in the next release. Please use new version > 4.1 "fully responsive". It has at least the same features and is updated periodically. The basic difference for implementation is that you need to include other JS and CSS files... For more details please see here

About this mouseover zoom

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:

Alternative AJAX-ZOOM opening methods

This will change "ajaxZoomOpenMode" option
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
360°/3D "preview" mode:
- enable - disable
Disable scroll animation:
- enable - disable
Some basic mouseover zoom (flyout window) options
Position:
- right - left - inner zoom
Auto width:
- enable - disable
Auto height:
- enable - disable
Flyout animation:
- enable - disable
Smooth move level:
Show title:
- enable - disable
Tint:
- enable - disable

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

New: fully responsive mouseover zoom Ver. 4.0

Prior to Ver. 4.0 (beta) of this AJAX-ZOOM mousehover zoom extension it was optionally responsive for the flyout window. The actual "preview image" was not really responsive. In this new mousehover zoom extension Ver. 4.0 (beta) everything is absolutly responsive now. A positive side effect caused by the added responsiveness is that a single image can be used as "preview image" - the image which is hovered and the big "flyout image". Many new options like "pinterest" integration and also new API for easy replacing the images have been added too.

E-Commerce modules

Gallery / Slider

The sliding thumbnail gallery below the mousehover image is optional. It can be replaced or disabled so you have only thumbs floating below or somewhere else, see it in this example.

On default we use $.axZmThumbSlider which is one of AJAX-ZOOM extensions. $.axZmThumbSlider is highly configurable, skinable, responsive and touch friendly. You can also configure it to be displayed vertically and place to the side of mouseover zoom container. The previously used "jCarousel" has been completly removed from this example.

About 360°/3D rotate

The integrated 360°/3D object spin support is optional! You do not need to have a 360° for every product. However you can put more than one 360° into the gallery and configure it to either open above the mousehover zoom or open at various modes directly. You can try it by changing 360°/3D "preview" mode above.

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 replaces 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 our special batch tool...

Clean examples

Open example32_clean.php to see the html without too much irrelevant content around
Open example32_clean_vertical.php to see this mouseover with vertical gallery
Open example32_no_slider.php to see this mouseover without $.axZmThumbSlider

JavaScript & CSS files in Head

Please note that depending on configuration not all of these js and css files are needed! See "Dependencies" below;

<!-- 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/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 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>
			

HTML markup


<!-- 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="az_mouseOverZoomContainer" style="position: absolute; width: 250px; height: 375px; background-color: #FFFFFF; border: #AAA 1px solid">
		Mouseover Zoom loading...
	</div>
	
	<!-- gallery with thumbs (will be filled with thumbs by javascript) -->
	<!-- gallery with thumbs (will be filled with thumbs by javascript) -->
	<div id="az_mouseOverZoomGallery" style="position: absolute; width: 252px; bottom: 0px; display: none;">
		Gellery loading...
	</div> 
	
</div>
			

Javascript (minimal configuration)


jQuery.fn.mouseOverZoomInit({
	axZmPath: "/axZm/", // Path to AJAX-ZOOM, e.g. /zoomTest/axZm/
	divID: "az_mouseOverZoomContainer", // DIV for mouseover zoom
	galleryDivID: "az_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"}
	}
	
	// Optionally include AJAX-ZOOM 360/3D into the same layout
	images360: {
		1: {path: "/pic/zoom3d/Uvex_Occhiali", position: "first"}
	},
	
	// If you want to show 360 first set images360firstToLoad to true
	images360firstToLoad: true
});
			

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

Needed plugins: Optional plugins to open AJAX-ZOOM: Optional plugins:

$.mouseOverZoomInit(options) documentation

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
hideGalleryOneImagetrueVer. 4.2.1+ Instantly hide gallery if there is only one image or one 360/3D
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
thumbRetinatrueVer. 4.2.1+ double resolution of the thumb image
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


So the images object would look like this:
		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.

Ver. 4.2.1 + images can be an array, e.g.
			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"
				}
			]
		
firstImageToLoad1Image from "images" option which should be loaded at first; see also "images360firstToLoad" option below
images360{} Ver. 4.2.1+ object or an array with paths to the folders which contain 360 degree images; mostly you would want to add only one 360 spin but the "images360" object can contain as many as you like;
		images360: {
			1: {
				path: "/pic/zoom3d/Uvex_Occhiali", 
				position: "first"
			}
		}
		
Other possible keys are:

  • "thumb" - direct link to thumb image displayed in the gallery. In case "thumb" is not present AJAX-ZOOM will internally request first image of your 360 and generate the thumb. You can disable this by setting "images360Thumb" option below to false so you will only get a 360 degree icon which is ok too.
  • "thumbImg" - instead of "thumb" you can also directly link to an image under "path" out of which AJAX-ZOOM will generate the gallery thumb
  • "title" - optional title
  • "hotspotFilePath" - optional path to the file which contains data for hotspots. For more information see example33.php
  • "spinReverse" - reverse the direction of the spin
  • "spinDemoTime" - time in ms during which AJAX-ZOOM will make one turn
  • "anyThingElse..." - any other key see "images360Opt" below
images360firstToLoadfalseVer. 4.2.1+ in case present load 360 from "images360" first and not an image from "images"
images360Opt[]Ver. 4.2.1+ Some (not all) options from '/axZm/zoomConfig.inc.php' and '/axZm/zoomConfigCustom.inc.php' can be set during runtime or in 'onBeforeStart' AJAX-ZOOM callback. "images360Opt" is a list of what possibly could be set in "images360" objects, e.g. ['spinReverseZ', 'spinWhilePreload'] and so on. Default is: ['spinReverse', 'spinReverseZ', 'spinBounce', 'spinDemoRounds', 'spinDemoTime', 'spinWhilePreload']
images360ThumbfalseVer. 4.2.1+ Show first image of the spin as thumb
images360PreviewtrueVer. 4.2.1+ Normally plain images are opened in some kind of lightbox or fullscreen; By setting this option to true the 360's will load into "divID" at first and can be expanded to fullscreen.
images360PreviewResponsivetrueVer. 4.2.1+ this option is set to true for convinience reasons; In case your "divID" has fixed width and height, set $zoom['config']['picDim'] option in '/axZm/zoomConfigCustom.inc.php' after elseif ($_GET['example'] == 'mouseOverExtension360'){
images360examplePreview'mouseOverExtension360'Ver. 4.2.1+ In case "images360Preview" is set to true, the value of this parameter will be sent to AJAX-ZOOM as "options set" (example=mouseOverExtension360)
preloadMouseOverImagesfalsePreload all preview and mouseover images, possible values: false, true, 'oneByOne'
noImageAvailableClass'axZm_mouseOverNoImage' Ver. 4.2.1+ In case there are no images in "images", nor there are any in "images360", a div with some image as background can be appended to the container and receive this options value as css class
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'
disableScrollAnmtrueVer. 4.2.1+ disable animation while zooming with AJAX-ZOOM
fullScreenApifalseTry to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except IE < 10 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)
zoomHintEnabletrue Ver. 4.2.1+ Enable zoom icon which disappears on mouse hover; css class .axZm_mouseOverZoomHint; If you want to change the position or the icon simply change the css class;
zoomHintText'Zoom'Ver. 4.2.1+ Text which will be appended next to the icon enabled by "zoomHintEnable"

Comments (3)

Vadim Jacobi
2015-09-30 15:38:26
Vadim Jacobi
Carl: all licensing information can be found at
http://www.ajax-zoom.com/index.php?cid=download
Carl Tierney
2015-09-30 03:52:04
Carl Tierney
Hello
This script is amazing, would like to use it, can you give me licensing information, please.
arpan
2013-10-23 10:55:48
arpan
hello there..
i want to use this script. can you please give me license information.


also i want to the inner zoom function not that the zoomed image should appear in a separate box.
thank you in advance

Leave a Comment

Name (required):
Email (required):
Website:
Your comment (no html):
Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, Your personal image will be attached every time you comment.