Simple Images Slideshow With JQuery

April 18th, 2011 by aditia rahman / 5 Comments  

     

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.

jquery slideshow

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

jquery slideshow

        submit to reddit Delicious

5 Comments Leave a Comment Subscribe RSS

  • Endeavour says:

    Very Nice Post….

  • Toni says:

    Very nice work !!!!
    Under what licence are all your stuff ? GNU GPL ??
    Is it allowed to adapt them to my CMS an make a backlink to your site ?
    Thanks for information.
    Greetings from Germany

    • aditia says:

      you can use it free for any kind of project, personal, commercial, etc. back link not required but I really appreciated if you do,
      thanks :D I’ll think about the license the other work too

  • Mimi says:

    Keyboard accessible…WOW. Bravo and thank you. :)

    Did you think about making it keyboard accessible or was that a happy accident? You don’t know how hard that is to find!

  • gormi says:

    Thanks, for to share your project, fantastic your work and very thanks.

Leave a Comment