Simple Images Slideshow With JQuery

Slideshow is one of the most used feature in a web application, especially in a photo sharing site like flickr, photobucket, or maybe for used is some online store to showcasing some available new product, whatever it for, it is up to you as developer, In this post I want to share my example creating very simple slideshow base on JQuery.

I assume all the images have the same size, and there are the navigation to switch between the images, like prev, next, first and last.

View Demo | Download Source

The HTML

Here are the html code, this example using 6 images, they are hardcoded in html, and there are a list of thumbnail images, to switch directly to seletected images.

<div id="container">
  <div id="navigate">
      <a href="" id="linkfirst">&laquo; first</a>
      <span id="spanfirst">&laquo; first</span>
      <a href="" id="linkprev">&lsaquo; prev</a>
      <span id="spanprev">&lsaquo; prev</span>
      <a href="" id="linknext">next &rsaquo;</a>
      <span id="spannext">next &rsaquo;</span>
      <a href="" id="linklast">last &raquo;</a>
      <span id="spanlast">last &raquo;</span>
  </div>
  <div id="img_container">
      <div id="img_box">
          <img id="img1" src="img/original/01.jpg"/>
          <img id="img2" src="img/original/02.jpg"/>
          <img id="img3" src="img/original/03.jpg"/>
          <img id="img4" src="img/original/04.jpg"/>
          <img id="img5" src="img/original/05.jpg"/>
          <img id="img6" src="img/original/06.jpg"/>
          <div style="clear:both;"></div>
      </div>
  </div>
  <div id="imgthumb_box">
      <a href="" class="thumblink" id="imglink1"><img src="img/thumb/01.jpg"/></a>
      <a href="" class="thumblink" id="imglink2"><img src="img/thumb/02.jpg"/></a>
      <a href="" class="thumblink" id="imglink3"><img src="img/thumb/03.jpg"/></a>
      <a href="" class="thumblink" id="imglink4"><img src="img/thumb/04.jpg"/></a>
      <a href="" class="thumblink" id="imglink5"><img src="img/thumb/05.jpg"/></a>
      <a href="" class="thumblink" id="imglink6"><img src="img/thumb/06.jpg"/></a>
  </div>
</div>

The JQuery

Here are the main function for sliding the images, basically it just playing with left css property in image box element, default condition for the image box is left = 0px (in firefox), or left = ‘auto’ (in Chrome, Opera, IE).

For “next” navigation, if current position is on the last image, it will back to the first image, for “prev” navigation, if current position is on the first image, it will move to the last image, and when one of the image selected, the matched thumbnail will change it style.

$(document).ready(function() {
    var total = $("#img_box img").length;

    $("#imglink1 img").css({
        "border-color": "#0099cc",
        "top": "-5px"
    });

    $(".thumblink").click(function() {
        var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));
        var move = -($("#img"+imgnumber).width() * (imgnumber - 1));

        $("#img_box").animate({
            left: move
        }, 500);

        $("#imgthumb_box").find("img").removeAttr("style");
        $(this).find("img").css({
            "border-color": "#0099cc",
            "top": "-5px",
            "border-top-width": "-5px"
        });
        return false;
    });

    $("#navigate a").click(function() {
        var imgwidth = $("#img1").width();
        var box_left = $("#img_box").css("left");
        var el_id = $(this).attr("id");
        var move, imgnumber;

        if (box_left == 'auto') {
            box_left = 0;
        } else {
            box_left = parseInt(box_left.replace("px", ""));
        }

        // if prev
        if (el_id == 'linkprev') {
            if ((box_left - imgwidth) == -(imgwidth)) {
                move = -(imgwidth * (total - 1));
            } else {
                move = box_left + imgwidth;
            }

            imgnumber = -(box_left / imgwidth);
            if (imgnumber == 0) {
                imgnumber = total;
            }
        } else if (el_id == 'linknext') {
            // if in the last image, move to first
            if (-(box_left) == (imgwidth * (total - 1))) {
                move = 0;
            } else {
                move = box_left - imgwidth;
            }

            imgnumber = Math.abs((box_left / imgwidth)) + 2;
            if (imgnumber == (total + 1)) {
                imgnumber = 1;
            }
        } else if (el_id == 'linkfirst') {
            move = 0;
            imgnumber = 1;
        } else if (el_id == 'linklast') {
            move = -(imgwidth * (total - 1));
            imgnumber = total;
        }

        // styling selected image
        $("#imgthumb_box").find("img").removeAttr("style");
        $("#imglink"+imgnumber).find("img").css({
            "border-color": "#0099cc",
            "top": "-5px",
            "border-top-width": "-5px"
        });

        $("#navigate a").hide();
        $("#navigate span").show();

        $("#img_box").animate({
            left: move+'px'
        }, 400, function() {
            $("#navigate a").show();
            $("#navigate span").hide();
        });

        return false;
    });
});

The CSS

Make sure the image container apply overflow: hidden property, these are the main image container that contain all the images, actually all the images are placed inline, inside the container.

#container {
    margin-top: 40px;
}
#navigate {
    text-align: center;
}
#navigate a, span {
    position: relative;
    top: 3px;
    background: #0099cc;
    text-decoration: none;
    color: #fff;
    padding: 4px 8px 0 8px;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
}
#navigate a:hover {
    color: #d3d3d3;
}
#navigate span {
    display: none;
    color: #999;
}
#img_container {
    overflow: hidden;
    width: 500px;
    margin: 0 auto;
    border: 8px solid #0099cc;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}
#img_box {
    position: relative;
    width: 3000px;
    margin: 0;
}
#img_box img {
    float: left;
}
#imgthumb_box {
    text-align: center;
}
#imgthumb_box a {
    margin-left: 4px;
}
#imgthumb_box a img {
    border: 6px solid #e3e3e3;
    position: relative;
    top: 10px;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
}
#imgthumb_box a img:hover {
    border-color: #666;
}

View Demo | Download Source