Help with fading an image in Java Script

I've borrowed this code

http://javascript.internet.com/miscellaneous/fading-slide-show.html

Can someone tell me how to modify the effect so that it fades to white before fading in a new image ?

Also any ideas how it can be adapted so that the images on my page 'fade up' when loaded ?
OhNowISeeAsked:
Who is Participating?
 
JorisWConnect With a Mentor Commented:
Works here, here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>jQuery</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script type="text/javascript">
		$(function() // images are not loaded at this point
		{
		        var imgs = $('img');
		        imgs.css('visibility', 'hidden');
		        imgs.bind('load', function(e)
		        {
		                var jThis = $(this); 
		                jThis.fadeIn(6000);
		                jThis.css('visibility', '');
		        });
		});
		</script>
	</head>
	<body>
		<img src="http://www.experts-exchange.com/expert/images/logo.jpg" width="286" height="46">
	</body> 
</html>

Open in new window

0
 
JorisWCommented:
The example you posted only works in Internet Explorer, if you want to do this crossbrowser, take a look at something like jQuery http://jquery.com/

Here is a nice exampe(+script): http://www.malsup.com/jquery/cycle/lite/

If you load jQuery + Cycle lite plugin into your page your code would look something like:


[SNIP]
<head>
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        sync: 0
    });
});
</script>
[SNIP]
</head>
<body>
[SNIP]
<div id="slideshow">
    <img src="1.jpg" width="200" height="200" />
    <img src="i2.jpg" width="200" height="200" />
    <img src="h3.jpg" width="200" height="200" />
</div>
[SNIP]
</body>

Open in new window

0
 
OhNowISeeAuthor Commented:
so do I add...

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.lite.js"></script>

before your code ?


What about...

Can someone tell me how to modify the effect so that it fades to white before fading in a new image ?

Also any ideas how it can be adapted so that the images on my page 'fade up' when loaded ?
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
JorisWCommented:
Yes.
sync: 0 in my example fades it to white first.


I personally do not know how do modify the code you gave to do this, I have no experience with IE's filter.

You want all your images to fade in when your page is loaded?
0
 
OhNowISeeAuthor Commented:
Hi Joris

I used your code and all is good.

How can I fade in an image on load then
0
 
JorisWCommented:
Try this:
$(function() // images are not loaded at this point
{
	var imgs = $('img');
	imgs.css('visibility', 'hidden');
	imgs.bind('load', function(e)
	{
		var jThis = $(this); 
		jThis.fadeIn("slow");
		jThis.css('visibility', '');
	});
});

Open in new window

0
 
OhNowISeeAuthor Commented:
Way over my head !

Where do I specify the name of the image ?

Can u comment it please
0
 
JorisWCommented:
That example applies it to all images that already were on the page.

So a simple <img src="blah.jpg"> will have the effect.
0
 
OhNowISeeAuthor Commented:
doesn't seem to be working ?
0
 
OhNowISeeAuthor Commented:
Hmm your example works fine but not when i paste the code into my aspx page.

Any ideas why ?
0
 
JorisWCommented:
Look at the generated source in your browser (Ctrl-U in firefox) and try to find out where it goes wrong. Also look for javascript errors
0
 
OhNowISeeAuthor Commented:
That's wierd..

I closed the project down for the day.  went back to check your idea and it worked !?

Any ideas ?
0
 
JorisWCommented:
Sounds like your browser cache. Ctrl-F5 forces Firefox / IE to redownload your page, css, js, images, whatnot
0
 
OhNowISeeAuthor Commented:
yes ctrl-F5 makes it work again but how can I ensure that it always works on a users PC without them having to lear the cache ?
0
 
JorisWCommented:
If it is a new visitor no need. How long it stays in the cache of old visitors depends on your server configuration.
0
 
OhNowISeeAuthor Commented:
The image is on the Home page so it really needs to be cleare.

Any ideas ?
0
 
OhNowISeeAuthor Commented:
I'm also havin problems with the image's location.

I have them in the slideshow DIV in the top left hand corner of a table but the image displays in the center of the page ?
0
 
OhNowISeeAuthor Commented:
Help!
0
 
Michel PlungjanIT ExpertCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.