Articles

Multiple Image Cross Fade

7 Aug 2009 / 244 comments

Before we start, take a look at the live demo or download the complete source code with examples from here.

Getting Started

What we want to do first is to create mark-up for the content. Like this:

01.
02.
03.
04.
05.
06.

<div class="container">
        <img src="bmw_3.jpg" alt="" />
        <img src="bmw_2.jpg" alt="" />
        <img src="bmw_1.jpg" alt="" />
        <span><a href="javascript:;">Read more</a> BMW Gran Turismo</span>
</div>

As you see, images are placed in reverse order as they will be absolute positioned and the last one will be visible first. We've used a div for container here, but we could just as easily use li or span elements.

We also need some CSS for layout and basic styling for captions.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

.container {
        position: relative;
        width: 480px;       
        height: 360px;
        margin: 0 auto;
}
 
.container img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
}
 
.container span {
        position: absolute;
        top: 20px;
        left: 10px; 
        width: 440px;
        padding: 10px;
        background: url('bg.png');
        color: #FFF;
        z-index: 11;
}
 
.container span a {
        float: right;
        color: #FFF;
        font-size: 12px;
}

Take notice of z-index for images, we will manipulate it to create continuous loop effect. Now, with our HTML and CSS in place, it's time for the fun stuff. Here's the JavaScript code for creating fading, we'll go through it in detail afterwards.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.

$(".container img:first-child").addClass('last');
 
$(".container img").click(function() {
        $(this).fadeOut('normal', function() {
                if ( $(this).hasClass('last') ) {
                        $("img", $(this).parent()).css('z-index', 10);
                } else {
                        $(this).css('z-index', 9)
                }
                $(this).show();   
        });
});

First, we add class last to the first child of each container (this will help us later). Next, we add click event for each image. When the user clicks on the image, it starts fading-out. When animation completes, we check if it has class last. If so - we reset z-index for each image in the container, otherwise we set lower z-index for this image. Finally, we reset opacity; it still will not be visible as it now has lower z-index.

Adding tooltip

Next step is to add tooltip indicating to click for next image. There are no element for tooltips inside containers, we will add them dynamically instead.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

// show tooltip when the mouse is moved over container
$(".container").mouseenter(function() {
        $(".tooltip", this).show();
 
}).mousemove(function(e) {
        // update position
        $(".tooltip", this).css({
                'top'      : e.pageY - this.offsetTop + 8,
                'left'     : e.pageX - this.offsetLeft + 15
        });
 
}).mouseleave(function() {
        $(".tooltip", this).hide();
 
}).append('<div class="tooltip">Next</div>');
 
// hide tooltip when the mouse is moved over caption
$(".container span").mouseenter(function() {
        $(".tooltip", $(this).parent()).hide();
 
}).mouseleave(function() {
        $(".tooltip", $(this).parent()).show();
});

We also need some CSS for our tooltips.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.

.tooltip {
        position: absolute;
        display: none;
        padding: 3px 10px;
        background: #fff;
        color: #222;
        border: 1px solid #CCC;
        font-family: Arial;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 11;
}

And that's all guys, I hope this tutorial helps you. Let me know if you have any comments

View Demo - Download

User Comments

1. 

   Grytsje September 10th

   This is a great script! And it's working perfectly, accept for the tooltip: it's not where it should be... This is the page: this is the css: is wrong here?
2. 

   Grytsje September 10th

   Ehm... Except for. That's what I meant.
3. 

   jQueryGlobe September 10th

   @Grytsje: Why do you have positioned absolute your #container element? If you are trying to center your page, simply replace attributes for setting position with "margin: 0 auto". It should also solve your tooltip problem.
4. 

   Prajesh October 6th

   Is there a way to automatically fade between multiple images without requiring user input? And can we remove the tool tip as well. I like the script just because it simple to use.
5. 

   jQueryGlobe October 7th

   @Prajesh: I`ll update this article and demo page after finishing current article I`m working on.
6. 

   Prajesh October 13th

   No problem.
7. 

   Prajesh November 5th

   So, does the download link include the new update?