I recently was set a task of presenting a SharePoint website demo through the use of a series of screenshots as we could not directly access the server from the outside world to show to clients.

It seemed a simple task; I'd create a series of screenshots throughout the site then tie them all together using hotspots to simulate navigation and other interactivity. In addition it made sense to make use of the jQuery Javascript Library to add a bit of polish to the demo.

However after taking my screenshots and constructing my hotspots I found that there really wasn't anything about creating nice transitions between images currently available, they were all slideshow plugins or didn't really do what I wanted and they all seemed overly complicated.

With this in mind I produced the following flexible code to give me a "image transition" system integrating with a series of hotspots:

$(document).ready(function(){
	
	//Binds to hotspots
	$("area").bind('click',function(e){
		e.preventDefault();
		var targetimg = $(this).attr('href');
		$("img[src$='" + targetimg + "']").css('z-index','1').show();

		$(this).parent().prev('img').stop().animate({
				opacity: 0
			 }, 300, function(){
							
				$("img[src$='" + targetimg + "']").css('z-index','2').addClass('active');	
				//Filter added as an afterthought for IE6, I haven't the foggiest if it works
				$(this).removeClass('active').hide().css('z-index','0').css('opacity','1').css('filter','alpha(opacity=100)');  
		 });
			

	});
		
	//Added an additional home button, only slightly different code, this could probably be done more generically as part of the above
	$("#homebtn a").bind('click',function(e){
		e.preventDefault();
		var targetimg = $(this).attr('href');
		$("img[src$='" + targetimg + "']").css('z-index','1').show();
		$(".active").stop().animate({
				opacity: 0
			, 300, function(){
							
			$("img[src$='" + targetimg + "']").css('z-index','2').addClass('active');
			$(this).removeClass('active').hide().css('z-index','0').css('opacity','1').css('filter','alpha(opacity=100)'); 
		});
	});
});

I have attached a sample project using this methodology; I have also added a loader for the look of the things (large images can take a while to load!).

Download Image_Transition_jQuery_Example.zip (jQuery Image Transition Example) or see it in action here.