example19.phpOverview (index.php)Buy / DownloadAsk a question
example20_clean.php

AJAX-ZOOM - "image map" outside. Mouseover initialization - hover over the image zoom (flyout zoom / hover zoom)

use mousewheel to zoom in and out, click to enlarge
Gellery loading...

2015.09.23 - new: now fully responsive / adaptive!

This mouseover zoom extension has been updated to be responsive / adaptive now. Resize the window / reload to see how it behaves.

About this mouseover zoom

In this example we simulate the zoom effect used in many web shops these days. The main advantage of using AJAX-ZOOM is that it does not require the client to load the entire high resolution image. Only some image tiles for a particular zoom level and viewpoint are loaded at first. More tiles are by loaded when the user pans around or zooms in and out (similar to Google maps). This way the source image can be of any size and quality.

#alternatives {example32: yes !important;}

If you are looking for a "normal" mouseover zoom without tiled view in the flyout window but would like to apply tiled view when the user clicks to see bigger image, then
is the right plugin for you! Anyway it is worth taking a look at because example32 mouseover zoom looks very similar but it is conceptually different.

New version uses $.mouseOverZoomTiles(options) to trigger

With the AJAX-ZOOM Ver. 4.2.1 this example has been completely overhauled! We now have $.mouseOverZoomTiles extension which is used as regular plugin and controlled over several options listed below. So it is much easier to implement. Also the flyout window can be configured to be responsive e.g. suit the size of a container to the right or just fill in the available space to the right entirely.

Zoom in / out, expand to fullscreen

Users with the mouse can change the zoom level using mousewheel. Clicking on the mouse over image will result in opening AJAX-ZOOM at fullscreen (browser window size or fullscreen depending on browsers support and option settings - "fullScreenApi"). Note that after opened at fullscreen the point where user clicks at is also magnified at fullscreen! You can change that icon or reposition it with css.

At top right of the mouse over image area there is an optional magnifier icon. Clicking on it triggers the initialization of fullscreen without image being already magnified. Alternatively you can trigger the same by clicking on any other icon using AJAX-ZOOM API method $.fn.axZm.initFullScreen().

Gallery / Slider

For the thumbnails below we do not use jCarousel plugin any more. Instead we use our own $.axZmThumbSlider plugin which is also packaged with AJAX-ZOOM. This plugin is responsive, can be vertical or horizontal and it also plays well with touch devices of any kind. The predefined options settings of $.axZmThumbSlider can be simply overridden by "galleryAxZmThumbSliderParam" option passed over $.mouseOverZoomTiles;

Unless not specified in "images" option the thumbnails are generated instantly by AJAX-ZOOM dynamic image creator. $.axZmThumbSlider does not necessarily need to be enabled. It can be disabled with "galleryAxZmThumbSlider" option. In general thumbnails can be put anywhere, e.g. left to the mouseover area and displayed vertically under each other, also with $.axZmThumbSlider;

"Clean" example

In example20_clean.php you will find the same without too much text around.

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

	<!-- Include mouseOverZoomTiles JS & CSS, needed! -->
	<link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.mouseOverZoomTiles.css" />
	<script type="text/javascript" src="../axZm/extensions/jquery.axZm.mouseOverZoomTiles.js"></script>

HTML markup in body

<!-- Wrapper for media data, position relative or absolute! -->
<div class="mouseOverTilesWrapper">
	
	<!-- Container for preview image (AJAX-ZOOM "image map") -->
	<div id="mouseOverTilesMapContainer" style="height: 300px;">
		<!-- Optional enlarge icon -->
		<div class="mouseOverTilesEnlarge"></div>
		
		<!-- Optional message -->
		<div class="mouseOverTilesMsg">use mousewheel to zoom in and out, click to enlarge</div>
	</div>

	<!-- Gallery with thumbs (will be filled with JS instantly as UL, LI) -->
	<div id="mouseOverTilesGallery" class="horizontal">
		Gellery loading...
	</div> 
	
</div>

JavaScript

Initialization with some essential options, please find the full list below. jquery.axZm.mouseOverZoomTiles.js can be customized if needed. 

jQuery(document).ready(function(){
	jQuery.mouseOverZoomTiles({
		axZmPath: "../axZm/", // path to /axZm directory, e.g. /test/axZm/ or "auto" (auto might not always work)
		mapDivID: "mouseOverTilesMapContainer", // ID of the container for mouseover element
		galleryDivID: "mouseOverTilesGallery", // ID of the container where thumbnails will be inserted into
		images: {
			1: {img: "/pic/zoom/fashion/fashion_001.jpg", title: "fashion_001.jpg"},
			2: {img: "/pic/zoom/fashion/fashion_002.jpg", title: "fashion_002.jpg"},
			3: {img: "/pic/zoom/fashion/fashion_003.jpg", title: "fashion_003.jpg"},
			4: {img: "/pic/zoom/fashion/fashion_004.jpg", title: "fashion_004.jpg"},
			5: {img: "/pic/zoom/portrait/portrait_001.jpg", title: "portrait_001.jpg"},
			6: {img: "/pic/zoom/portrait/portrait_002.jpg", title: "portrait_002.jpg"},
			7: {img: "/pic/zoom/portrait/portrait_003.jpg", title: "portrait_003.jpg"},
			8: {img: "/pic/zoom/world/world_001.jpg", title: "world_001.jpg"},
			9: {img: "/pic/zoom/world/world_002.jpg", title: "world_002.jpg"},
			10: {img: "/pic/zoom/world/world_003.jpg", title: "world_003.jpg"}
		},
		firstImageToLoad: 1,
		mediaQueryFullWidth: 900,
		thumbWidth: 86, // width of the thumbnail image
		thumbHeight: 86, // height of the thumbnail image
		galleryAxZmThumbSlider: true, // use $.axZmThumbSlider for the gallery. If false a different Ul->LI structure will be applied without scrolling capeability
		heightRatio: "1.0|+140", // Instantly adjust the height of the parent contaoner for mouseover image (defined as "mapDivID" option) depending on it's width which can be responsive
		disableTouchMouseover: true, // Disable mouseover for touch devices.
		zoomWidth: ".rightLayer", // max width of the image that will be shown in the zoom window
		zoomHeight: "#mouseOverTilesMapContainer|+105", // max height of the image that will be shown in the zoom window
		adjustX: 20, // space between mouse over zoom ("mapDivID") and flyout window to the right
		adjustY: 0, // vertical shift of the flyout window
		mapSelSmoothDrag: false, // activate smooth drag
		mapSelSmoothDragSpeed: 500, // speed of the dragging
		scrollZoom: 16, // prc zoom on mouse scroll
		fullScreenApi: false, // try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers 
		axZmCallBacks: {}  // callbacks which can be passed to AJAX-ZOOM
	});
});

$.axZm.mouseOverZoomTiles Options

OptionDefaultDescription
axZmPath 'auto' Path to /axZm directory, e.g. /test/axZm/ or 'auto' (auto might not always work)
divID 'mouseOverTilesZoom' ID of the flyout zoom, will be created instantly; no need to specify
mapDivID'mouseOverTilesMapContainer'ID of the container for mouseover element
galleryDivID'mouseOverTilesGallery'ID of the container where thumbnails will be inserted into
example'mouseOverTiles'configuration set which is passed to ajax-zoom (see /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 'mouseOverTiles')
images {} Object containing absolute 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. title is optional. 

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 for the gallery are generated instantly. If you want to link to a static image for the gallery, then you can add "thumb" key and value like this: 

images: {
	1: {
		img: "/pic/fashion_001.jpg", 
		thumb: "/some/dir/thumb_fashion_small_res.jpg",
		title: "Test Title 1"
	}
}
Every image must have an unique filename!!!
firstImageToLoad 1 if "images" option contains more than one image, this option defines which image should be loaded fist. Index (starts with 1) or image file name
showGallery true enable / disable gallery
galleryAxZmThumbSlider true use $.axZmThumbSlider for the gallery. If false a different Ul->LI structure will be applied without scrolling capability
thumbWidth 86 Width of the thumbnail image
thumbHeight 86 Height of the thumbnail image
thumbRetina true true will double the resolution of the thumbnails images but keep "thumbWidth" and "thumbHeight" on screen
thumbsCache true Cache thumbnails
thumbQual 90 jpg quality of the thumbnail image
thumbMode false possible values: "contain", "cover" or false
thumbBackColor '#FFFFFF' Background color of the thumb if "thumbMode" is set to "contain"
thumbPadding null Quickly overwrite the css padding of the thumbs
thumbMarginRight null Quickly override the css margin to the right of the thumbs
thumbMarginBottom null Quickly override the css margin to the bottom of the thumbs
thumbCss {} Quickly override any other CSS
thumbPreloadingImg 'ajax-loader-map-white.gif' Image located in /axZm/icons directory which will appear before the thumbs are loaded
galleryAxZmThumbSliderParam {} $.axZmThumbSlider options if used - "galleryAxZmThumbSlider" option set to true
fadeOutTimeout 400 time after which flyout disappears if mouse leaves mouseover zoom
fadeOutSpeed 300 speed of fade out for mouse over
zoomLevel "map" show zoom level value, possible option values: map, zoom
heightRatio '1.0|+140' Instantly adjust the height of the parent contaoner for mouseover image (defined as "mapDivID" option) depending on it's width which can be responsive.
disableTouchMouseover true Disable mouseover for touch devices.
zoomWidth 500 width of the fly out window; possible values integer - fixed width, 'auto' - available space to the right minus "autoMargin", selector - e.g. #descrDiv which could be the id of the element to the right of mouseover zoom. The selector can be corrected by some fixed pixel value like this: #descrDiv|-20 which would be the width of the element with id "descrDiv" minus 20px
zoomHeight 500 height if the fly out, same as zoomWidth except that when set to some selector, the height can default to "auto" which just makes sense.
autoMargin 10 if zoomWidth or zoomHeight are set to "auto", the margin to the edge of the screen
adjustX 20 space between mouse over zoom ("mapDivID") and flyout window to the right
adjustY -1 vertical shift of the flyout window
fullScreenApi true try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers
mapSelSmoothDrag false activate smooth drag
mapSelSmoothDragSpeed 500 speed of the dragging if "mapSelSmoothDrag" is set to true
scrollZoom 11 prc zoom on mouse scroll
mapMouseWheel true enable disable scroll with the mousewheel
axZmCallBacks {} callbacks which can be passed to AJAX-ZOOM
$.mouseOverZoomTiles documentation last updated: 2015-09-23