previous exampleHome
next example

Quick example of how to open AJAX-ZOOM as fullscreen

There are some more complicated examples like this one http://www.ajax-zoom.com/examples/example21.php which utilizes jQuery.fn.axZm.openFullScreen() API function. This example is quick reference of how to init AJAX-ZOOM from any event. Click on the link below to see it.

Open regular images as monitor size fullscreen (not IE)
Open regular images as window fullscreen
Open 360 as monitor size fullscreen (not IE)
Open 360 as window fullscreen
Open 360 with hotspots as as window fullscreen
		<!--  Include AJAX-ZOOM css, adjust the path if needed. Best set absolute path -->
		<link rel="stylesheet" href="../axZm/axZm.css" media="screen" type="text/css">
		
		<!--  Include jQuery core into head section -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		
		<!--  AJAX-ZOOM javascript, adjust the path if needed. Best set absolute path -->
		<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
		
 		<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 <b>regular images</b> as monitor size fullscreen (not IE)
		</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 <b>regular images</b> as window fullscreen
		</a>
		 
 		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.openFullScreen('../axZm/', 'example=17&3dDir=/pic/zoom3d/Uvex_Occhiali', {}, 'window', true);">
		Open <b>360</b> as monitor size fullscreen (not IE)
		</a>
		 
 		<a href="javascript:void(0)" onClick="jQuery.fn.axZm.openFullScreen('../axZm/', 'example=17&3dDir=/pic/zoom3d/Uvex_Occhiali', {}, 'window', false, false);">
		Open <b>360</b> as window fullscreen
		</a>
		
 		<a href="javascript:void(0)" class="exampleLink" onClick="jQuery.fn.axZm.openFullScreen('../axZm/', 'example=spinIpad&3dDir=/pic/zoom3d/Uvex_Occhiali', {onLoad: function(){jQuery.axZm.spinReverse = false; jQuery.fn.axZm.loadHotspotsFromJsFile('../pic/hotspotJS/eos_1100D.js', false); jQuery('.zoomContainer').css({backgroundColor: '#FFFFFF'});}}, 'window', false, false);">
		Open <b>360 with hotspots</b> as 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:

MORE EXAMPLES
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom
javascript picture zoom