example29_responsive_horizontal.phpOverview (index.php)Buy / DownloadAsk a question
example31.php

Short example about how to open AJAX-ZOOM as fullscreen

This example describes $.fn.axZm.openFullScreen which is needed to open AJAX-ZOOM as fullscreen from a link or bind to click event within JS.

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 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="http://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

<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 ist the API reference for jQuery.fn.axZm.openFullScreen

"zoomData" is not the only parameter that can be set to define which images to display in the player. example27.php can serve as tutorial for other methods.

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: