AJAX-ZOOM - short tutorial - JAVASCRIPT

AJAX-ZOOM short tutorial about different ways of integrating the plain images viewer into your template or HTML in general. This article gives you a quick overview of the diverse possibilities that you can find in other examples with a more detailed description. Also, in this example configuration, there are no previous/next arrows and no visible thumbnails gallery. Users can swipe through photos on touch and desktop with the mouse.

Consider it as a boilerplate to start with if you need minimal configuration. You can disable the toolbar at the bottom or add and remove buttons with default functionalities to it.

Above is a simple JavaScript-based zoom viewer / swipe slider without thumbnails gallery and only toolbar at the bottom of the viewer. You can disable all UI elements, refine single elements in the toolbar or enable other by options. The example does not require any PHP code within the frontend template. Depending on your system, it could be even possible to insert the suggested code snippets via the WYSIWYG editor.

In the code below, we show three possibilities. The first one requires that the jQuery core, AJAX-ZOOM JavaScript and CSS files are already in the head or present elsewhere. If you do not have access to the head, you can also use the second possibility and insert /axZm/jquery.axZm.loader.js in a script tag, which loads jQuery core if not already present and other JavaScript / CSS files automatically.

Possibility I (one)

Requires some files to be in the head section, though you can also copy them in the body.

JavaScript and CSS in head section

<!--  Include jQuery core into head section if not already present -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

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

HTML in body

<div class="embed-responsive" style="padding-bottom: 50%;">
	<!-- Div where AJAX-ZOOM is loaded into -->
	<div id="ajaxZoomContainer" class="embed-responsive-item" style="max-height: 94vh; max-height: calc(100vh - 50px);">
		Loading, please wait...
	</div>
</div>
	

JavaScript in body

<script type="text/javascript">
	// Create empty object
	var ajaxZoom = {};

	// Define the path to the axZm folder
	ajaxZoom.path = "../axZm/";

	// Define your custom parameter query string
	ajaxZoom.parameter = "example=2&zoomData=/pic/zoom/furniture/furniture_004.jpg\
	|/pic/zoom/furniture/furniture_003.jpg\
	|/pic/zoom/boutique/boutique_001.jpg\
	|/pic/zoom/boutique/boutique_002.jpg\
	";

	// The ID of the element where ajax-zoom has to be inserted into
	ajaxZoom.divID = "ajaxZoomContainer";

	ajaxZoom.opt = {
		onLoad: function(){
			// Do something
		}
	};

	// Load AJAX-ZOOM
	jQuery(document).ready(function(){
		// Load AJAX-ZOOM not responsive
		/*
		jQuery.fn.axZm.load({
			opt: ajaxZoom.opt,
			path: ajaxZoom.path,
			parameter: ajaxZoom.parameter,
			divID: ajaxZoom.divID
		});
		*/

		// open AJAX-ZOOM responsive
		// Documentation - https://www.ajax-zoom.com/index.php?cid=docs#api_openFullScreen
		$.fn.axZm.openResponsive(
			ajaxZoom.path, // Absolute path to AJAX-ZOOM directory, e.g. "/axZm/"
			ajaxZoom.parameter, // Defines which images and which options set to load
			ajaxZoom.opt, // callbacks
			ajaxZoom.divID, // target - container ID (default "window" - fullscreen)
			false, // apiFullscreen- use browser fullscreen mode if available
			true, // disableEsc - prevent closing with Esc key
			false // postMode - use POST instead of GET
		);
	});
</script>
	

Possibility II (two)

This is the way that utilizes the "loader" JavaScript file. First, you define where to find the /axZm directory (ajaxZoom.path) in JavaScript. Then, you define which files and with which configuration set they should load (ajaxZoom.parameter). Then the container ID where you want the AJAX-ZOOM viewer to be placed. Finally, you insert jquery.axZm.loader.js file, which loads everything else that AJAX-ZOOM needs automatically.

HTML in body

<!-- Div where AJAX-ZOOM is loaded into -->
<div id="ajaxZoomContainer" style="min-height: 462px;">Loading, please wait...</div>
	

<script type="text/javascript">
	// Create empty object
	var ajaxZoom = {};

	// Define the path to the axZm folder
	ajaxZoom.path = "../axZm/";

	// Define your custom parameter query string
	ajaxZoom.parameter = "example=2&zoomData=/pic/zoom/furniture/furniture_004.jpg\
	|/pic/zoom/furniture/furniture_003.jpg\
	|/pic/zoom/boutique/boutique_001.jpg\
	|/pic/zoom/boutique/boutique_002.jpg\
	";

	// The ID of the element where ajax-zoom has to be inserted into
	ajaxZoom.divID = "ajaxZoomContainer";
	ajaxZoom.responsive = true; // Embed responsive

	ajaxZoom.opt = {
		onLoad: function(){
			// Do something
		}
	};
</script>
<!-- Insert the loader file that will take the above settings (ajaxZoom) and load the player -->
<script type="text/javascript" src="../axZm/jquery.axZm.loader.js"></script>
	

Important notes

By defining the query string parameter in ajaxZoom.parameter example=2 some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 2){ So if changes in /axZm/zoomConfig.inc.php have no effect look for the same options /axZm/zoomConfigCustom.inc.php;

Thus, in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 2){ you could for example set:

• $zoom['config']['useHorGallery'] - enable / disable horizontal gallery.
• $zoom['config']['useGallery'] - enable / disable vertical gallery.
• $zoom['config']['displayNavi'] - enable / disable navigation bar.
• and many others...

Possibility III (three)

If you experience any problems with the above methods or need more than one instances of AJAX-ZOOM showing simultaneously, you should also use iframes. For more information on iframes, we recommend viewing example13.

HTML in body

	<!-- AJAX-ZOOM will be loaded into iframe -->
	<iframe src="../examples/example33_vario.php?zoomData=/pic/zoom/furniture/furniture_003.jpg|/pic/zoom/boutique/boutique_001.jpg" width="100%" height="400" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" allowfullscreen></iframe>
	

Load other examples in slider