Onclick Links Para Imagens

[Renatobc]

Boa tarde galera,

Estou fazendo uma galeria usando o script Imageflow, e eu queria colocar cada imagem da galeria para ir em um link diferente, mudei a função onclick mas só consigo fazer com que todas as imagens leve a um único link,e quero que cada imagem leve a um link diferente...

Sou novo em javascript então não manjo muito , queria saber se não tem um jeito de escolher o link pelo id da imagem ou algo do tipo...

Obrigado !

Segue os codigos:

Js

/* ImageFlow constructor */
function ImageFlow ()
{
		/* Setting option defaults */
		this.defaults =
		{
				animationSpeed:	 50,			 /* Animation speed in ms */
				aspectRatio:		1.964,		  /* Aspect ratio of the ImageFlow container (width divided by height) */
				buttons:			false,		  /* Toggle navigation buttons */
				captions:		   true,		   /* Toggle captions */
				circular:		   false,		  /* Toggle circular rotation */
				imageCursor:		'default',	  /* Cursor type for all images - default is 'default' */
				ImageFlowID:		'imageflow',	/* Default id of the ImageFlow container */
				imageFocusM:		1.0,			/* Multiplicator for the focussed image size in percent */
				imageFocusMax:	  4,			  /* Max number of images on each side of the focussed one */
				imagePath:		  '',			 /* Path to the images relative to the reflect_.php script */
				imageScaling:	   true,		   /* Toggle image scaling */ 
				imagesHeight:	   0.67,		   /* Height of the images div container in percent */
				imagesM:			1.0,			/* Multiplicator for all images in percent */
				onClick:			function () {window.open('http://www.teste.com.br','_self');},   /* Onclick behaviour */
				opacity:			false,		  /* Toggle image opacity */
				opacityArray:	   [10,8,6,4,2],   /* Image opacity (range: 0 to 10) first value is for the focussed image */
				percentLandscape:   118,			/* Scale landscape format */
				percentOther:	   100,			/* Scale portrait and square format */
				preloadImages:	  true,		   /* Toggles loading bar (false: requires img attributes height and width) */
				reflections:		true,		   /* Toggle reflections */
				reflectionGET:	  '',			 /* Pass variables via the GET method to the reflect_.php script */
				reflectionP:		0.5,			/* Height of the reflection in percent of the source image */
				reflectionPNG:	  false,		  /* Toggle reflect2.php or reflect3.php */
				reflectPath:		'',			 /* Path to the reflect_.php script */
				scrollbarP:		 0.6,			/* Width of the scrollbar in percent */
				slider:			 true,		   /* Toggle slider */
				sliderCursor:	   'e-resize',	 /* Slider cursor type - default is 'default' */
				sliderWidth:		14,			 /* Width of the slider in px */
				slideshow:		  false,		  /* Toggle slideshow */
				slideshowSpeed:	 1500,		   /* Time between slides in ms */
				slideshowAutoplay:  false,		  /* Toggle automatic slideshow play on startup */
				startID:			1,			  /* Image ID to begin with */
				glideToStartID:	 true,		   /* Toggle glide animation to start ID */
				startAnimation:	 false,		  /* Animate images moving in from the right on startup */
				xStep:			  150			 /* Step width on the x-axis in px */
		};


		/* Closure for this */
		var my = this;


		/* Initiate ImageFlow */
		this.init = function (options)
		{
				/* Evaluate options */
				for(var name in my.defaults) 
				{
						this[name] = (options !== undefined && options[name] !== undefined) ? options[name] : my.defaults[name];
				}

				/* Try to get ImageFlow div element */
				var ImageFlowDiv = document.getElementById(my.ImageFlowID);
				if(ImageFlowDiv)
				{
						/* Set it global within the ImageFlow scope */
						ImageFlowDiv.style.visibility = 'visible';
						this.ImageFlowDiv = ImageFlowDiv;

						/* Try to create XHTML structure */
						if(this.createStructure())
						{
								this.imagesDiv = document.getElementById(my.ImageFlowID+'_images');
								this.captionDiv = document.getElementById(my.ImageFlowID+'_caption');
								this.navigationDiv = document.getElementById(my.ImageFlowID+'_navigation');
								this.scrollbarDiv = document.getElementById(my.ImageFlowID+'_scrollbar');
								this.sliderDiv = document.getElementById(my.ImageFlowID+'_slider');
								this.buttonNextDiv = document.getElementById(my.ImageFlowID+'_next');
								this.buttonPreviousDiv = document.getElementById(my.ImageFlowID+'_previous');
								this.buttonSlideshow = document.getElementById(my.ImageFlowID+'_slideshow');

								this.indexArray = [];
								this.current = 0;
								this.imageID = 0;
								this.target = 0;
								this.memTarget = 0;
								this.firstRefresh = true;
								this.firstCheck = true;
								this.busy = false;

								/* Set height of the ImageFlow container and center the loading bar */
								var width = this.ImageFlowDiv.offsetWidth;
								var height = Math.round(width / my.aspectRatio);
								document.getElementById(my.ImageFlowID+'_loading_txt').style.paddingTop = ((height * 0.5) -22) + 'px';
								ImageFlowDiv.style.height = height + 'px';

								/* Init loading progress */
								this.loadingProgress();
						}
				}
		};


		/* Create HTML Structure */
		this.createStructure = function()
		{
				/* Create images div container */
				var imagesDiv = my.Helper.createDocumentElement('div','images');

				/* Shift all images into the images div */
				var node, version, src, imageNode;
				var max = my.ImageFlowDiv.childNodes.length;
				for(var index = 0; index < max; index++)
				{
						node = my.ImageFlowDiv.childNodes[index];
						if (node && node.nodeType == 1 && node.nodeName == 'IMG')
						{
								/* Add 'reflect.php?img=' */
								if(my.reflections === true)
								{
										version = (my.reflectionPNG) ? '3' : '2';
										src = my.imagePath+node.getAttribute('src',2);
										src = my.reflectPath+'reflect'+version+'.php?img='+src+my.reflectionGET;
										node.setAttribute('src',src);
								}

								/* Clone image nodes and append them to the images div */
								imageNode = node.cloneNode(true);
								imagesDiv.appendChild(imageNode);
						}
				}

				/* Clone some more images to make a circular animation possible */
				if(my.circular)
				{
						/* Create temporary elements to hold the cloned images */
						var first = my.Helper.createDocumentElement('div','images');
						var last = my.Helper.createDocumentElement('div','images');

						/* Make sure, that there are enough images to use circular mode */
						max = imagesDiv.childNodes.length;
						if(max < my.imageFocusMax)
						{
								my.imageFocusMax = max;
						}

						/* Do not clone anything if there is only one image */
						if(max > 1)
						{
								/* Clone the first and last images */
								var i;
								for(i = 0; i < max; i++)
								{
										/* Number of clones on each side equals the imageFocusMax */
										node = imagesDiv.childNodes[i];
										if(i < my.imageFocusMax)
										{
												imageNode = node.cloneNode(true);
												first.appendChild(imageNode);
										}
										if(max-i < my.imageFocusMax+1)
										{
												imageNode = node.cloneNode(true);
												last.appendChild(imageNode);
										}
								}

								/* Sort the image nodes in the following order: last | originals | first */
								for(i = 0; i < max; i++)
								{
										node = imagesDiv.childNodes[i];
										imageNode = node.cloneNode(true);
										last.appendChild(imageNode);
								}
								for(i = 0; i < my.imageFocusMax; i++)
								{
										node = first.childNodes[i];
										imageNode = node.cloneNode(true);
										last.appendChild(imageNode);
								}

								/* Overwrite the imagesDiv with the new order */
								imagesDiv = last;
						}
				}

				/* Create slideshow button div and append it to the images div */
				if(my.slideshow)
				{
						var slideshowButton = my.Helper.createDocumentElement('div','slideshow');
						imagesDiv.appendChild(slideshowButton);
				}

				/* Create loading text container */
				var loadingP = my.Helper.createDocumentElement('p','loading_txt');
				var loadingText = document.createTextNode(' ');
				loadingP.appendChild(loadingText);

				/* Create loading div container */
				var loadingDiv = my.Helper.createDocumentElement('div','loading');

				/* Create loading bar div container inside the loading div */
				var loadingBarDiv = my.Helper.createDocumentElement('div','loading_bar');
				loadingDiv.appendChild(loadingBarDiv);

				/* Create captions div container */
				var captionDiv = my.Helper.createDocumentElement('div','caption');

				/* Create slider and button div container inside the scrollbar div */
				var scrollbarDiv = my.Helper.createDocumentElement('div','scrollbar');
				var sliderDiv = my.Helper.createDocumentElement('div','slider');
				scrollbarDiv.appendChild(sliderDiv);
				if(my.buttons)
				{
						var buttonPreviousDiv = my.Helper.createDocumentElement('div','previous', 'button');
						var buttonNextDiv = my.Helper.createDocumentElement('div','next', 'button');
						scrollbarDiv.appendChild(buttonPreviousDiv);
						scrollbarDiv.appendChild(buttonNextDiv);
				}

				/* Create navigation div container beneath images div */
				var navigationDiv = my.Helper.createDocumentElement('div','navigation');
				navigationDiv.appendChild(captionDiv);
				navigationDiv.appendChild(scrollbarDiv);

				/* Update document structure and return true on success */
				var success = false;
				if (my.ImageFlowDiv.appendChild(imagesDiv) &&
						my.ImageFlowDiv.appendChild(loadingP) &&
						my.ImageFlowDiv.appendChild(loadingDiv) &&
						my.ImageFlowDiv.appendChild(navigationDiv))
				{
						/* Remove image nodes outside the images div */
						max = my.ImageFlowDiv.childNodes.length;
						for(index = 0; index < max; index++)
						{
								node = my.ImageFlowDiv.childNodes[index];
								if (node && node.nodeType == 1 && node.nodeName == 'IMG')
								{
										my.ImageFlowDiv.removeChild(node);
								}
						}
						success = true;
				}
				return success;
		};


		/* Manage loading progress and call the refresh function */
		this.loadingProgress = function()
		{
				var p = my.loadingStatus();
				if((p < 100 || my.firstCheck) && my.preloadImages)
				{
						/* Insert a short delay if the browser loads rapidly from its cache */
						if(my.firstCheck && p == 100)
						{
								my.firstCheck = false;
								window.setTimeout(my.loadingProgress, 100);
						}
						else
						{
								window.setTimeout(my.loadingProgress, 40);
						}
				}
				else
				{
						/* Hide loading elements */
						document.getElementById(my.ImageFlowID+'_loading_txt').style.display = 'none';
						document.getElementById(my.ImageFlowID+'_loading').style.display = 'none';

						/* Refresh ImageFlow on window resize - delay adding this event for the IE */
						window.setTimeout(my.Helper.addResizeEvent, 1000);

						/* Call refresh once on startup to display images */
						my.refresh();

						/* Only initialize navigation elements if there is more than one image */
						if(my.max > 1)
						{
								/* Initialize mouse, touch and key support */
								my.MouseWheel.init();
								my.MouseDrag.init();
								my.Touch.init();
								my.Key.init();

								/* Toggle slideshow */
								if(my.slideshow)
								{
										my.Slideshow.init();
								}

								/* Toggle scrollbar visibility */
								if(my.slider)
								{
										my.scrollbarDiv.style.visibility = 'visible';
								}
						}
				}
		};


		/* Return loaded images in percent, set loading bar width and loading text */
		this.loadingStatus = function()
		{
				var max = my.imagesDiv.childNodes.length;
				var i = 0, completed = 0;
				var image = null;
				for(var index = 0; index < max; index++)
				{
						image = my.imagesDiv.childNodes[index];
						if(image && image.nodeType == 1 && image.nodeName == 'IMG')
						{
								if(image.complete)
								{
										completed++;
								}
								i++;
						}
				}

				var finished = Math.round((completed/i)*100);
				var loadingBar = document.getElementById(my.ImageFlowID+'_loading_bar');
				loadingBar.style.width = finished+'%';

				/* Do not count the cloned images */
				if(my.circular)
				{
						i = i - (my.imageFocusMax*2);
						completed = (finished < 1) ? 0 : Math.round((i/100)*finished);
				}

				var loadingP = document.getElementById(my.ImageFlowID+'_loading_txt');
				var loadingTxt = document.createTextNode('loading images '+completed+'/'+i);
				loadingP.replaceChild(loadingTxt,loadingP.firstChild);
				return finished;
		};


		/* Cache EVERYTHING that only changes on refresh or resize of the window */
		this.refresh = function()
		{
				/* Cache global variables */
				this.imagesDivWidth = my.imagesDiv.offsetWidth+my.imagesDiv.offsetLeft;
				this.maxHeight = Math.round(my.imagesDivWidth / my.aspectRatio);
				this.maxFocus = my.imageFocusMax * my.xStep;
				this.size = my.imagesDivWidth * 0.5;
				this.sliderWidth = my.sliderWidth * 0.5;
				this.scrollbarWidth = (my.imagesDivWidth - ( Math.round(my.sliderWidth) * 2)) * my.scrollbarP;
				this.imagesDivHeight = Math.round(my.maxHeight * my.imagesHeight);

				/* Change imageflow div properties */
				my.ImageFlowDiv.style.height = my.maxHeight + 'px';

				/* Change images div properties */
				my.imagesDiv.style.height =  my.imagesDivHeight + 'px'; 

				/* Change images div properties */
				my.navigationDiv.style.height =  (my.maxHeight - my.imagesDivHeight) + 'px'; 

				/* Change captions div properties */
				my.captionDiv.style.width = my.imagesDivWidth + 'px';
				my.captionDiv.style.paddingTop = Math.round(my.imagesDivWidth * 0.02) + 'px';

				/* Change scrollbar div properties */
				my.scrollbarDiv.style.width = my.scrollbarWidth + 'px';
				my.scrollbarDiv.style.marginTop = Math.round(my.imagesDivWidth * 0.02) + 'px';
				my.scrollbarDiv.style.marginLeft = Math.round(my.sliderWidth + ((my.imagesDivWidth - my.scrollbarWidth)/2)) + 'px';

				/* Set slider attributes */
				my.sliderDiv.style.cursor = my.sliderCursor;
				my.sliderDiv.onmousedown = function () { my.MouseDrag.start(this); return false;};

				if(my.buttons)
				{
						my.buttonPreviousDiv.onclick = function () { my.MouseWheel.handle(1); };
						my.buttonNextDiv.onclick = function () { my.MouseWheel.handle(-1); };
				}

				/* Set the reflection multiplicator */
				var multi = (my.reflections === true) ? my.reflectionP + 1 : 1;

				/* Set image attributes */
				var max = my.imagesDiv.childNodes.length;
				var i = 0;
				var image = null;
				for (var index = 0; index < max; index++)
				{
						image = my.imagesDiv.childNodes[index];
						if(image !== null && image.nodeType == 1 && image.nodeName == 'IMG')
						{
								this.indexArray[i] = index;

								/* Set image attributes to store values */
								image.url = image.getAttribute('longdesc');
								image.xPosition = (-i * my.xStep);
								image.i = i;

								/* Add width and height as attributes only once */
								if(my.firstRefresh)
								{
										if(image.getAttribute('width') !== null && image.getAttribute('height') !== null)
										{
												image.w = image.getAttribute('width');
												image.h = image.getAttribute('height') * multi;
										}
										else{
												image.w = image.width;
												image.h = image.height;
										}
								}

								/* Check source image format. Get image height minus reflection height! */
								if((image.w) > (image.h / (my.reflectionP + 1)))
								{
										/* Landscape format */
										image.pc = my.percentLandscape;
										image.pcMem = my.percentLandscape;
								}
								else
								{
										/* Portrait and square format */
										image.pc = my.percentOther;
										image.pcMem = my.percentOther;
								}

								/* Change image positioning */
								if(my.imageScaling === false)
								{
										image.style.position = 'relative';
										image.style.display = 'inline';
								}

								/* Set image cursor type */
								image.style.cursor = my.imageCursor;
								i++;
						}
				}
				this.max = my.indexArray.length;

				/* Override dynamic sizes based on the first image */
				if(my.imageScaling === false)
				{
						image = my.imagesDiv.childNodes[my.indexArray[0]];

						/* Set left padding for the first image */
						this.totalImagesWidth = image.w * my.max;
						image.style.paddingLeft = (my.imagesDivWidth/2) + (image.w/2) + 'px';

						/* Override images and navigation div height */
						my.imagesDiv.style.height =  image.h + 'px';
						my.navigationDiv.style.height =  (my.maxHeight - image.h) + 'px'; 
				}

				/* Handle startID on the first refresh */
				if(my.firstRefresh)
				{
						/* Reset variable */
						my.firstRefresh = false;

						/* Set imageID to the startID */
						my.imageID = my.startID-1;
						if (my.imageID < 0 )
						{
								my.imageID = 0;
						}

						/* Map image id range in cicular mode (ignore the cloned images) */
						if(my.circular)
						{	   
								my.imageID = my.imageID + my.imageFocusMax;
						}

						/* Make sure, that the id is smaller than the image count  */
						maxId = (my.circular) ?  (my.max-(my.imageFocusMax))-1 : my.max-1;
						if (my.imageID > maxId)
						{
								my.imageID = maxId;
						}

						/* Toggle glide animation to start ID */
						if(my.glideToStartID === false)
						{
								my.moveTo(-my.imageID * my.xStep);
						}

						/* Animate images moving in from the right */
						if(my.startAnimation)
						{
								my.moveTo(5000);
						}
				}

				/* Only animate if there is more than one image */
				if(my.max > 1)
				{
						my.glideTo(my.imageID);
				}

				/* Display images in current order */
				my.moveTo(my.current);
		};


		/* Main animation function */
		this.moveTo = function(x)
		{
				this.current = x;
				this.zIndex = my.max;

				/* Main loop */
				for (var index = 0; index < my.max; index++)
				{
						var image = my.imagesDiv.childNodes[my.indexArray[index]];
						var currentImage = index * -my.xStep;

						/* Enabled image scaling */
						if(my.imageScaling)
						{
								/* Don't display images that are not conf_focussed */
								if ((currentImage + my.maxFocus) < my.memTarget || (currentImage - my.maxFocus) > my.memTarget)
								{
										image.style.visibility = 'hidden';
										image.style.display = 'none';
								}
								else
								{
										var z = (Math.sqrt(10000 + x * x) + 100) * my.imagesM;
										var xs = x / z * my.size + my.size;

										/* Still hide images until they are processed, but set display style to block */
										image.style.display = 'block';

										/* Process new image height and width */
										var newImageH = (image.h / image.w * image.pc) / z * my.size;
										var newImageW = 0;
										switch (newImageH > my.maxHeight)
										{
												case false:
														newImageW = image.pc / z * my.size;
														break;

												default:
														newImageH = my.maxHeight;
														newImageW = image.w * newImageH / image.h;
														break;
										}

										var newImageTop = (my.imagesDivHeight - newImageH) + ((newImageH / (my.reflectionP + 1)) * my.reflectionP);

										/* Set new image properties */
										image.style.left = xs - (image.pc / 2) / z * my.size + 'px';
										if(newImageW && newImageH)
										{
												image.style.height = newImageH + 'px';
												image.style.width = newImageW + 'px';
												image.style.top = newImageTop + 'px';
										}
										image.style.visibility = 'visible';

										/* Set image layer through zIndex */
										switch ( x < 0 )
										{
												case true:
														this.zIndex++;
														break;

												default:
														this.zIndex = my.zIndex - 1;
														break;
										}

										/* Change zIndex and onclick function of the focussed image */
										switch ( image.i == my.imageID )
										{
												case false:
														image.onclick = function() { my.glideTo(this.i);};
														break;

												default:
														this.zIndex = my.zIndex + 1;
														if(image.url !== '')
														{
																image.onclick = my.onClick;
														}
														break;
										}
										image.style.zIndex = my.zIndex;
								}
						}

						/* Disabled image scaling */
						else
						{
								if ((currentImage + my.maxFocus) < my.memTarget || (currentImage - my.maxFocus) > my.memTarget)
								{
										image.style.visibility = 'hidden';
								}
								else
								{
										image.style.visibility = 'visible';

										/* Change onclick function of the focussed image */
										switch ( image.i == my.imageID )
										{
												case false:
														image.onclick = function() { my.glideTo(this.i);};
														break;

												default:
														if(image.url !== '')
														{
																image.onclick = my.onClick;
														}
														break;
										}
								}	   
								my.imagesDiv.style.marginLeft = (x - my.totalImagesWidth) + 'px';
						}

						x += my.xStep;
				}
		};


		/* Initializes image gliding animation */
		this.glideTo = function(imageID)
		{
				/* Check for jumppoints */
				var jumpTarget, clonedImageID;
				if(my.circular)
				{
						/* Trigger left jumppoint */
						if(imageID+1 === my.imageFocusMax)
						{
								/* Set jump target to the same cloned image on the right */
								clonedImageID = my.max - my.imageFocusMax;
								jumpTarget = -clonedImageID * my.xStep;

								/* Set the imageID to the last image */
								imageID = clonedImageID-1;
						}

						/* Trigger right jumppoint */
						if(imageID === (my.max - my.imageFocusMax))
						{
								/* Set jump target to the same cloned image on the left */
								clonedImageID = my.imageFocusMax-1;
								jumpTarget = -clonedImageID * my.xStep;

								/* Set the imageID to the first image */
								imageID = clonedImageID+1;
						}
				}

				/* Calculate new image position target */
				var x = -imageID * my.xStep;
				this.target = x;
				this.memTarget = x;
				this.imageID = imageID;

				/* Display new caption */
				var caption = my.imagesDiv.childNodes[imageID].getAttribute('alt');
				if (caption === '' || my.captions === false)
				{
						caption = ' ';
				}
				my.captionDiv.innerHTML = caption;

				/* Set scrollbar slider to new position */
				if (my.MouseDrag.busy === false)
				{
						if(my.circular)
						{
								this.newSliderX = ((imageID-my.imageFocusMax) * my.scrollbarWidth) / (my.max-(my.imageFocusMax*2)-1) - my.MouseDrag.newX;
						}
						else
						{
								this.newSliderX = (imageID * my.scrollbarWidth) / (my.max-1) - my.MouseDrag.newX;
						}
						my.sliderDiv.style.marginLeft = (my.newSliderX - my.sliderWidth) + 'px';
				}

				/* Only process if opacity or a multiplicator for the focussed image has been set */
				if(my.opacity === true || my.imageFocusM !== my.defaults.imageFocusM)
				{
						/* Set opacity for centered image */
						my.Helper.setOpacity(my.imagesDiv.childNodes[imageID], my.opacityArray[0]);
						my.imagesDiv.childNodes[imageID].pc = my.imagesDiv.childNodes[imageID].pc * my.imageFocusM;

						/* Set opacity for the other images that are displayed */
						var opacityValue = 0;
						var rightID = 0;
						var leftID = 0;
						var last = my.opacityArray.length;

						for (var i = 1; i < (my.imageFocusMax+1); i++)
						{
								if((i+1) > last)
								{
										opacityValue = my.opacityArray[last-1];
								}
								else
								{
										opacityValue = my.opacityArray[i];
								}

								rightID = imageID + i;
								leftID = imageID - i;

								if (rightID < my.max)
								{
										my.Helper.setOpacity(my.imagesDiv.childNodes[rightID], opacityValue);
										my.imagesDiv.childNodes[rightID].pc = my.imagesDiv.childNodes[rightID].pcMem;
								}
								if (leftID >= 0)
								{
										my.Helper.setOpacity(my.imagesDiv.childNodes[leftID], opacityValue);
										my.imagesDiv.childNodes[leftID].pc = my.imagesDiv.childNodes[leftID].pcMem;
								}
						}
				}

				/* Move the images to the jump target */
				if(jumpTarget)
				{
						my.moveTo(jumpTarget);
				}

				/* Animate gliding to new x position */
				if (my.busy === false)
				{
						my.busy = true;
						my.animate();
				}
		};


		/* Animates image gliding */
		this.animate = function()
		{
				switch (my.target < my.current-1 || my.target > my.current+1)
				{
						case true:
								my.moveTo(my.current + (my.target-my.current)/3);
								window.setTimeout(my.animate, my.animationSpeed);
								my.busy = true;
								break;

						default:
								my.busy = false;
								break;
				}
		};


		/* Used by user events to call the glideTo function */
		this.glideOnEvent = function(imageID)
		{
				/* Interrupt slideshow on mouse wheel, keypress, touch and mouse drag */
				if(my.slideshow)
				{
						my.Slideshow.interrupt();
				}

				/* Glide to new imageID */
				my.glideTo(imageID);
		};


		/* Slideshow function */
		this.Slideshow =
		{
				direction: 1,

				init: function()
				{
						/* Call start() if autoplay is enabled, stop() if it is disabled */
						(my.slideshowAutoplay) ? my.Slideshow.start() : my.Slideshow.stop();	
				},

				interrupt: function()
				{	   
						/* Remove interrupt event */
						my.Helper.removeEvent(my.ImageFlowDiv,'click',my.Slideshow.interrupt);

						/* Interrupt the slideshow */
						my.Slideshow.stop();
				},

				addInterruptEvent: function()
				{
						/* A click anywhere inside the ImageFlow div interrupts the slideshow */
						my.Helper.addEvent(my.ImageFlowDiv,'click',my.Slideshow.interrupt);
				},

				start: function()
				{
						/* Set button style to pause */
						my.Helper.setClassName(my.buttonSlideshow, 'slideshow pause');

						/* Set onclick behaviour to stop */
						my.buttonSlideshow.onclick = function () { my.Slideshow.stop(); };

						/* Set slide interval */
						my.Slideshow.action = window.setInterval(my.Slideshow.slide, my.slideshowSpeed);

						/* Allow the user to always interrupt the slideshow */
						window.setTimeout(my.Slideshow.addInterruptEvent, 100);
				},

				stop: function()
				{
						/* Set button style to play */
						my.Helper.setClassName(my.buttonSlideshow, 'slideshow play');

						/* Set onclick behaviour to start */
						my.buttonSlideshow.onclick = function () { my.Slideshow.start(); };

						/* Clear slide interval */
						window.clearInterval(my.Slideshow.action);
				},

				slide: function()
				{
						var newImageID = my.imageID + my.Slideshow.direction;
						var reverseDirection = false;

						/* Reverse direction at the last image on the right */
						if(newImageID === my.max)
						{
								my.Slideshow.direction = -1;
								reverseDirection = true;
						}

						/* Reverse direction at the last image on the left */
						if(newImageID < 0)
						{
								my.Slideshow.direction = 1;
								reverseDirection = true;
						}

						/* If direction is reversed recall this method, else call the glideTo method */
						(reverseDirection) ? my.Slideshow.slide() : my.glideTo(newImageID);
				}
		};


		/* Mouse Wheel support */
		this.MouseWheel =
		{
				init: function()
				{
						/* Init mouse wheel listener */
						if(window.addEventListener)
						{
								my.ImageFlowDiv.addEventListener('DOMMouseScroll', my.MouseWheel.get, false);
						}
						my.Helper.addEvent(my.ImageFlowDiv,'mousewheel',my.MouseWheel.get);
				},

				get: function(event)
				{
						var delta = 0;
						if (!event)
						{
								event = window.event;
						}
						if (event.wheelDelta)
						{
								delta = event.wheelDelta / 120;
						}
						else if (event.detail)
						{
								delta = -event.detail / 3;
						}
						if (delta)
						{
								my.MouseWheel.handle(delta);
						}
						my.Helper.suppressBrowserDefault(event);
				},

				handle: function(delta)
				{
						var change = false;
						var newImageID = 0;
						if(delta > 0)
						{
								if(my.imageID >= 1)
								{
										newImageID = my.imageID -1;
										change = true;
								}
						}
						else
						{
								if(my.imageID < (my.max-1))
								{
										newImageID = my.imageID +1;
										change = true;
								}
						}

						/* Glide to next (mouse wheel down) / previous (mouse wheel up) image  */
						if(change)
						{
								my.glideOnEvent(newImageID);
						}
				}
		};


		/* Mouse Dragging */
		this.MouseDrag =
		{
				object: null,
				objectX: 0,
				mouseX: 0,
				newX: 0,
				busy: false,

				/* Init mouse event listener */
				init: function()
				{
						my.Helper.addEvent(my.ImageFlowDiv,'mousemove',my.MouseDrag.drag);
						my.Helper.addEvent(my.ImageFlowDiv,'mouseup',my.MouseDrag.stop);
						my.Helper.addEvent(document,'mouseup',my.MouseDrag.stop);

						/* Avoid text and image selection while dragging  */
						my.ImageFlowDiv.onselectstart = function ()
						{
								var selection = true;
								if (my.MouseDrag.busy)
								{
										selection = false;
								}
								return selection;
						};
				},

				start: function(o)
				{
						my.MouseDrag.object = o;
						my.MouseDrag.objectX = my.MouseDrag.mouseX - o.offsetLeft + my.newSliderX;
				},

				stop: function()
				{
						my.MouseDrag.object = null;
						my.MouseDrag.busy = false;
				},

				drag: function(e)
				{
						var posx = 0;
						if (!e)
						{
								e = window.event;
						}
						if (e.pageX)
						{
								posx = e.pageX;
						}
						else if (e.clientX)
						{
								posx = e.clientX + document.body.scrollLeft	 + document.documentElement.scrollLeft;
						}
						my.MouseDrag.mouseX = posx;

						if(my.MouseDrag.object !== null)
						{
								var newX = (my.MouseDrag.mouseX - my.MouseDrag.objectX) + my.sliderWidth;

								/* Make sure, that the slider is moved in proper relation to previous movements by the glideTo function */
								if(newX < ( - my.newSliderX))
								{
										newX = - my.newSliderX;
								}
								if(newX > (my.scrollbarWidth - my.newSliderX))
								{
										newX = my.scrollbarWidth - my.newSliderX;
								}

								/* Set new slider position */
								var step, imageID;
								if(my.circular)
								{
										step = (newX + my.newSliderX) / (my.scrollbarWidth / (my.max-(my.imageFocusMax*2)-1));
										imageID = Math.round(step)+my.imageFocusMax;
								}
								else
								{
										step = (newX + my.newSliderX) / (my.scrollbarWidth / (my.max-1));
										imageID = Math.round(step);
								}
								my.MouseDrag.newX = newX;
								my.MouseDrag.object.style.left = newX + 'px';
								if(my.imageID !== imageID)
								{
										my.glideOnEvent(imageID);
								}
								my.MouseDrag.busy = true;
						}
				}
		};


		/* Safari touch events on the iPhone and iPod Touch */
		this.Touch =
		{
				x: 0,
				startX: 0,
				stopX: 0,
				busy: false,
				first: true,

				/* Init touch event listener */
				init: function()
				{
						my.Helper.addEvent(my.navigationDiv,'touchstart',my.Touch.start);
						my.Helper.addEvent(document,'touchmove',my.Touch.handle);
						my.Helper.addEvent(document,'touchend',my.Touch.stop);  
				},

				isOnNavigationDiv: function(e)
				{
						var state = false;
						if(e.touches)
						{
								var target = e.touches[0].target;
								if(target === my.navigationDiv || target === my.sliderDiv || target === my.scrollbarDiv)
								{
										state = true;
								}
						}
						return state;
				},

				getX: function(e)
				{
						var x = 0;
						if(e.touches)
						{
								x = e.touches[0].pageX;
						}
						return x;
				},

				start: function(e)
				{
						my.Touch.startX = my.Touch.getX(e);
						my.Touch.busy = true;
						my.Helper.suppressBrowserDefault(e);
				},

				isBusy: function()
				{
						var busy = false;
						if(my.Touch.busy)
						{
								busy = true;
						}
						return busy;
				},

				/* Handle touch event position within the navigation div */
				handle: function(e)
				{
						if(my.Touch.isBusy && my.Touch.isOnNavigationDiv(e))
						{
								var max = (my.circular) ? (my.max-(my.imageFocusMax*2)-1) : (my.max-1);
								if(my.Touch.first)
								{
										my.Touch.stopX = (max - my.imageID) * (my.imagesDivWidth / max);
										my.Touch.first = false;
								}
								var newX = -(my.Touch.getX(e) - my.Touch.startX - my.Touch.stopX);

								/* Map x-axis touch coordinates in range of the ImageFlow width */
								if(newX < 0)
								{
										newX = 0;
								}
								if(newX > my.imagesDivWidth)
								{
										newX = my.imagesDivWidth;
								}

								my.Touch.x = newX;

								var imageID = Math.round(newX / (my.imagesDivWidth / max));
								imageID = max - imageID;
								if(my.imageID !== imageID)
								{
										if(my.circular)
										{
												imageID = imageID + my.imageFocusMax;
										}
										my.glideOnEvent(imageID);
								}
								my.Helper.suppressBrowserDefault(e);
						}
				},

				stop: function()
				{
						my.Touch.stopX = my.Touch.x;
						my.Touch.busy = false;
				}
		};


		/* Key support */
		this.Key =
		{
				/* Init key event listener */
				init: function()
				{
						document.onkeydown = function(event){ my.Key.handle(event); };
				},

				/* Handle the arrow keys */
				handle: function(event)
				{
						var charCode  = my.Key.get(event);
						switch (charCode)
						{
								/* Right arrow key */
								case 39:
										my.MouseWheel.handle(-1);
										break;

								/* Left arrow key */
								case 37:
										my.MouseWheel.handle(1);
										break;
						}
				},

				/* Get the current keycode */
				get: function(event)
				{
						event = event || window.event;
						return event.keyCode;
				}
		};


		/* Helper functions */
		this.Helper =
		{
				/* Add events */
				addEvent: function(obj, type, fn)
				{
						if(obj.addEventListener)
						{
								obj.addEventListener(type, fn, false);
						}
						else if(obj.attachEvent)
						{
								obj["e"+type+fn] = fn;
								obj[type+fn] = function() { obj["e"+type+fn]( window.event ); };
								obj.attachEvent( "on"+type, obj[type+fn] );
						}
				},

				/* Remove events */
				removeEvent: function( obj, type, fn )
				{
						if (obj.removeEventListener)
						{
								obj.removeEventListener( type, fn, false );
						}
						else if (obj.detachEvent)
						{
								/* The IE breaks if you're trying to detach an unattached event http://msdn.microsoft.com/en-us/library/ms536411(VS.85).aspx */
								if(obj[type+fn] === undefined)
								{
										alert('Helper.removeEvent » Pointer to detach event is undefined - perhaps you are trying to detach an unattached event?');
								}
								obj.detachEvent( 'on'+type, obj[type+fn] );
								obj[type+fn] = null;
								obj['e'+type+fn] = null;
						}
				},

				/* Set image opacity */
				setOpacity: function(object, value)
				{
						if(my.opacity === true)
						{
								object.style.opacity = value/10;
								object.style.filter = 'alpha(opacity=' + value*10 + ')';
						}
				},

				/* Create HTML elements */
				createDocumentElement: function(type, id, optionalClass)
				{
						var element = document.createElement(type);
						element.setAttribute('id', my.ImageFlowID+'_'+id);
						if(optionalClass !== undefined)
						{
								id += ' '+optionalClass;
						}
						my.Helper.setClassName(element, id);
						return element;
				},

				/* Set CSS class */
				setClassName: function(element, className)
				{
						if(element)
						{
								element.setAttribute('class', className);
								element.setAttribute('className', className);
						}
				},

				/* Suppress default browser behaviour to avoid image/text selection while dragging */
				suppressBrowserDefault: function(e)
				{
						if(e.preventDefault)
						{
								e.preventDefault();
						}
						else
						{
								e.returnValue = false;
						}
						return false;
				},

				/* Add functions to the window.onresize event - can not be done by addEvent */
				addResizeEvent: function()
				{
						var otherFunctions = window.onresize;
						if(typeof window.onresize != 'function')
						{
								window.onresize = function()
								{
										my.refresh();
								};
						}
						else
						{
								window.onresize = function(){
										if (otherFunctions)
										{
												otherFunctions();
										}
										my.refresh();
								};
						}
				}
		};
}

/* DOMContentLoaded event handler - by Tanny O'Haley [4] */
var domReadyEvent =
{
		name: "domReadyEvent",
		/* Array of DOMContentLoaded event handlers.*/
		events: {},
		domReadyID: 1,
		bDone: false,
		DOMContentLoadedCustom: null,

		/* Function that adds DOMContentLoaded listeners to the array.*/
		add: function(handler)
		{
				/* Assign each event handler a unique ID. If the handler has an ID, it has already been added to the events object or been run.*/
				if (!handler.$$domReadyID)
				{
						handler.$$domReadyID = this.domReadyID++;

						/* If the DOMContentLoaded event has happened, run the function. */
						if(this.bDone)
						{
								handler();
						}

						/* store the event handler in the hash table */
						this.events[handler.$$domReadyID] = handler;
				}
		},

		remove: function(handler)
		{
				/* Delete the event handler from the hash table */
				if (handler.$$domReadyID)
				{
						delete this.events[handler.$$domReadyID];
				}
		},

		/* Function to process the DOMContentLoaded events array. */
		run: function()
		{
				/* quit if this function has already been called */
				if (this.bDone)
				{
						return;
				}

				/* Flag this function so we don't do the same thing twice */
				this.bDone = true;

				/* iterates through array of registered functions */
				for (var i in this.events)
				{
						this.events[i]();
				}
		},

		schedule: function()
		{
				/* Quit if the init function has already been called*/
				if (this.bDone)
				{
						return;
				}

				/* First, check for Safari or KHTML.*/
				if(/KHTML|WebKit/i.test(navigator.userAgent))
				{
						if(/loaded|complete/.test(document.readyState))
						{
								this.run();
						}
						else
						{
								/* Not ready yet, wait a little more.*/
								setTimeout(this.name + ".schedule()", 100);
						}
				}
				else if(document.getElementById("__ie_onload"))
				{
						/* Second, check for IE.*/
						return true;
				}

				/* Check for custom developer provided function.*/
				if(typeof this.DOMContentLoadedCustom === "function")
				{
						/* if DOM methods are supported, and the body element exists (using a double-check
						including document.body, for the benefit of older moz builds [eg ns7.1] in which
						getElementsByTagName('body')[0] is undefined, unless this script is in the body section) */
						if(typeof document.getElementsByTagName !== 'undefined' && (document.getElementsByTagName('body')[0] !== null || document.body !== null))
						{
								/* Call custom function. */
								if(this.DOMContentLoadedCustom())
								{
										this.run();
								}
								else
								{
										/* Not ready yet, wait a little more. */
										setTimeout(this.name + ".schedule()", 250);
								}
						}
				}
				return true;
		},

		init: function()
		{
				/* If addEventListener supports the DOMContentLoaded event.*/
				if(document.addEventListener)
				{
						document.addEventListener("DOMContentLoaded", function() { domReadyEvent.run(); }, false);
				}

				/* Schedule to run the init function.*/
				setTimeout("domReadyEvent.schedule()", 100);

				function run()
				{
						domReadyEvent.run();
				}

				/* Just in case window.onload happens first, add it to onload using an available method.*/
				if(typeof addEvent !== "undefined")
				{
						addEvent(window, "load", run);
				}
				else if(document.addEventListener)
				{
						document.addEventListener("load", run, false);
				}
				else if(typeof window.onload === "function")
				{
						var oldonload = window.onload;
						window.onload = function()
						{
								domReadyEvent.run();
								oldonload();
						};
				}
				else
				{
						window.onload = run;
				}

				/* for Internet Explorer */
				/*@cc_on
						@if (@_win32 || @_win64)
						document.write("&lt;script id=__ie_onload defer src=\"//:\"><\/script>");
						var script = document.getElementById("__ie_onload");
						script.onreadystatechange = function()
						{
								if (this.readyState == "complete")
								{
										domReadyEvent.run(); // call the onload handler
								}
						};
						@end
				@*/
		}
};

var domReady = function(handler) { domReadyEvent.add(handler); };
domReadyEvent.init();


/* Create ImageFlow instances when the DOM structure has been loaded */
domReady(function()
{
		var instanceOne = new ImageFlow();
		instanceOne.init({ ImageFlowID:'myImageFlow' });
});[/codebox]

html...

[codebox]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ImageFlow</title>
<meta name="robots" content="index, follow, noarchive" />
<link rel="stylesheet" href="style.css" type="text/css" />

<link rel="stylesheet" href="imageflow.packed.css" type="text/css" />
&lt;script type="text/javascript" src="imageflow.js"></script>

</head>
<body>
<h1>ImageFlow</h1>
<div id="myImageFlow" class="imageflow">
<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 1" id="img1" />
<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 2" id="img2" />
<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 3" id="img3" />
<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 4" id="img4" />
<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 5" id="img5" />
<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 6" id="img6" />
<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 7" id="img7" />
<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 8" id="img8" />
<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 9" id="img9" />
<img src="img/img1.png" longdesc="img/img1.png" width="400" height="300" alt="Image 10" id="img10" />
<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 11" id="img11"/>
<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 12" id="img12"/>
<img src="img/img2.png" longdesc="img/img2.png" width="300" height="400" alt="Image 13" id="img13"/>
<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 14" id="img14"/>
<img src="img/img3.png" longdesc="img/img3.png" width="400" height="400" alt="Image 15" id="img15"/>
</div>

</body>
</html>

Editado Outubro 26, 2012 por Renatobc

[MateusV.]

Faz assim:

<img src='URL_DA_IMAGEM' onclick='document.location="LINK_PRA_REDIRECIONAR;"' />

[Renatobc]

Faz assim:

<img src='URL_DA_IMAGEM' onclick='document.location="LINK_PRA_REDIRECIONAR;"' />

Tentei, não funcionou :/ o máximo que consegui foi todas as imagens ir para um só link usando isso:

onClick:        function () {window.open('http://www.link.com.br/#','_self');},