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.

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="/axZm/plugins/jquery-1.6.2.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=4&example=1">Example 1</a>
		

Modules & Plugins Ecommerce

	See AJAX-ZOOM in action on Magento Integration quide
	See AJAX-ZOOM in action on xt:Commerce (xtcModified, Gambio, VEYTON 4) Integration quide
	See AJAX-ZOOM in action on Oxid eSales Integration quide
	More comming soon...

Comments (0)

Leave a Comment