SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting images to fade out

    I downloaded an image gallery and even managed to get the images to fade in nicely but they don't fade out, they just dissapear. So, I thought I would post here in the hope that someone can help me out because this is way out of my depth.
    The gallery was this one from codrops...
    http://tympanus.net/codrops/2010/05/...th-jquery-php/
    This is the code which (I think) needs altered, but I have tried everything I could think of...

    Code:
    function loadPhoto($thumb,cursorClass){
    current	 = $thumb.index()+1;
    $('#imageWrapper').empty();
    $('#loading').show();
    $('<img id="displayed" title="'+$thumb.attr('title')+'" class="'+cursorClass+'" style="display:none;"/>').load(function(){
    var $this = $(this);
    $('#loading').hide();
    resize($this,0);
    if(!$('#imageWrapper').find('img').length){
    $('#imageWrapper').append($this.fadeIn(4000));            $('#description').html($this.attr('title'));
    }
    }).attr('src',$thumb.attr('alt'));
    }
    Any pointers, or even wild guesses would be really appreciated. Thanks in advance

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Hlforr View Post
    I downloaded an image gallery and even managed to get the images to fade in nicely but they don't fade out, they just dissapear.
    This is what's responsible for that.

    Code javascript:
    $('#imageWrapper').empty();

    You could try something like this, where the image is faded out and the rest of the work is performed as a callback to the fade out method:

    Code javascript:
    $('#imageWrapper img').fadeOut(500, function () {
        $('#imageWrapper').empty();
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. I have managed to get a step closer and get the images to fade out. Problem is, they then don't fade in

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Hlforr View Post
    Thanks for your reply. I have managed to get a step closer and get the images to fade out. Problem is, they then don't fade in
    What it should look like is something like this:

    Code javascript:
    $('#imageWrapper img').fadeOut(500, function () {
        $('#imageWrapper').empty();
        $('#loading').show();
        $('<img id="displayed" title="'+$thumb.attr('title')+'" class="'+cursorClass+'" style="display:none;"/>').load(function(){
            var $this = $(this);
            $('#loading').hide();
            resize($this,0);
            if(!$('#imageWrapper').find('img').length){
                $('#imageWrapper').append($this.fadeIn(4000));
                $('#description').html($this.attr('title'));
            }
        }).attr('src',$thumb.attr('alt'));
    });

    The only difference between that code and the code you posted earlier, is that most of your code is contained inside of the fadeOut callback function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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