SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scriptaculous fade images in onload

    Hi,

    Does anyone know how I can get the following three images to fade in once the page has loaded? I can't seem to find out anywhere on the scriptaculous site / Google!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    <script type="text/JavaScript" src="js/prototype.js"></script>
    <script type="text/JavaScript" src="js/scriptaculous.js"></script>
    
    </head>
    
    <body>
    <img src="img/home_1.jpg" title="" alt="" id="img1" />
    <img src="img/home_2.jpg" title="" alt="" id="img2" />
    <img src="img/home_3.jpg" title="" alt="" id="img3" />
    </body>
    </html>

    Thanks for any pointers...

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use jQuery, it's more compact and you don't even need scriptaculous.
    Give your images a classname like 'fading-image' or something. And put this in your stylesheet:
    Code CSS:
    img.fading-image {
        visibility:hidden;
    _visibility /**/:/**/visible; /* For IE5.01 so the images are shown */
    }

    This is all the JavaScript you need:
    Code JavaScript:
    $(window).bind('load', function(){$('img.fading-image').css({visibility:'visible', opacity:0.01}).fadeTo(2000,1)});

    You might have a little problem when using this animation on inline images, so I changed a line in jquery so display:block is set for all animations (default in jquery) except for opacity transitions.

    Here's the example: http://fish4code.net/opacity/
    And you can download my changed, already compressed, version of jquery from http://fish4code.net/opacity/jquery.js
    Last edited by hexburner; Jun 13, 2007 at 17:18.
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks hexburner. An alternative approach, but it works nonetheless. Thanks.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for reference, with scripty:
    You'd want to set: style="display:none;" in the html, and then:
    Code:
    Event.observe(window,'load',function() {
     $$('#img1, #img2, #img3').invoke('appear');
    });

  5. #5
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you set an element's style to display:none, you'll see that the image is entirely gone. When the page has finished loading (including images), the content at the sides of the images will be pushed aside or down, because at first the image was completely gone. By using visibibility:hidden and a IE5.01 hack you'll always have the space you need, without pushing content out of the way.
    FOR SALE: 1 set of morals, never used, will sell cheap


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
  •