Thumbnails click image zoom in lightbox

AJAX-ZOOM - thumb hover zoom gallery

Ver. 4.2.1+ This example has been totally rewritten. It now uses a simple "thumb hover zoom" jQuery plugin; jquery.axZm.hoverThumb.js is shipped as extension to AJAX-ZOOM.

Responsive 20% width

Depending on resolution width changes over adjustable CSS3 @media Queries to 16.66, 20%, 25%, 33.33%, 50% or 100%; 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>

<!-- IE < 9 @media query support -->
<script src="../axZm/plugins/css3-mediaqueries.min.js"></script>

CSS

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

.block_1_parent{
	/* 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>

    <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="" />
    </div>
</div>

JavaScript

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

$.azHoverThumb - documentation (options)

Option	Default	Description
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
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; 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 ² which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fullscreen'
exampleFancyboxFullscreen	'mouseOverExtension'	Configuration set ² which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fancyboxFullscreen'
exampleFancybox	'modal'	Configuration set ² which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'fancybox'
exampleColorbox	'modal'	Configuration set ² which is passed to AJAX-ZOOM when "ajaxZoomOpenMode" is 'colorbox'
exampleIframe	'mouseOverExtension'	Configuration set ² 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: 2015-08-09

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