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

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 width ranging from 12.5% to 100% depending on the resolution of the screen

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

Example with the parentHeightRatio option set to 0.6 and images having different proportions. The zoomRatio option is set to 2.5

Images center within their parent containers. Background color refers to the parent containers CSS class, and the border is set via CSS padding.

Fixed width and height of the thumbnails

The width and height of the parent thumbnails are not responsive but set via CSS class as fixed px values. Neither parentHeightRatio nor parentWidthRatio apply below.

Fixed height of the thumbnails (the unit of the height may be responsive as %) and parentWidthRatio option set to "auto"

The "auto" value of the parentWidthRatio option also works in IE < 9.

Gallery box

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 if not present! -->
	<script type="text/javascript" src="../axZm/plugins/jquery-2.2.4.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>

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 The degree of the zoom-in effect when a user hovers a thumbnail image with the mouse or touches with the finger on touch devices.
fadeInSpeed 250 The speed of fade-in effect when a thumbnail image appears after preloading.
zoomEsingIn 'swing' Easing animation of the zoom-in effect.
zoomEsingOut 'swing' Easing animation of the zoom-out effect.
zoomInSpeed 250 Duration of the zoom-in effect.
zoomOutSpeed 100 Duration of the zoom-out effect.
parentHeightRatio false If the width of the thumbnail image is responsive, you can set the aspect ratio of the parent container, e.g., 0.75. The proportions of the parent container are then always the same. You can also set the value of this option to "auto".
parentHeightLL 0.75 If image aspect ratio of the image is unknown, e.g., the parentHeightRatio option is set to "auto" and the images "lazy load" plugin is used (initially, the src attribute of the image is empty), the parentHeightLL option temporally applies until the src of the image is set by the "lazy load" script.
maxHeight 1.0 Limit the height of the thumbnail relative to the height of the browser's window. This limit applies when the parentHeightRatio option is set to "auto". The maxHeight is useful if the "thumbnails" image is quite large.
parentWidthRatio false If the height of the thumbnail image is responsive, you can set the aspect ratio of the parent container, e.g., 1.33. The proportions of the parent container are then always the same. You can also set the value of this option to "auto".
overlay true Show semi-transparent overlay while zoom effect runs.
overlayColor '#000' Background color of the overlay.
overlayOpacity 0.4 Opacity of the overlay.
axZmPath 'auto' Path to the "/axZm" folder, which contains the AJAX-ZOOM core files, e.g. "/test/axZm/". Please avoid providing a relative path.
axZmCallBacks {} AJAX-ZOOM has several callbacks, https://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 for IE < 10 and some mobile browsers. At the time writing this documentation, AJAX-ZOOM does not apply the fullscreen API for mobile browsers even if it is supported. That may change in the future version.
instantWrapClass null Wrap the image tag automatically by a div HTML element with a CSS class specified in this option.
ajaxZoomOpenMode 'fullscreen' This option determines how AJAX-ZOOM opens when the user clicks on a thumbnail, possible values are:
  1. 'fullscreen' - AJAX-ZOOM opens at fullscreen mode, see also the fullScreenApi
  2. 'fancyboxFullscreen' - AJAX-ZOOM opens in the responsive "Fancybox". "Fancybox" is a commonly used lightbox jQuery plugin.
  3. 'fancybox' - AJAX-ZOOM opens in a regular, fixed width and height "Fancybox".
  4. 'colorbox' - AJAX-ZOOM opens in "Colorbox" with fixed width and height. "Colorbox" is another third party modal window plugin.
  5. 'iframe' - Replace the image with AJAX-ZOOM viewer.
exampleFullscreen 'mouseOverExtension' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'fullscreen'.
exampleFancyboxFullscreen 'mouseOverExtension' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'fancyboxFullscreen'.
exampleFancybox 'modal' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'fancybox'.
exampleColorbox 'modal' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'colorbox'.
exampleIframe 'mouseOverExtension' Configuration set 2, which is passed to AJAX-ZOOM when the value of the ajaxZoomOpenMode is 'iframe'.
iframeLink 'example33_vario.php' If "ajaxZoomOpenMode" option is set to "iframe", the value of this option defines the path to a file that handles the AJAX-ZOOM viewer.
iframeParam 'noSplash=1&stepZoom=1&mNavi=mZoomOut:5,mZoomIn:15' Additionally to the information about the images, the extension appends these parameters and values to the query string, which are passed to the file defined in the iframeLink option.
iframeClose 'Close zoom' Show button to close AJAX-ZOOM viewer if ajaxZoomOpenMode option is set to "iframe". Can be true, false or string. If a string, the value of this option defines the text that is added to the button.
fancyBoxParam {} If "fancybox" is used in ajaxZoomOpenMode option, this object extends the default "Fancybox" plugin options.
colorBoxParam {} If "colorbox" is used in ajaxZoomOpenMode option, this object extends the default "Colorbox" plugin options.
Last updated: 2019-02-28
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.

Examples, which use the $.azHoverThumb extension

  • example6
  • example6_cms

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