music and code by Gazbond

wordpress_logo

AzooraDesign.com’s zoomable image viewer.


Categories: --All--, jQuery, Wordpress

AzooraDesign.com is a portfolio website built with WordPress that required the displaying of A3 or larger architectural designs in a user friendly fashion. These designs are intended to be inspected one small area at a time whilst using the overview of the design to navigate between areas of interest.

The ideal solution was to display thumbnail images that when clicked popup a modal dialog box of the selected design zoomed out to the available space, with controls for zooming and scrolling around.

After searching for solutions online I found jQuery gzoom plugin. It’s a really nice jQuery plugin that provides zooming behaviour on an image via a slider and scrolling behaviour via moving your mouse pointer around an images visible area. The only problem being how to get it to work in a modal dialog box?

I’ve used FancyBox on a few projects and understand how to get it to do some pretty non-standard things so I decided to hack the WordPress FancyBox plugin to include gzoom’s functionality.

The WordPress FancyBox plugin is initialized by fancybox.php. The bottom section of this file tells WordPress to insert FancyBox’s JavaScript and CSS files onto the page. Here we can also tell WordPress to insert gzoom’s resource files:

if (!is_admin()) {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery.fancybox', WP_PLUGIN_URL.'/fancy-box/jquery.fancybox-1.3.4.js', array('jquery'), '1.3');
    wp_enqueue_script('jquery.easing', WP_PLUGIN_URL.'/fancy-box/jquery.easing.js', array('jquery'), '1.3');
    wp_enqueue_style('jquery.fancybox', WP_PLUGIN_URL.'/fancy-box/jquery.fancybox-1.3.4.css', false, '1.3');
	add_action('wp_head', 'fancybox');
	// jQuery UI (gzoom dependancies)
    wp_enqueue_script('jquery.ui.core', WP_PLUGIN_URL.'/fancy-box/ui.core.min.js', array('jquery'), '1.3');
    wp_enqueue_script('jquery.ui.slider', WP_PLUGIN_URL.'/fancy-box/ui.slider.min.js', array('jquery'), '1.3');
	wp_enqueue_style('jquery.ui-lightness', WP_PLUGIN_URL.'/fancy-box/ui-lightness/jquery-ui-1.7.3.custom.css', false, '1.3');
	// Mouse wheel support (gzoom optional)
    wp_enqueue_script('jquery.mousewheel', WP_PLUGIN_URL.'/fancy-box/jquery.mousewheel.js', array('jquery'), '1.3');
	// gzoom
    wp_enqueue_script('jquery.gzoom.js', WP_PLUGIN_URL.'/fancy-box/jquery.gzoom.js', array('jquery'), '1.3');
    wp_enqueue_style('jquery.gzoom.css', WP_PLUGIN_URL.'/fancy-box/jquery.gzoom.css', false, '1.3');
}

fancybox.php also defines a fancybox() function that writes FancyBox’s initialization JavaScript onto the page. The default behaviour here is to select all links to images and tell FancyBox to show a modal dialog box for each when clicked. To add gzoom’s functionality each of the selected images needs event handlers added to override FancyBox’s default behaviour and add gzoom’s:

jQuery(document).ready(function($) {
	// Select all links to images
	var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
	// Reference to FancyBox content area (only available once initialized)
	var $fancyBox=null;
	// Initialize FancyBox for each image
	select.each(function() {
		// Flags for disabling FancyBox and/or gzoom
		var fancyBoxDisabled = $(this).hasClass('disable-fancybox');
		var gzoomDisabled = $(this).hasClass('disable-gzoom');
		if(!fancyBoxDisabled) {
			$(this).fancybox({
				// Set FancyBox properties
				transitionIn: 'none',
				transitionOut: 'none',
				overlayOpacity: 0,
				showNavArrows: false,
				onStart: function() {
					// Store reference to FancyBox content area
					if($fancyBox==null) $fancyBox = $('#fancybox-content');
					// Hide FancyBox to override its default behaviour
					if(!gzoomDisabled) $fancyBox.hide();
				},
				onComplete: function() {
					if(!gzoomDisabled) {
						// Wrap FancyBox image with a div for gzoom
						$('img', $fancyBox).wrap('<div></div>');
						// Initialize gzoom
						$('div', $fancyBox).gzoom({
							loaderContent: '',
							// Offset to show zoom bar
							sW: $fancyBox.width()-2,
							sH: $fancyBox.height()-22,
							// Zoom multiplier
							lW: $fancyBox.width()*3,
							lH: $fancyBox.height()*3
						});
						// Show FancyBox
						$fancyBox.show();
					}
				}
			});
		}
	});
});

The onStart() event handler simply hides FancyBox, effectively cancelling it’s default behaviour. The onComplete() event handler wraps the image that FancyBox is displaying with a div tag and uses it to initialize gzoom before re-showing FancyBox.

The script also reads classes disable-fancybox and disable-gzoom that can be added to links to disabled FancyBox and/or gzoom and also sets various FancyBox and gzoom properties such as transition and overlay behaviour for FancyBox and zoom multiplier for gzoom.

Try it at AzooraDesign.com

Comments are closed.