Short example about how to open AJAX-ZOOM at fullscreen

This is a tutorial describing the basics of AJAX-ZOOM handling. It is a straightforward but useful demonstration of how to open the AJAX-ZOOM 360/3D viewer or gallery with flat images at fullscreen mode using on click event attached to any HTML element. Particularly, this example is about the AJAX-ZOOM $.fn.axZm.openFullScreen method. To get started with this example, you only need to include a few JavaScript files in your template.

Open regular images as monitor size fullscreen (not IE < 10)
Open 360 as monitor size fullscreen (not IE < 10)
Open regular images as window fullscreen
Open 360 as window fullscreen

JavaScript and CSS files in head section

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

				<!--  AJAX-ZOOM javascript and CSS, adjust the path if needed. Best set absolute path -->
				<link  href="../axZm/axZm.css" rel="stylesheet" type="text/css">
				<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
			

HTML / JavaScript

				<a href="javascript:void(0)" onClick="jQuery.fn.axZm.openFullScreen('../axZm/', 'example=23&zoomData=/pic/zoom/boutique/test_boutique1.png|/pic/zoom/boutique/test_boutique2.png|/pic/zoom/boutique/test_boutique3.png|/pic/zoom/boutique/test_boutique4.png', {}, 'window', true);">
				Open regular images as monitor size fullscreen
				</a>

				<a href="javascript:void(0)" onClick="jQuery.fn.axZm.openFullScreen('../axZm/', 'example=17&3dDir=/pic/zoom3d/Uvex_Occhiali', {}, 'window', true);">
				Open 360 as monitor size fullscreen
				</a>

				<a href="javascript:void(0)" onClick="jQuery.fn.axZm.openFullScreen('../axZm/', 'example=23&zoomData=/pic/zoom/boutique/test_boutique1.png|/pic/zoom/boutique/test_boutique2.png|/pic/zoom/boutique/test_boutique3.png|/pic/zoom/boutique/test_boutique4.png', {}, 'window', false, false);">
				Open regular images as window fullscreen
				</a>

				<a href="javascript:void(0)" onClick="jQuery.fn.axZm.openFullScreen('../axZm/', 'example=17&3dDir=/pic/zoom3d/Uvex_Occhiali', {}, 'window', false, false);">
				Open 360 as window fullscreen
				</a>
			

Here you can find the reference for jQuery.fn.axZm.openFullScreen AJAX-ZOOM API method.

The zoomData parameter is not the only one that you can set to define which images to display in the player. The example27 can serve as a tutorial for other parameters.

Please note, that by defining the query string parameter example=23 some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 23) { . 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'] == 23) { 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...

Load other examples in slider