example16.php HOME Examples overview Download Ask a question
example18.php

AJAX-ZOOM - experiment: outer "image map" same size as 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

About before / after image comparison

In this example the "image map" is placed outside of AJAX-ZOOM player and has the same size as the player. If you define more than one image which are passed to AJAX-ZOOM, then despite that all galleries are turned off AJAX-ZOOM still knows about the other images. Provided that all images have the same dimensions (width x height) you can switch between the images with the API $.fn.axZm.zoomSwitchQuick() without losing the zoom state. This API function is bind to the onclick event of the "Image 1" vs. "Image 2" buttons below the player. Optionally you can also switch between images with the keyboard arrow (or any other) keys, see code below.

When you click on "Set x" buttons images sets are changed with jQuery.fn.axZm.loadAjaxSet API function. You are not limited to load only two images with it. If it does make sense it could also load a series of a timelapse frames, Photoshop retouches, use it for scientific purposes and the like.

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

Finally it is important to note that the buttons below the player are only an example to show the functionality. You can retrieve information about images which should be compared out of any other source and dynamically load them into the player...

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