example1.php HOME Examples overview Download Ask a question
example3.php

AJAX-ZOOM "Lightbox" iFrame
examples

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 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.

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"

Fancybox - not responsive

Link gallery 1 Link gallery 2 Link gallery 2

Colorbox - not responsive

Link gallery 1 Link gallery 2 Link gallery 3

Responsive Fancybox

Example 1 Example 2 Example 3

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


<!-- Fancybox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.fancybox({href: 'example33_vario.php?zoomDir=estate&example=1&mNavi_enabled=0', type: 'iframe', autoScale: false, width: 754, height: 458, scrolling: 'no'})">Link gallery 1</a>

<!-- Colorbox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example33_vario.php?zoomDir=estate&example=1&mNavi_enabled=0', iframe: true, width: 804, height: 528, scrolling: false})">Link gallery 1</a>

<!-- Responsive Fancybox -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?zoomDir=estate&example=1&mNavi_enabled=0', iframe: true})">Example 1</a>
					

Load specified images with "zoomData"

Fancybox - not responsive

Link gallery 1

Colorbox - not responsive

Link gallery 1

Responsive Fancybox

Link gallery 1

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

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

<!-- Responsive Fancybox -->
<a class="btn btn-info btn-block" 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})">Link gallery 1</a>
				

Load 360 / 3D images with "3dDir"

Fancybox - not responsive

360 example

Colorbox - not responsive

360 example

Responsive Fancybox

360 example

<!-- Fancybox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.fancybox({href: \example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali&example=17&mNavi_enabled=0', type: 'iframe', autoScale: false, width: 602, height: 475, scrolling: 'no'})">360 example</a>

<!-- Colorbox - not responsive -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.colorbox({href: 'example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali&example=17&mNavi_enabled=0', iframe: true, width: 644, height: 550, scrolling: false})">360 example</a>

<!-- Responsive Fancybox -->
<a class="btn btn-info btn-block" href="javascript:void(0)" onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?3dDir=/pic/zoom3d/Uvex_Occhiali', iframe: true})">360 example</a>
						

Comments (0)

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.