Articles

Slide Thumbs

8 Sep 2009 / 624 comments

In this post I want to explain how to turn old boring image viewer into a nice-looking one with jQuery. It's simple just using some lines of java-script code. Implement this and enrich animation features to your web projects.

You can see the final result at this page, and you can download the complete source code with examples from here.

Step 1: Create the Mark-up

First we add container elements for output. The outer-most container is used to decorate the output with a background image and padding. The next container is the element that will be used to view the images through. The images and their captions are placed inside the inner-most container and wrapped with div elements.

The images are all a uniform size, and the preview_inner container will be sized to accommodate them. The image size will be used in the script that we'll add later.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<div id="preview_wrap">
        <div id="preview_outer">
                <div id="preview_inner">
                        <div>
                                <img src="1_b.jpg" alt="Leonardo Maia" />
                                <a target="_blank" href="http://www.leonardomaia.com.br/">Leonardo Maia</a>
                        </div>
                        <div>
                                <img src="2_b.jpg" alt="skillicorn" />
                                <a target="_blank" href="http://skillicorn.org/">skillicorn</a>
                        </div>
                        <div>
                                <img src="3_b.jpg" alt="theenergycell" />
                                <a target="_blank" href="http://www.energycell.co.uk/">theenergycell</a>
                        </div>
                        <div>
                                <img src="4_b.jpg" alt="Fred Maya" />
                                <a target="_blank" href="http://fredmaya.com/">Fred Maya</a>
                        </div>
                </div>
        </div>
</div>

Within the thumbnails container element, we add list of thumbnails linking to the image slides and an arrow indicating current position.

01.
02.
03.
04.
05.
06.
07.
<div id="thumbs">
        <div id="arrow"></div>
        <span><img src="1_s.gif" alt="Leonardo Maia" /></span>
        <span><img src="2_s.gif" alt="skillicorn" /></span>
        <span><img src="3_s.gif" alt="theenergycell" /></span>
        <span><img src="4_s.gif" alt="Fred Maya" /></span>
</div>

Step 2: CSS

The CSS is pretty simple but it sets up everything that is happening. Since overflow is hidden on the preview_outer container what part of the image slide were showing is just a matter of setting a scrollLeft value.

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.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
#preview_wrap {
        margin: 0 auto;
        padding: 22px;
        width: 550px; 
        height: 400px;
        background: url('bg_preview.gif') top left no-repeat;
}
 
#preview_outer {
        overflow: hidden;
        width: 550px;
        height: 400px;
        position: relative;
}
 
#preview_inner {
        text-align: left;
        height: 100%;
        position: relative;
}
 
#preview_inner div {
        float: left;
        width: 550px;
        height: 400px;
        position: relative;
}
 
#preview_inner div a {
        position: absolute;
        bottom: 0;
        left: 0; 
        display: block;
        width: 100%;
        text-indent: 20px;
        padding: 20px 0;
        color: #fff;
        background: url(bg_trans.png);
        text-decoration: none;
        font-size: 18px;
}
 
#thumbs {
        padding-top: 30px;
        position: relative;
        width: 750px;
        text-align: center;      
}
 
#thumbs span {
        padding: 12px;
        width: 80px;
        height: 80px;
        cursor: pointer;
        background: url('bg_thumb.gif') top left no-repeat;
        display: inline-block;
}
 
#arrow {
        position: absolute;
        top: -13px;
        background: url('bg_arrow.gif') top center no-repeat;
        width: 104px;
        height: 39px;
        display: none;
}

Step 3: jQuery

Now, let’s add the JavaScript. The code is commented to explain what we’re doing.

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.
$(document).ready(function() {
        // Save  the jQuery objects for later use.
        var outer       = $("#preview_outer");
        var arrow       = $("#arrow");
        var thumbs      = $("#thumbs span");
 
        var preview_pos;
        var preview_els = $("#preview_inner div");
        var image_width = preview_els.eq(0).width(); // Get width of imaages
 
        // Hook up the click event
        thumbs.click(function() {
                // Get position of current image
                preview_pos = preview_els.eq( thumbs.index( this) ).position();
 
                // Animate them!
                outer.stop().animate( {'scrollLeft' : preview_pos.left},   500 );
                arrow.stop().animate( {'left' : $(this).position().left },        500 );
        });
 
        // Reset positions on load
        arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
        outer.animate( {'scrollLeft' : 0}, 0 );
 
        // Set initial width
        $("#preview_inner").css('width', preview_els.length * image_width);
});

And that’s about it! If anyone has any questions, suggestions or better examples, please do share by dropping a comment on the site.

View Demo - Download

User Comments

  1. Josh September 10th

    Very nice, thanks, I like the thumbnail navigation and following arrow

  2. tribui September 12th

    Hi, This is great but does it really apply when you have more than 4 images? Or will you have to make a page that scrolls Horizontally? But the main image is so big and the arrow points to a preview image thus limiting to 4 image galleries? Can you give an example of how this solution would work with 25 images? Thanks, tribui

  3. Danny October 8th

    Hi, really really nice implementacion, is there a way to autoplay the slideshow? Thanks a bunch for this!

  4. Matt October 16th

    Hi, Great article! I had one question. wanted to know if this can auto play as well as fade in and out instead of the slide?

  5. jQueryGlobe October 16th

    @Danny: ok, I`ll add slideshow @Matt: this demo is for sliding only

  6. dev November 16th

    Did css has scrollLeft property?

  7. Moe March 9th

    hello, nice script just the same as the one ive been searching for, but i wonder how can i reposition the thumbs to be aligned horizontally at the left side of the image?

  8. May 12th

    This is one of the most beautiful sliders I have seen... I made use of it on my site here: SOOO MUCH!

  9. Peter July 14th

    Hey, great work. Is there a way u can change it so it shows a real html file instead of a larger picture? Thanks

jQueryGlobe