Creating a Simple Slideshow using jQuery

Heya folks! Many of you would have seen the facebook's implementation of photo gallery, but it lacks something like automatic playing of all the photos, or in general words, a slide show. So, lets see how we can do it in a simple way using jQuery.

We have three parts in this. One tool I would like to introduce you people is <a href="https://jsfiddle.net/" target="_blank" rel="nofollow noopener noreferrer">JSFiddle - Code Playground</a>. This tool just helps us in developing interactive web content. Okay, let me say what are those three things:

HTML - The markup of elements!
CSS - Cascading Style Sheet for a beautiful presentation!
JavaScript - Not Java, but a browser script for interaction!

First thing we need is a blank HTML Skeleton. I generally prefer you people to use XHTML 1.1 for developing websites, as it is understood fully by almost all the browsers you can name of. So, lets see how the skeleton looks like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
    </head>
    <body>
     
    </body>
</html>

Now after this basic skeleton is done, we need something to wrap our images. Generally for all the layout stuffs, we use the DIV tag. So, lets add one DIV tag with its ending tag. The code looks this way:

<div id="slides">
</div>

We can put it inside the body, where you want the slideshow to happen. Now, after our wrapper, we need the images to be inside the slideshow. So, we have to add the IMG tags inside the DIV tag this way:

<div id="slides">
    [img]images/Slide1.png[/img]
    [img]images/Slide2.png[/img]
    [img]images/Slide3.png[/img]
</div>

In your jsFiddle, you need to put the above content on the HTML section. Anyways, you can see a live demo soon. Just make sure to select jQuery latest version from the left side drop down menu.
Now comes the presentation part. Once we have done with the HTML Markup, we need to work on the CSS to make it beautiful by giving position, colour, etc. So, this stuff goes into the STYLE tags inside the HEAD part below the TITLE.

<style type="text/css">
    body {
      background-color: #000000;
    }
    #slides {
      position: relative;
      margin: 0 auto;
      width: 760px;
    }
    #slides img {
      position: absolute;
      top: 25px;
      left: 25px;
      display: none;
    }
    #slides img.active {
      display: block;
    }
</style>

We use the tag names as is, i.e., BODY and IMG. When we add an ID attribute for an element, we refer them using a hash (#), i.e., #slides. Note, each element should have only unique IDs. Same IDs cannot be used for other elements. And, for the classes, we refer them using a dot (.), i.e., .active. Now the below stuff goes into the CSS part of the jsFiddle. Note that there's no HTML Tah

body {
  background-color: #000000;
}
#slides {
  position: relative;
  margin: 0 auto;
  width: 760px;
}
#slides img {
  position:absolute;
  top: 25px;
  left: 25px;
  display: none;
}
#slides img.active {
  display: block;
}

Now even the presentation part is over. So, ultimately the UI is ready. But we need to work on the interaction. This is the JavaScript part, where the main Slideshow's animation will be there. Even this part goes into the HEAD, after the previously added STYLE tag.

<script type="text/javascript">
    $(document).ready(function () {
        // Make the first image to be active.
        $("#slides img:first").addClass("active");
        // Play the slideshow for an interval of 5 seconds.
        setInterval("slideshow()", 5000);
    });
    function slideshow()
    {
      var active = $("#slides .active");
      var next = ($("#slides .active").next().length > 0) ? $("#slides .active").next() : $("#slides img:first");
      active.fadeOut(function(){
          active.removeClass("active");
          next.fadeIn().addClass("active");
      });
    }
</script>

Here, what we are doing is, immediately after the page is loaded, we give a class "active" to the first image, so that it becomes visible. Then for every 5 seconds, we are calling the function slideshow(). This function, fades through each of the image and shows it one by one. The plain JavaScript to be used inside the jsFiddle's JavaScript part is below:

$(document).ready(function () {
    // Make the first image to be active.
    $("#slides img:first").addClass("active");
    // Play the slideshow for an interval of 5 seconds.
    setInterval("slideshow()", 5000);
});
function slideshow()
{
  var active = $("#slides .active");
  var next = ($("#slides .active").next().length > 0) ? $("#slides .active").next() : $("#slides img:first");
  active.fadeOut(function(){
      active.removeClass("active");
      next.fadeIn().addClass("active");
  });
}

You can check out the working jsFiddle here: <a href="https://jsfiddle.net/Jh67T/" target="_blank" rel="nofollow noopener noreferrer">Edit fiddle - JSFiddle - Code Playground</a>
And for your convinience, the full HTML code is given below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title></title>
        <style type="text/css">
            body {
              background-color: #000000;
            }
            #slides {
              position: relative;
              margin: 0 auto;
              width: 760px;
            }
            #slides img {
              position:absolute;
              top: 25px;
              left: 25px;
              display: none;
            }
            #slides img.active {
              display: block;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Make the first image to be active.
                $("#slides img:first").addClass("active");
                // Play the slideshow for an interval of 5 seconds.
                setInterval("slideshow()", 5000);
            });
            function slideshow()
            {
              var active = $("#slides .active");
              var next = ($("#slides .active").next().length > 0) ? $("#slides .active").next() : $("#slides img:first");
              active.fadeOut(function(){
                  active.removeClass("active");
                  next.fadeIn().addClass("active");
              });
            }
        </script>
    </head>
    <body>
        <div id="slides">
            [img]images/Slide1.png[/img]
            [img]images/Slide2.png[/img]
            [img]images/Slide3.png[/img]
        </div>
    </body>
</html>

Hope you enjoy it!