Scriptaculous fade images in onload

Printable View

Jun 13, 2007, 10:08
danwednesday

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...
Jun 13, 2007, 17:47
hexburner
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
Jun 14, 2007, 04:51
danwednesday

Thanks hexburner. An alternative approach, but it works nonetheless. Thanks.
Jun 14, 2007, 05:01
gjones

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'); });
Jun 14, 2007, 05:55
hexburner

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.