/** * Interface Elements for jQuery * ImageBox * * http://interface.eyecon.ro * * Copyright (c) 2006 Stefan Petre * Dual licensed under the MIT (MIT-LICENSE.txt) * and GPL (GPL-LICENSE.txt) licenses. * *//** * This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption. * Keyboard navigation: *  -  next image: arrow right, page down, 'n' key, space *  -  previous image: arrow left, page up, 'p' key, backspace *  -  close: escape * * CSS *	#ImageBoxOverlay *	{ *		background-color: #000; *	} *	#ImageBoxCaption *	{ *		background-color: #F4F4EC; *	} *	#ImageBoxContainer *	{ *		width: 250px; *		height: 250px; *		background-color: #F4F4EC; *	} *	#ImageBoxCaptionText *	{ *		font-weight: bold; *		padding-bottom: 5px; *		font-size: 13px; *		color: #000; *	} *	#ImageBoxCaptionImages *	{ *		margin: 0; *	} *	#ImageBoxNextImage *	{ *		background-image: url(spacer.gif); *		background-color: transparent; *	} *	#ImageBoxPrevImage *	{ *		background-image: url(spacer.gif); *		background-color: transparent; *	} *	#ImageBoxNextImage:hover *	{ *		background-image: url(next_image.jpg); *		background-repeat:	no-repeat; *		background-position: right top; *	} *	#ImageBoxPrevImage:hover *	{ *		background-image: url(prev_image.jpg); *		background-repeat:	no-repeat; *		background-position: left bottom; *	} * * @name Imagebox * @description This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute 'title' will be used as caption. * @param Hash hash A hash of parameters * @option Integer border border width * @option String loaderSRC path to loading image * @option String closeHTML path to close overlay image * @option Float overlayOpacity opacity for overlay * @option String textImage when a galalry it is build then the iteration is displayed * @option String textImageFrom when a galalry it is build then the iteration is displayed * @option Integer fadeDuration fade duration in miliseconds * @option Integer showTextImage 0/1 : show or not the text 'image n from z' * * @type jQuery * @cat Plugins/Interface * @author Stefan Petre */var jQImageBox_imageEl=""; //rustine pour SafarijQuery.ImageBox = {	options : {		border				: 10,		loaderSRC			: 'loading.gif',		closeHTML			: '<img src="close.jpg" />',		overlayOpacity		: 0.8,		textImage			: 'Showing image',		textImageFrom		: 'from',		fadeDuration		: 400,		showTextImage		: true	},	imageLoaded : false,	firstResize : false,	currentRel : null,	animationInProgress : false,	opened : false,	minWidth : 0,	heightClose : 0,	keyPressed : function(event)	{		if(!jQuery.ImageBox.opened || jQuery.ImageBox.animationInProgress)			return;		var pressedKey = event.charCode || event.keyCode || -1;		switch (pressedKey)		{			//end			case 35:				if (jQuery.ImageBox.currentRel)					jQuery.ImageBox.start(null, jQuery('a[@rel=' + jQuery.ImageBox.currentRel+ ']:last').get(0));			break;			//home			case 36:				if (jQuery.ImageBox.currentRel)					jQuery.ImageBox.start(null, jQuery('a[@rel=' + jQuery.ImageBox.currentRel+ ']:first').get(0));			break;			//left			case 37:			//backspace			case 8:			//page up			case 33:			//p			case 80:			case 112:				var prevEl = jQuery('#ImageBoxPrevImage');				if(prevEl.get(0).onclick != null) {					prevEl.get(0).onclick.apply(prevEl.get(0));				}			break;			//up			case 38:			break;			//right			case 39:			//page down			case 34:			//space			case 32:			//n			case 110:			case 78:				var nextEl = jQuery('#ImageBoxNextImage');				if(nextEl.get(0).onclick != null) {					nextEl.get(0).onclick.apply(nextEl.get(0));				}			break;			//down;			case 40:			break;			//escape			case 27:				jQuery.ImageBox.hideImage();			break;		}	},	init : function(options)	{		if (options)			jQuery.extend(jQuery.ImageBox.options, options);		if (window.event) {			jQuery('body',document).bind('keyup', jQuery.ImageBox.keyPressed);		} else {			jQuery(document).bind('keyup', jQuery.ImageBox.keyPressed);		}		jQuery('a').each(			function()			{				el 				= jQuery(this);				relAttr 		= el.attr('rel')||'';				hrefAttr 		= el.attr('href')||'';				imageTypes 		= /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;				if (hrefAttr.toLowerCase().match(imageTypes) != null && relAttr.toLowerCase().indexOf('imagebox') == 0) {					el.bind('click', jQuery.ImageBox.start);				}			}		);		if (jQuery.browser.msie) {			iframe = document.createElement('iframe');			jQuery(iframe)				.attr(					{						id			: 'ImageBoxIframe',						src			: 'javascript:false;',						frameborder	: 'no',						scrolling	: 'no'					}				)				.css (					{						display		: 'none',						position	: 'absolute',						top			: '0',						left		: '0',						filter		: 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'					}				);			jQuery('body').append(iframe);		}		overlay	= document.createElement('div');		jQuery(overlay)			.attr('id', 'ImageBoxOverlay')			.css(				{					position	: 'absolute',					display		: 'none',					top			: '0',					left		: '0',					opacity		: 0				}			)			.append(document.createTextNode(' '))			.bind('click', jQuery.ImageBox.hideImage);		captionText = document.createElement('div');		jQuery(captionText)			.attr('id', 'ImageBoxCaptionText')			.css(				{					paddingLeft		: jQuery.ImageBox.options.border + 'px'				}			)			.append(document.createTextNode(' '));		captionImages = document.createElement('div');		jQuery(captionImages)			.attr('id', 'ImageBoxCaptionImages')			.css(				{					paddingLeft		: jQuery.ImageBox.options.border + 'px',					paddingBottom	: jQuery.ImageBox.options.border + 'px'				}			)			.append(document.createTextNode(' '));		closeEl = document.createElement('a');		jQuery(closeEl)			.attr(				{					id			: 'ImageBoxClose',					href		: '#'				}			)			.css(				{					position	: 'absolute',					right		: jQuery.ImageBox.options.border + 'px',					top			: '0'				}			)			.append(jQuery.ImageBox.options.closeHTML)			.bind('click', jQuery.ImageBox.hideImage);		captionEl = document.createElement('div');		jQuery(captionEl)			.attr('id', 'ImageBoxCaption')			.css(				{					position	: 'relative',					textAlign	: 'left',					margin		: '0 auto',					zIndex		: 1				}			)			.append(captionText)			.append(captionImages)			.append(closeEl);		loader = document.createElement('img');		loader.src = jQuery.ImageBox.options.loaderSRC;		jQuery(loader)			.attr('id', 'ImageBoxLoader')			.css(				{					position	: 'absolute'				}			);		prevImage = document.createElement('a');		jQuery(prevImage)			.attr(				{					id			: 'ImageBoxPrevImage',					href		: '#'				}			)			.css(				{					position		: 'absolute',					display			: 'none',					overflow		: 'hidden',					textDecoration	: 'none'				}			)			.append(document.createTextNode(' '));		nextImage = document.createElement('a');		jQuery(nextImage)			.attr(				{					id			: 'ImageBoxNextImage',					href		: '#'				}			)			.css(				{					position		: 'absolute',					overflow		: 'hidden',					textDecoration	: 'none'				}			)			.append(document.createTextNode(' '));		container = document.createElement('div');		jQuery(container)			.attr('id', 'ImageBoxContainer')			.css(				{					display		: 'none',					position	: 'relative',					overflow	: 'hidden',					textAlign	: 'left',					margin		: '0 auto',					top			: '0',					left		: '0',					zIndex		: 2				}			)			.append([loader, prevImage, nextImage]);