example29_responsive_easy.php HOME Examples overview Download Ask a question / privacy policy / imprint
example31.php

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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.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:

Comments (1)

satiseven 2013-02-28 10:56:35
satiseven It,s very nice.

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