Forums

Fade in all images on load page

Permalink
Hi,

Here's something for you. I Got a client who wants all images to be fading in when the page loads. I think this should be possible with javascript?

I found a script wich does exactly what i want.
http://clagnut.com/sandbox/imagefades/...

But where should i put this script?

I'me not that great at javascript so who can help me out?
Frisbeeld
 
jordanlev replied on at Permalink Reply
jordanlev
You want to put the javascript in a file (call it "imagefade.js", for example), and put that file inside your theme's folder. If you don't know where your theme's folder is, tell me the name of the theme you're using and I can probably reply back with the location.

Then, at the top of your theme's page templates, you want to add this code (inside the html <head> section):
<script type="text/javascript" src="<?php print $this->getThemePath(); ?>/imagefade.js"></script>

I can't tell you exactly where to put this because it goes in different places depending on how the theme is set up (but again, if you reply with the theme name I can probably respond back with the proper location).

Good luck!

-Jordan Lev
Frisbeeld replied on at Permalink Reply
Frisbeeld
Tried it with this function:
<script type="text/javascript">
// fade in images already loaded:
$('..ccm-image-block img').hide().load(function () {
        $(this).fadeIn(1000);
});
</script>

But putted this just between the head codes.
Doesn't work... So what you're telling me is that when i put this in a javascript file and link it it wil work?

Or is my javascript just crap=P
jordanlev replied on at Permalink Best Answer Reply
jordanlev
Your javascript is just crap ;)
Not a bad start, though. Here's what you want to fix...

First of all, you only want a single period before "ccm-image-block" (you have two -- it should be '.ccm-image-block img', NOT '..ccm-image-block img').

Also, I think the .load() function doesn't do what you think it does (?) -- if you check the jquery documentation you'll see that it is meant for retrieving data on the server, not for loading an image. You already have the image loaded by virtue of it being in your html.

Finally, for various reasons having to do with the way different browsers load pages, it's best to put any code that you want to run on page load in jquery's $(document).ready() function (for more details seehttp://docs.jquery.com/Tutorials:Introducing_$(document).ready()... ).

So I think what you want is something like this:
<script type="text/javascript">
// fade in images already loaded:
$(document).ready(function() {
    $('.ccm-image-block img').hide().fadeIn(1000);
});
</script>


Hope that helps!

-Jordan