example32.php HOME Examples overview Download Ask a question
example32_v4.php

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 zoom version 3 (previously example32.php) is depreciated. For new projects you should use our latest mouseover zoom version. Most options which make sense in responsive webdesign are transmitted to latest version but might be not activated / set on default, so please check!

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

JavaScript & CSS files in Head

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

Show / hide - JavaScript & CSS files in Head

<!-- jQuery core, needed if not already present! -->
<script type="text/javascript" src="//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

Show / hide - 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)

Show / hide - Javascript

jQuery.fn.mouseOverZoomInit({
	axZmPath: "auto", // 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

Show / hide - 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"