example1.phpExamples overviewDownloadAsk a question
example3.php

AJAX-ZOOM "Lightbox" iFrame
examples

Press on the buttons below to open various AJAX-ZOOM configurations as iframed content in a lightbox:

Load all images from a directory with "zoomDir"

Load specified images with "zoomData"

Fancybox

Link gallery 1

Colorbox

Link gallery 1

Responsive Fancybox

Link gallery 1

Load 360 / 3D images with "3dDir"

Fancybox

360 example

Colorbox

360 example

Responsive Fancybox

360 example

About

This example demonstrates how to display AJAX-ZOOM gallery which grabs and shows all images from a particular folder, loads specified images from different folders or 360°/3D with some "lightboxes" (please click on the buttons above). The content of the iframe in the lightboxes is simply the file of the first example (example1.php) and for the "responsive Fancybox" - example33_vario.php.

Due to AJAX-ZOOM license issues the iFrame source should be from the same domain as source domain. If you have legit reasons for crossdomain use, please contact AJAX-ZOOM support.

Please note that not all lightboxes on internet support iframed content. If you are going to use a different lightbox make sure to remove the scrollbars from the iframe.

JavaScript & CSS files in Head

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

<!--  Fancybox lightbox javascript, only needed if used, please note: it has been slightly modified for AJAX-ZOOM -->
<link rel="stylesheet" href="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.css" media="screen" type="text/css">
<script type="text/javascript" src="../axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<!--  AJAX-ZOOM extension to load AJAX-ZOOM into maximized fancybox, requires jquery.fancybox-1.3.4.css and jquery.fancybox-1.3.4.js, optional -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.openAjaxZoomInFancyBox.js"></script>

<!-- Colorbox plugin, only needed if used -->
<link rel="stylesheet" href="../axZm/plugins/demo/colorbox/example1/colorbox.css" media="screen" type="text/css">
<script type="text/javascript" src="../axZm/plugins/demo/colorbox/jquery.colorbox-min.js"></script>
			

In the below code we simply write the onclick attribute inline. Of course you can use jQuery(selector).bind('click', function(){...}) in your applications.

Load all images from a directory with "zoomDir"

<!-- Fancybox -->
<a href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example1.php?zoomDir=estate&example=1&iframe=1', type: 'iframe', autoScale: false, width: 754, height: 458, scrolling: 'no'})">Fancybox</a>

<!-- Colorbox -->				
<a href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example1.php?zoomDir=estate&example=1&iframe=1', iframe: true, width: 804, height: 528, scrolling: false})">Colorbox</a>
	
<!-- Responsive Fancybox -->
<a href="javascript:void(0)" onclick="$.openAjaxZoomInFancyBox({href: 'example33_vario.php?zoomDir=estate', iframe: true})">Responsive Fancybox</a>
				

Load specified images with "zoomData"

<!-- Fancybox -->
<a href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example1.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg&example=1&iframe=1', type: 'iframe', autoScale: false, width: 754, height: 458, scrolling: 'no'})">Fancybox</a><br>

<!-- Colorbox -->				
<a href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example1.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg&example=1&iframe=1', iframe: true, width: 804, height: 528, scrolling: false})">Colorbox</a><br>	

<!-- Responsive Fancybox -->
<a href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?zoomData=/pic/zoom/estate/house_01.jpg|/pic/zoom/animals/animals_001.jpg|/pic/zoom/furniture/furniture_002.jpg', iframe: true})">Responsive Fancybox</a> 				
				

Load 360 / 3D images with "3dDir"

<!-- Fancybox -->
<a class="lnkBtn" href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example1.php?3dDir=/pic/zoom3d/Uvex_Occhiali&example=17&iframe=1', type: 'iframe', autoScale: false, width: 602, height: 475, scrolling: 'no'})">Fancybox 360</a><br>

<!-- Colorbox -->				
<a class="lnkBtn" href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example1.php?3dDir=/pic/zoom3d/Uvex_Occhiali&example=17&iframe=1', iframe: true, width: 644, height: 550, scrolling: false})">Colorbox 360</a><br>
	
<!-- Responsive Fancybox -->
<a class="lnkBtn" href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali', iframe: true})">Responsive Fancybox 360</a> 
				

Comments (0)

Leave a Comment

Name (required):
Email (required):
Website:
Your comment (no html):
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.