example1.php HOME Examples overview Download Ask a question / privacy policy / imprint
example3.php

AJAX-ZOOM "Lightbox" iFrame
examples

This example shows how to open AJAX-ZOOM in a modal window by a click event within an iframe. An iframe is an inline frame to embed another page within the current HTML document. This another page in this example is /examples/example33_vario.php. This page accepts specific arguments that you can pass to it over query string to load the desired content. It then interprets and forwards these arguments to the AJAX-ZOOM viewer, which opens responsively at full-page. Depending on the OS, browser, and the arguments, the viewer can break out of the iframe and display at full-screen. There are several other examples, which use that example33_vario.php file to load framed AJAX-ZOOM content as well.

Please note that because of AJAX-ZOOM license, the iframe source should be the same origin. However, if you have legit reasons for cross-domain or cross-origin implementation, please contact AJAX-ZOOM support with this issue to find a solution for your specific use case.

Below, there are sections with three main argument types that you can pass to the AJAX-ZOOM viewer:

  • With the zoomDir argument, the viewer loads a set of images and displays it as a gallery.
  • With the zoomData argument, the viewer loads one or more images from different locations that you specify in the value. You must separate the image paths with a | character.
  • With the 3dDir argument, the viewer loads a 360-product spin or 3D product view.
If you want to know more about the arguments that you can pass to the AJAX-ZOOM viewer, we recommend studying the example27, which turned out to be a tutorial on this.

There are some issues that you should consider when implementing AJAX-ZOOM via iframe into modal windows. First is that not all modal scripts support iframes. So if you are looking for a modal box script, pay attention to this detail at first. Also, make sure that you either remove the scrollbars from the iframe by an option of that JavaScript plugin or remove the scrollbars via CSS. Otherwise, it might look ugly.

If you would like to see other AJAX-ZOOM examples that are dealing with the implementation of the viewer via iframes, please inspect example6_cms, example13, example27.

The buttons below open AJAX-ZOOM in the first generation "Fancybox" (with the second in does work too), "Colorbox", and via AJAX-ZOOM extension, which makes the “Fancybox” behave responsively even with the framed content in it.

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.
Load other examples in slider