example19.php HOME Examples overview Download Ask a question / privacy policy / imprint
example21.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...

This is a rather very specific and rare mouseover zoom (flyout zoom window) script. It uses multi-resolution image tiles technology within the flyout window.

On default, the flyout window is not appearing on touch devices and small screens. Instead, it just shows a swipe slider with zoom functionality. However, you can enable it also for touch devices by changing one option of the plugin.

#alternatives {example32: yes !important;}

If you are looking for a "normal" hover zoom without a tiled view in the flyout window but would like to apply tiled view when the user clicks to see the 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!

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 viewport load at first. More tiles are loading 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.

Fully responsive / adaptive!

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

New version uses the $.mouseOverZoomTiles(options) extension to trigger

Before, this example required a lot of inline JavaScript. Now it is completely overhauled. There is a new $.mouseOverZoomTiles AJAX-ZOOM extension which you can use as a regular plugin and set up using several options listed below on this page. Thus, it is now much easier to implement. Also now, you can configure the flyout window to be responsive, e.g., adapt to the size of a container or fit into the available space to the right.

Zoom in / out, expand to fullscreen

Users with the mouse can change the zoom level by using the mouse wheel. At a click, the AJAX-ZOOM viewer opens at fullscreen or full browser window. That depends on if the browser supports the fullscreen API and the fullScreenApi option setting of the extension is enabled.

AJAX-ZOOM can preserve the zoom level from the flyout window when it opens at fullscreen by clicking on the mouseover image. However, at that expanded view, users can furthermore magnify by using the mouse wheel or clicking on the viewer with the left mouse button for zooming in and with the right mouse button for zooming out.

At top-right of the mouseover image area there is an optional magnifier icon. Clicking on it triggers the fullscreen view without preserving the viewport in the flyout window. Alternatively, you can trigger fullscreen by using the AJAX-ZOOM $.fn.axZm.initFullScreen() API method.

Gallery / thumbnails slider

For the image thumbnails below the viewer, we formerly used the jCarousel plugin. Now, the AJAX-ZOOM $.axZmThumbSlider plugin replaces it. The plugin is part of the AJAX-ZOOM package. Several other examples and AJAX-ZOOM extensions including AJAX-ZOOM viewer itself use the plugin to display image thumbnails in several situations. This plugin is responsive, it can display vertically or horizontally, and it works well on touch devices of any kind including iOS, Android and Windows. Within this hover zoom extension, you can override the default options of that thumbnails slider plugin by setting the galleryAxZmThumbSliderParam option of the $.mouseOverZoomTiles extension.

Unless not otherwise specified in the images option of the $.mouseOverZoomTiles extension, AJAX-ZOOM generates the thumbnails by the AJAX-ZOOM dynamic images script automatically. However, you do not necessarily need to use the $.axZmThumbSlider plugin. You can disable it by the galleryAxZmThumbSlider option. Generally, you have the freedom to put the thumbnails with or without the thumbnails slider anywhere in your layout.

JavaScript & CSS files in Head


<!-- jQuery core, needed if not already present! -->
<script type="text/javascript" src="https://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/test_fashion1.png", title: "test_fashion1.png"},
			2: {img: "/pic/zoom/fashion/test_fashion2.png", title: "test_fashion2.png"},
			3: {img: "/pic/zoom/fashion/test_fashion3.png", title: "test_fashion3.png"},
			4: {img: "/pic/zoom/fashion/test_fashion4.png", title: "test_fashion4.png"},
			5: {img: "/pic/zoom/portrait/test_portrait1.png", title: "test_portrait1.png"},
			6: {img: "/pic/zoom/portrait/test_portrait2.png", title: "test_portrait2.png"},
			7: {img: "/pic/zoom/portrait/test_portrait3.png", title: "test_portrait3.png"},
			8: {img: "/pic/zoom/world/test_world1.png", title: "test_world1.png"},
			9: {img: "/pic/zoom/world/test_world2.png", title: "test_world2.png"},
			10: {img: "/pic/zoom/world/test_world3.png", title: "test_world3.png"}
		},
		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 its 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 extension 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

Comments (8)

Tabarak Hussain 2015-08-17 11:44:18
Tabarak Hussain Well done very helpful............
Prasunjeet Soni 2014-09-21 09:05:30
Prasunjeet Soni Thanks for this ... it works well ...
Zain-ul-Abidin 2014-09-14 21:30:17
Zain-ul-Abidin this is very awsome it solved a great problem for me! life saver post!
Aryan Patna 2013-05-02 10:52:23
Aryan Patna hello this is realy nice thanx alot.
boku 2013-04-25 20:13:53
boku hi nice thank you..
HamdanD 2012-05-14 12:54:58
HamdanD didn't try ur example yet... but it's the sexiest example I've ever seen
himmelblau 2012-03-14 02:43:23
himmelblau la verdad - bueno,muy bueno.
yamil 2012-01-04 21:06:09
yamil muy bueno el ejemplo muchas gracias saludos..

Leave a Comment

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.
Load other examples in slider