previous exampleHomeDownload
next example

AJAX-ZOOM Lightbox & Co.
examples with an iFrame

Fancybox
Example 1
Example 2
Example 3
Colorbox
Example 1
Example 2
Example 3

This example demonstrates how to open multiple zoom galleries with some lightbox clones (please click on the links above). The content of the iframe in the lightboxes is simply the file of the first example (example1.php) Due to "cross scripting" issues lightboxes usually can not identify the size of the content inside an iframe. Therefore you have to specify the size of the popup inside the lightbox options. Fullscreen does not work, because AJAX-ZOOM can not breakout of the iframe.

Please note, that not all lightbox clones have the support for iframed content. The ones used in this example are licensed under MIT, so you can use them in your projects as well. If you are going to use a different lightbox clone make sure to remove the scrollbars from the iframe.

Header:

			<!-- Fancybox css file -->
			<link rel="stylesheet" href="/axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.2.6.css" media="screen" type="text/css">
			
			<!-- jQuery  -->
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
			
			<!-- Easing plugin for more transitions -->
			<script type="text/javascript" src="/axZm/plugins/demo/jquery.fancybox/jquery.easing.1.3.js"></script>
			
			<!-- Fancybox js -->
			<script type="text/javascript" src="/axZm/plugins/demo/jquery.fancybox/jquery.fancybox-1.2.6.js"></script>
			
			<script type="text/javascript">
				jQuery(document).ready(function() {
					// Bind fancybox to some ellement
					jQuery("#ifrmExample1").fancybox({
						"padding"				: 0,
						"overlayShow"			: true,
						"overlayOpacity"		: 0.4,
						"zoomSpeedIn"			: 500, // has nothing to do with AJAX-ZOOM
						"zoomSpeedOut"			: 500, // has nothing to do with AJAX-ZOOM
						"hideOnContentClick"	: false, // important
						"frameWidth"			: 754, // has to be defined
						"frameHeight"			: 458, // has to be defined
						"centerOnScroll"		: false,
						"imageScale"			: true,
						"easingIn"  			: "swing",
						"easingOut"				: "swing"
					});
				});
			</script>
			
			
		

Body:

			<!-- A simple link, class must be "iframe" for fancybox -->
			<a class="iframe" id="ifrmExample1" href="example1.php?zoomDir=animals&example=1">Example 1</a>
		

Modules & Plugins Ecommerce

Magento 360 spin & zoom See AJAX-ZOOM in action on Magento
Integration quide
XT:commerce 360 spin & zoom See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4)
Integration quide
Oxid product zoom See AJAX-ZOOM in action on Oxid eSales
Integration quide
hybris zoom 360 spin See AJAX-ZOOM in action on hybris multichannel commerce (no php)
  More coming soon...
6.0+ 2.0+ 2.0+ 1.0+ 9.5+ 2.0+ 4.0+ Pinch zoom, tap zoom,
swipe

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