example5.php HOME Examples overview Download Ask a question / privacy policy / imprint

AJAX-ZOOM - thumb hover zoom gallery

Responsive thumbnails gallery plugin with hover zoom effect and various other options.

On click, the AJAX-ZOOM viewer opens in a lightbox such as responsive "Fancybox". The viewer can also open at fullscreen or as full browser window overlay.

All JavaScript is within the jquery.axZm.hoverThumb.js file, which is an AJAX-ZOOM extension. The documentation of the $.azHoverThumb options is at the bottom of this page.

Responsive 20% width

Depending on resolution, the width changes over adjustable CSS3 @media Queries to 16.66, 20%, 25%, 33.33%, 50% or 100%. The height is set instantly over $.azHoverThumb "parentHeightRatio" option, which is a fixed width/height image ratio;

Fixed width and height of the thumbs

Fixed height of the thumbs (height can be also responsive as %) and "parentWidthRatio" set to "auto"

"auto" width also works in IE < 9 with this plugin

Try various AJAX-ZOOM open mods

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

JavaScript & CSS files in Head

					<!-- jQuery core, needed! -->
					<script type="text/javascript" src="../axZm/plugins/jquery-1.8.3.min.js"></script>

					<!-- AJAX-ZOOM core, needed! -->
					<link rel="stylesheet" href="../axZm/axZm.css" type="text/css">
					<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>

					<!-- AJAX-ZOOM thumbGallery extension, needed! -->
					<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.hoverThumb.css" type="text/css">
					<script type="text/javascript" src="../axZm/extensions/jquery.axZm.hoverThumb.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-min.js"></script>


					float: left;
					width: 12.5%;
					height: auto;
					box-sizing: border-box;
					border-right: 5px solid #FFF;
					border-bottom: 5px solid #FFF;

					/* same as border-right in .block_1 */
					margin-right: -5px;
					margin-bottom: 20px;

					@media only screen and (max-width: 1600px) {
					.block_1{width: 16.6666666666%;}

					@media only screen and (max-width: 1400px) {
					.block_1{width: 20%;}
					@media only screen and (max-width: 900px) {
					.block_1{width: 25%;}
					@media only screen and (max-width: 700px) {
					.block_1{width: 33.333333333333333%;}
					@media only screen and (max-width: 500px) {
					.block_1{width: 50%;}
					@media only screen and (max-width: 400px) {
					.block_1{width: 100%;}

HTML makup in body

					<!-- Container where subfolders will be loaded into -->
					<div class="block_1_parent clearfix">
					<div class="block_1">
					<img class="azHoverThumb" data-group="cars" data-descr="Optional title: car 1" data-img="/pic/zoom/trasportation/transportation_005.jpg" src="../axZm/zoomLoad.php?previewPic=transportation_005.jpg&previewDir=/pic/zoom/trasportation&qual=90&width=400&height=300" alt="" />

					<div class="block_1">
					<img class="azHoverThumb" data-group="cars" data-descr="Optional title: car 2" data-img="/pic/zoom/trasportation/transportation_006.jpg" src="../axZm/zoomLoad.php?previewPic=transportation_006.jpg&previewDir=/pic/zoom/trasportation&qual=90&width=400&height=300" alt="" />


					// Fire azHoverThumb on .azHoverThumb under block_1_parent
					$(".block_1_parent .azHoverThumb").azHoverThumb({
					parentHeightRatio: 0.665,
					zoomRatio: 1.34

$.azHoverThumb - documentation (options)

zoomRatio 1.5 Degree of zoom effect
fadeInSpeed 250 Speed of fade in when image first shows
zoomEsingIn 'swing' Easing of zoom effect
zoomEsingOut 'swing' Easing of zoom effect
zoomInSpeed 250 Speed of zoom effect
zoomOutSpeed 100 Speed of zoom effect
parentHeightRatio null If width is responsive you can set the aspect ratio of the height, e.g. 0.75
parentHeightLL 0.75 If image aspect ratio of the image is unknown, e.g. parentHeightRatio is set to "auto" and "lazy load" plugin is used (src attribute of the image is not set initially), parentHeightLL will be temporally applied until the src of the image will be set by "lazy load" from e.g. data-original
maxHeight 1.0 Also set / limit height of the image depending on window hight. Applied if "parentHeightRatio" is set to "auto"
parentWidthRatio null If height is responsive you can set the aspect ratio of the width, e.g. 1.33; parentWidthRatio can be also set to "auto"
overlay true show overlay on zoom effect
overlayColor '#000' color of the overlay
overlayOpacity 0.4 opacity of the overlay
axZmPath 'auto' Path to /axZm directory, e.g. /test/axZm/
axZmCallBacks {} AJAX-ZOOM has several callbacks, http://www.ajax-zoom.com/index.php?cid=docs#onBeforeStart
fullScreenApi false Try to open AJAX-ZOOM at browsers fullscreen mode, possible on modern browsers except IE < 10 and mobile
instantWrapClass null Wrap image tag instanly with a div of the specified class of this option
ajaxZoomOpenMode 'fullscreen' Determines how AJAX-ZOOM is opened when the user clicks on the image thumbs, possible values:
  • 'fullscreen' - AJAX-ZOOM opens at fullscreen mode, see also "fullScreenApi" option
  • 'fancyboxFullscreen' - AJAX-ZOOM opens in the responsive Fancybox. Fancybox is a commonly used lightbox jQuery plugin
  • 'fancybox' - AJAX-ZOOM opens in regular fixed width and height Fancybox
  • 'colorbox' - AJAX-ZOOM opens in Colorbox with fixed width and height. Colorbox is an other popular lightbox plugin
  • 'iframe' - Replace the image with AJAX-ZOOM player
exampleFullscreen 'mouseOverExtension' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fullscreen'
exampleFancyboxFullscreen 'mouseOverExtension' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fancyboxFullscreen'
exampleFancybox 'modal' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fancybox'
exampleColorbox 'modal' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'colorbox'
exampleIframe 'mouseOverExtension' Configuration set 2 which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'iframe'
iframeLink 'example33_vario.php' If "ajaxZoomOpenMode" option is set to "iframe", the path for the iframe document
iframeParam 'noSplash=1&stepZoom=1&mNavi=mZoomOut:5,mZoomIn:15' Additional query string parameter passed to iframeLink
iframeClose 'Close zoom' Show button to close AJAX-ZOOM player if "ajaxZoomOpenMode" option is set to "iframe". Can be true, false or string. If string the text will be added to the button html.
fancyBoxParam {} If fancybox is used in "ajaxZoomOpenMode" option, Fancybox options
colorBoxParam {} If colorbox is used in "ajaxZoomOpenMode" option, Colorbox options
Last updated: 2018-02-26
2 you will find the respective configuration set in /axZm/zoomConfigCustom.inc.php after
elseif ($_GET['example'] == [someValue])
There you can change existing options or copy from /axZm/zoomConfig.inc.php other options to change the values.

Comments (0)

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