AJAX-ZOOM - no toolbar, "image map" outside, zoom slider enabled, custom navi using API functions. Responsive ready!

This example is about the "image map" placed outside of the viewer. An "image map" defines as a small representation of the image where the user sees what part of the large image is visible in the zoomed viewport of the viewer. The user can also drag the small rectangular indicator within the "image map" and by doing so, pan the large, zoomed image in the viewer.

The default placement of the "image map" is inside the viewer at an adjustable corner. In this example, the "image map" displays outside of the zoom viewer.

$.axZm.thumbGallery extension

In this example, several images from different locations hand over to the AJAX-ZOOM $.axZm.thumbGallery extension by the zoomData option. This option is one of many available for the $.axZm.thumbGallery extension. Instead of defining the image paths for each image separately, you can also set the "zoomDir" option to load all images from a specified folder automatically. While loading, the extension instantly generates thumbnails of the high-resolution images and arranges them in a responsive grid next to the viewer. You can choose the transition type for switching between images.

To achieve a similar result without utilizing the $.axZm.thumbGallery extension, you could also use the AJAX-ZOOM native API methods. The most important method is $.fn.axZm.zoomSwitch. It allows you to control the switching between images from outside of the viewer. With the $.fn.axZm.loadAjaxSet method it is furthermore possible to load a different set of images into the already loaded instance of the gallery.

The $.axZm.thumbGallery, however, is commented and you can take the extension as the basis to create your custom functionality. Besides this example, several other examples use the $.axZm.thumbGallery extension. Therefore, before declaring a functionality as missing, you might want to view other examples and inspect the options of the extension¹.

Toolbar

In this example, the "native" toolbar is completly disabled. Instead, the mNavi buttons are set in onBeforeStart callback within the JavaScript code that initiates the extension. You can also set it in /axZm/zoomConfig.inc.php or in /axZm/zoomConfigCustom.inc.php file after elseif ($_GET['example'] == 18) {. See also the "embedExample" option below.

Image map

Unlike in most other examples, in this one, the image map locates outside of the AJAX-ZOOM viewer. The name of the AJAX-ZOOM option that does it is mapParent. You can find it initially defined in /axZm/zoomConfig.inc.php. The option sets the ID of a block element where the map should fit inside. Accordingly, that element can be anywhere. In this example, the mapParent option is set in onBeforeStart callback within the initiation code of the extension - jQuery.axZm.mapParent = 'mapContainer'; and not within a PHP configuration file. You can do that with some AJAX-ZOOM options.

The $.axZm.thumbGallery extension also has an option that places the "image map" over or seemingly in place of the selected thumbnail image! If that option is enabled, the JavaScript code of the extension changes the mapParent option whenever an image switches. In this particular layout, however, we have chosen to hide the AJAX-ZOOM "image map" on small screens (below 991px) by a @media CSS rule.

JavaScript & CSS files

<!-- jQuery core, needed if not already 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.thumbGallery.css" type="text/css">
<link rel="stylesheet" href="../axZm/extensions/jquery.axZm.azGrid.css" type="text/css">
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.thumbGallery.js"></script>
			

Example layout

HTML markup in body

All containers can be responsive! If the container where AJAX-ZOOM loads into is responsive, you must set the embedResponsive option below to true.

<div class="row" id="outerParent">
	<div class="col-md-6" id="outerLeft">
		<!-- Container where AJAX-ZOOM will be loaded into -->
		<div id="zoomInlineContent"></div>
	</div>
	<div class="col-md-6" id="outerRight">
			<!-- Container where thumbs will be loaded into -->
			<div id="thumbsParentContainer"></div>

			<!-- Container for map -->
			<div id="mapContainer" style=""></div>
	</div>
</div>
			

JavaScript

$.azThumbGallery - documentation (options)

[
	{"w": 100, "h": 100, "q": 90},
	{"w": 200, "h": 200, "q": 90},
	{"w": 400, "h": 400, "q": 80},
	{"w": 600, "h": 600, "q": 75}
]
		

		{
			"image1.jpg": "test 1",
			"image2.jpg": "test 2"
		}
		

		{
			1: "test 1",
			2: "test 2"
		}
		

		{
			"xs": 4,
			"sm": 8,
			"md": 12,
			"lg": 12,
			"xl": 16,
			"xxl": 20
		}
		

			[
				["xs", function(w, h) {
					// max-width: 575.98px,
					return w < 576;
				}],
				["sm", function(w, h) {
					// min-width: 576px) and (max-width: 767.98px
					return w >= 576 && w < 768
				}],
				["md", function(w, h) {
					// min-width: 768px) and (max-width: 991.98px
					return w >= 768 && w < 992
				}],
				["lg", function(w, h) {
					// (min-width: 992px) and (max-width: 1199.98px)
					return w >= 992 && w < 1200
				}],
				["xl", function(w, h) {
					// (min-width: 1200px)
					return w >= 1200;
				}],
				["xxl", function(w, h) {
					// (min-width: 1900px) and (min-height: 1020px)
					return w >= 1900 && h > 1020
				}]
			]
		

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.

Add Comment