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

AJAX-ZOOM - experiment: outer "image map" same size as the initial image. Autozoom after image loads. Before / after image comparison JavaScript functionality.

Loading, please wait...
Image source: canon.com; Canon EOS 5DS; ISO: 100; 5792x8688px
Set 1 Set 2 Set 3 Set 4

About before / after image comparison

Same as in example16, the "image map" resides outside of the image viewer but has the same size as the image 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.

This design is winning when the user needs to see the entire image in large and inspect the high-resolution images in detail with deep zoom. Some of our customers use it for before / after comparison.

The $.fn.axZm.zoomSwitchQuick API method offers a way to switch between a set of two or more images quickly and without losing the zoom state. Such kind of switching works only if the images are the same size. With some tweaks, you can add images changing functionality not just to the UI element but also, e.g., to keyboard key (see source code).

Besides, there is a possibility to load a different pair or array of images without reloading the viewer by using $.fn.axZm.loadAjaxSet API method.

Other possible fields of application other than before / after image comparison are time-lapse photography to inspect the changes frame-by-frame, security and photo documentation applications, comparison of photos made with different camera settings.

Please note that as with any other AJAX-ZOOM examples you could also place hotspots on images that you either generate with the hotspot editor or by using the AJAX-ZOOM API to create hotspots dynamically, e.g., out of a database or external XML files with coordinates.

Finally, it is important to point out that the buttons below the player are just exemplary showing the core functionality of the API. You can retrieve information about images for comparison out of any other sources and dynamically load them into the viewer.

JavaScript & CSS files in Head


<!-- Bootstrap is actually not needed except embed-responsive and embed-responsive-item classes
	which could be easily extracted -->
<link rel="stylesheet" href="example_files/bootstrap/css/bootstrap.min.css" type="text/css">

<!-- This is not needed at all -->
<link rel="stylesheet" href="example_files/css/examples.css" type="text/css">

<!-- Include jQuery core into head section if not already present -->
<script type="text/javascript" src="../axZm/plugins/jquery-2.2.4.min.js"></script>

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

<!-- Helper plugin to deal with embed-responsive class -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.embedResponsive.js"></script>

HTML makup in body


<div class="container">
	<div class="row">
		<div class="col-sm-6">
			<div class="embed-responsive" id="mapContainerParent">
				<!-- Placeholder for AJAX-ZOOM player -->
				<div id="mapContainer" class="embed-responsive-item">
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="embed-responsive" id="axZmPlayerContainerParent">
				<!-- Placeholder for AJAX-ZOOM player -->
				<div id="axZmPlayerContainer" class="embed-responsive-item">
					Loading, please wait...
				</div>
			</div>
		</div>
	</div>
	<div class="row" style="margin-top: 7px;">
		<div class="col-sm-6 col-xs-12">
			<div class="right">Image source: canon.com; Canon EOS 5DS; ISO: 100; 5792x8688px</div>
		</div>
		<!-- Buttons to switch between sets of images to be compared, not needed -->
		<div class="col-sm-3 col-xs-6">
			<a class="btn btn-sm btn-info btn-mrg" href="javascript:void(0)"
				onclick="jQuery.fn.axZm.loadAjaxSet('zoomData=/pic/test/canon_eos_5ds/canon_eos_5ds_sample1.jpg|/pic/test/canon_eos_5ds/canon_eos_5ds_sample1_bw.jpg&example=19')">Set 1</a>
			<a class="btn btn-sm btn-info btn-mrg" href="javascript:void(0)"
				onclick="jQuery.fn.axZm.loadAjaxSet('zoomData=/pic/test/marcu/Marcu_after.jpg|/pic/test/marcu/Marcu_before.jpg&example=19')">Set 2</a>
			<a class="btn btn-sm btn-info btn-mrg" href="javascript:void(0)"
				onclick="jQuery.fn.axZm.loadAjaxSet('zoomData=/pic/armchair/orange/eames_orange_001.jpg|/pic/armchair/classic/eames_classic_001.jpg&example=19')">Set 3</a>
			<a class="btn btn-sm btn-info btn-mrg" href="javascript:void(0)"
				onclick="jQuery.fn.axZm.loadAjaxSet('zoomData=/pic/test/something/something_1.jpg|/pic/test/something/something_2.jpg&example=19')">Set 4</a>
		</div>
		<!-- Buttons to switch between first and second image -->
		<div class="col-sm-3 col-xs-6" id="axZmBtnCompareParent">
			<div id="axZmBtnCompare">
				<a class="btn btn-sm btn-info btn-mrg" href="javascript:void(0)" onclick="jQuery.fn.axZm.zoomSwitchQuick(1)">Image 1</a> vs.
				<a class="btn btn-sm btn-info btn-mrg" href="javascript:void(0)" onclick="jQuery.fn.axZm.zoomSwitchQuick(2)">Image 2</a>
			</div>
		</div>
	</div>
</div>

JavaScript

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