jQuery/z-index issue with displaying GIFs

[crmpicco]

Hi,

I am having an issue with the 'Click To Zoom' image which should appear at the bottom left hand corner of the main image on this page - http://bit.ly/4z8dNm

If you click the image, there will be a 'Click To Zoom Out' image appear, then if you click again the 'Click To Zoom' image WILL appear. But this should appear on initial load. The image is http://bit.ly/4o2WCj - so it's definately on the server.

It doesn't appear to be browser specific, it happens on FF and IE.

My jQuery that I believe may be the point to look at is:

jQuery('#large_look').toggle(function(e){
	
		imgBig = jQuery('.zoomin_container IMG');
		zoomBtn = jQuery('.zoom_image');
		ratio = (imgBig.width() - imgSmall.width()) / imgSmall.width();
		
		imgBig.css({
		'width' : 320,
		'height' : 422,
		'top':0,
		'left':0,
		'z-index' : 99
		});
		
		imgBig.animate({
		'left'		: (0 - ((e.pageX - imgSmallOffsetLeft) * ratio)) + 'px',
		'top'		: (0 - ((e.pageY - imgSmallOffsetTop) * ratio)) + 'px',
		'width'		: 1896,
		'height'	: 2500 
		}, 'slow');
		
		
		zoomBtn.css({
			'color'			: 'blue',
			'background'	: 'url(/assets/lookbook/Zoom_Out_btn.gif)',
			'z-index'		: 100
		});
		
		isZoomed = true;
		return false;
		
		},function(){
		
		isZoomed = false;
		zoomBtn.css({
			'background'	: 'url(/assets/lookbook/Zoom_In_btn.gif)'			
		});
		
		imgBig.fadeOut("slow");
	});

Any help appreciated.

Cheers,
Picco