[SB65]

To confirm, you only need jQuery and switchGalleryImage for the fade effect. The easing and UI are used for other purposes on that page. Should have made that clearer.

My code crossfades the images into each other - looks like you want to fade out the old and then fade in the new. Have a try making your code:

$(document).ready(function(){ 

$("#gallery_thumbnails img").click(function() {
		//read the new values for the image and the title
		newTitle = $(this).attr("alt");
		newCaption = $(this).attr("caption");		
		newImage = $(this).attr("src").replace("T.jpg","P.jpg");
		
		if (newImage != $(".topImage").attr("src")){//don't fade in and out if it's the same image - webkit gets upset
		
			//
			//$('.topImage').after('<img class="newImage" src="'+newImage+'" alt="'+newTitle+'" title="'+newTitle+'" />');
		
			//fade the top image out, replace and fade the new one in
			$(".topImage").fadeOut(500,function() {
				$('.topImage').after('<img class="newImage" src="'+newImage+'" alt="'+newTitle+'" title="'+newTitle+'" />');
				$(".topImage").remove();
				$(".newImage").removeClass('newImage').stop(true).addClass('topImage').hide();
			    $(".topImage").fadeIn('slow');
			}) ;
			

			
			//fade the caption out, replace and fade the new one in
			$("#gallerycaption").fadeOut('fast',function() {
			$("#gallerycaption").html(newCaption);
			
			$("#gallerycaption").fadeIn('fast');
			});
			return false;
		}
})

});

This seems to work OK - see test page here - although it also helps if the large images are preloaded - as otherwise you can see them loading instead of the fade in. I did this on hat page by including this javascript:

$(document).ready(function () {
    //preload the images
	var images = [<?php echo $allimagestring?>];
	var imagearray = [];
	$(images).each(function(key, value) {
	
		var img = new Image();
		imagearray[key] = $(img).attr('src', value);
	
	
	});
})

where $allimagestring is just a list of all the (large) images.