Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Help with fading an image in Java Script

Posted on 2008-11-11
20
Medium Priority
?
299 Views
Last Modified: 2012-06-21
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 ?
0
Comment
Question by:OhNowISee
  • 10
  • 8
19 Comments
 
LVL 3

Expert Comment

by:JorisW
ID: 22930717
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
 

Author Comment

by:OhNowISee
ID: 22930848
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
 
LVL 3

Expert Comment

by:JorisW
ID: 22931229
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:OhNowISee
ID: 22932376
Hi Joris

I used your code and all is good.

How can I fade in an image on load then
0
 
LVL 3

Expert Comment

by:JorisW
ID: 22933807
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
 

Author Comment

by:OhNowISee
ID: 22937913
Way over my head !

Where do I specify the name of the image ?

Can u comment it please
0
 
LVL 3

Expert Comment

by:JorisW
ID: 22938047
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
 

Author Comment

by:OhNowISee
ID: 22938237
doesn't seem to be working ?
0
 
LVL 3

Accepted Solution

by:
JorisW earned 2000 total points
ID: 22943657
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
 

Author Comment

by:OhNowISee
ID: 22985757
Hmm your example works fine but not when i paste the code into my aspx page.

Any ideas why ?
0
 
LVL 3

Expert Comment

by:JorisW
ID: 22987364
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
 

Author Comment

by:OhNowISee
ID: 22987416
That's wierd..

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

Any ideas ?
0
 
LVL 3

Expert Comment

by:JorisW
ID: 22988011
Sounds like your browser cache. Ctrl-F5 forces Firefox / IE to redownload your page, css, js, images, whatnot
0
 

Author Comment

by:OhNowISee
ID: 22992643
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
 
LVL 3

Expert Comment

by:JorisW
ID: 22998036
If it is a new visitor no need. How long it stays in the cache of old visitors depends on your server configuration.
0
 

Author Comment

by:OhNowISee
ID: 23002121
The image is on the Home page so it really needs to be cleare.

Any ideas ?
0
 

Author Comment

by:OhNowISee
ID: 23011571
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
 

Author Comment

by:OhNowISee
ID: 23027230
Help!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35763032
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question