Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts

    jQuery fadeIn/fadeOut fails first time only in Opera

    I've built an image gallery using jQuery: here.

    Standard stuff: when one of the small images on the right is clicked, I'm using jQuery to fade the old image out and the new one in. Because there are a lot of images, and even with a preloader they may all not have loaded before someone clicks, I'm waiting until the new image loads before fading back in.

    This all works fine in FF3.6, IE7/8, Safari and Chrome....

    On Opera 9 and 10, the first time one of the small images is clicked after the page loads the new image does not fade in. Any subsequent clicks are fine. Been messing about with this for a while and can't think of anything to try. Any suggestions?

    Here's the code:

    Code:
    $(document).ready(function(){ 
    
    $("#gallery_thumbnails img").click(function() {
    		//read the new values for the image and the title
    		$newTitle = $(this).attr("alt");									
    		$newImage = $(this).attr("src").replace("/thumbnails","");
    		
    		if ($newImage != $("#largeimg").attr("src")){//don't fade in and out if it's the same image - webkit gets upset
    		
    			//fade the image out, replace and fade the new one in
    			$("#largeimg").fadeOut('fast',function() {
    				$("#largeimg").attr("src",$newImage);
    				//don't fade in until the new image has loaded
    				$("#largeimg").load(function(){
    					$("#largeimg").fadeIn('fast');
    				});
    			}) ;
    			
    			//fade the caption out, replace and fade the new one in
    			$("#gallerycaption").fadeOut('fast',function() {
    			$("#gallerycaption").html($newTitle);
    			$("#gallerycaption").fadeIn('fast');
    			});
    			//update the alt and title on the new image
    			$("#largeimg").attr("alt",$newTitle);
    			$("#largeimg").attr("title",$newTitle);
    			return false;
    		}
    })
    
    });
    EDIT: On further investigation it looks as though the .load method doesn't fire in Opera if the image is already cached. I can't say I'm quite happy with this being the source of the problem, since there is no problem in Opera if images are clicked more than once - in which case they'd be cached... Anyway, I originally introduced the check because IE seemed to be slow doing the preload. Turns out IE wasn't doing the preloas at all.....I've now fixed this, sheesh, so don't need the check here. Thanks for reading anyway....
    Last edited by SB65; 06-09-2010 at 03:16 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •