Image zoom JavaScript PHP inLine implementation

AJAX-ZOOM - embedded implementation

Ver. 4.2.1+ This example has been totally rewritten. It does not contain indispensable PHP code within the actual page any more. Also all JavaScript has been wrapped into one function - jQuery.azExample4(options);

The main API functions utilized in this example are $.fn.axZm.load and $.fn.axZm.loadAjaxSet; To display the folders jquery.lavalamp.js (the black / green menu under the player) has been used, but feel free to rewrite jQuery.azExample4.js to suit your needs...

Loading, please wait...

JavaScript & CSS files in Head

<!-- jQuery core, needed! -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

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

<!-- js for subfolders -->
<link rel="stylesheet" href="../axZm/plugins/demo/lavalamp/lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="../axZm/plugins/demo/lavalamp/jquery.lavalamp.js"></script>

<!-- js for this example (example4.php) -->
<script type="text/javascript" src="../axZm/extensions/axZmExamples/jquery.axZm.azExample4.js"></script>

HTML markup in body

<!-- Container where AJAX-ZOOM will be loaded into -->
<div id="axZmPlayerContainer" style="min-height: 448px;">
	Loading, please wait...
</div>

<!-- Container for folders menu -->
<div id="lavaLampContainer" style="height: 28px; overflow: hidden; margin-top: 5px;">
	Loading...
</div>

Javascript

jQuery.azExample4({
	axZmPath: "../axZm/", // Path to /axZm directory, e.g. /test/axZm/
	zoomDir: "/pic/zoom", // Path to subfolders with images
	divID: "axZmPlayerContainer", // ID of the main container 
	menuDivID: "lavaLampContainer", // ID of the menu container 
	firstFolder: 1, // index or name of the folder to be loaded at first
	firstImage: 1, // index or name of the image to load from firstFolder
	example: 8, // configuration set value which is passed to ajax-zoom
	axZmCallBacks: {}, // AJAX-ZOOM has several callbacks
	responsive: false,
	fullScreenApi: true // try to open AJAX-ZOOM at browsers fullscreen mode
});