Question

I’m putting the final touch to my friend’s portfolio website (using wordpress) but I’m having an issue with a simple JQuery page transition fadeIn effect.

Here’s the link to the site: (warning: NSFW) http://www.alexdebrabant.com/front/

In the “PROJECTS” section, I’m using a the Jquery cycle to create a slideshow with all the pictures in the post. It’s working great.
But in the “PORTRAITS” section, the situation is a bit different as I only have one picture per post. Therefore, the PREV NEXT buttons takes the visitor to a new post, hence a new page has to load every time.
My idea was to try to mimic the slideshow from the “PROJECTS” section using some sort of fade transition.
At the moment, I only have a very basic fadeIn effect.
My problem is that, unless the images are cached, the fadeIn effect fires too soon, before the image is done loading.

I’m a newbie with JQuery and I suspect there must be an easy solution but I can’t seem to find it.

Also, if any of you know of a Jquery effect that would better mimic / replicate the slideshow from the “PROJECTS” section, that would also be great. Perhaps a page cross fade effect (if that exists) or a fade out / fade in maybe.

Any help would be greatly appreciated.

Here’s the code:

<!-- contentload -->
<script type="text/javascript">
$(document).ready(function(){

    $('#content').fadeIn(500);

});
</script>
<!-- contentload -->

<style>
#content {display: none;}
</style>

Cheers!

Thom

Answer 1

Use $(window).load() or $('img').load() instead of $(document).ready(). The whole point of document.ready is that it fires when the DOM is ready for querying, not when the entire page has loaded.