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.
<!-- jQuery core --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- AJAX-ZOOM core files --> <script type="text/javascript" src="../axZm/jquery.axZm.js"></script> <link rel="stylesheet" href="../axZm/axZm.css" type="text/css">
<div class="clearfix" style="padding: 10px; background-color: #3D3D3D"> <div style="float: left; width: 362px; height: 542px; position: relative;"> <div id="mapContainer" style="position: absolute; width: 362px; height: 542px; top:-1px;"></div> </div> <div id="ajaxZoomTest" style="float: right; width: 362px; height: 542px;">Loading, please wait...</div> </div> <div style="text-align: center; padding-top: 5px; position: relative;"> <div style="position: absolute; top: -2px; right: 0;">Image source: canon.com</div> <a class="aAPI" href="javascript:void(0)" onclick="jQuery.fn.axZm.zoomSwitchQuick(1)">Image 1</a> <a class="aAPI" href="javascript:void(0)" onclick="jQuery.fn.axZm.zoomSwitchQuick(2)">Image 2</a> </div>
// Create new object
var ajaxZoom = {};
ajaxZoom.opt = {
onBeforeStart: function(){
// Not all but some AJAX-ZOOM options can be set inside onBeforeStart callback
jQuery.axZm.useMap = true;
jQuery.axZm.mapParent = "mapContainer";
jQuery.axZm.zoomSlider = true;
jQuery.axZm.zoomSliderHorizontal = true;
jQuery.axZm.zoomSliderHeight = 100;
jQuery.axZm.zoomSliderHandleSize = 11;
jQuery.axZm.zoomSliderWidth = 5;
jQuery.axZm.zoomSliderMarginH = 10;
jQuery.axZm.zoomSliderMarginV = 10;
jQuery.axZm.zoomSliderPosition = "bottomLeft";
jQuery.axZm.zoomSliderMouseOver = false;
// Hide AJAX-ZOOM on loading
$("#axZm_zoomContainer").css("visibility", "hidden");
},
onLoad: function(){
jQuery.fn.axZm.zoomTo({
x1: "50%",
y1: "40%",
speed: 0,
speedZoomed: 0,
ajxTo: 0,
zoomLevel: "100%",
callback: function(){
// Show AJAX-ZOOM after zoomTo
$("#axZm_zoomContainer").css("visibility", "visible");
}
});
},
onFullScreenCloseEnd: function(){
setTimeout(function(){
jQuery.fn.axZm.clearTiles(true);
jQuery.fn.axZm.zoomTo({
speed: 0,
speedZoomed: 0,
ajxTo: 0,
zoomLevel: "100%"
});
}, 1);
}
};
// Path to the axZm folder
ajaxZoom.path = "../axZm/";
// Define your custom parameter query string
// By example=19 some settings are overridden in zoomConfigCustom.inc.php
// zoomData is the php array with images turned into string
ajaxZoom.parameter = "zoomData=/pic/test/canon_eos_5ds/canon_eos_5ds_sample1.jpg|/pic/test/canon_eos_5ds/canon_eos_5ds_sample1_bw.jpg&example=19";
// The id of the Div where ajax-zoom has to be inserted into
ajaxZoom.divID = "ajaxZoomTest";
jQuery(document).ready(function(){
jQuery.fn.axZm.load({
opt: ajaxZoom.opt,
path: ajaxZoom.path,
parameter: ajaxZoom.parameter,
divID: ajaxZoom.divID
});
});