Code example: Implementing a photo slider with JQuery

Hi folks,

In this post, I am going to show you a code example to create a photo slider using HTML, CSS and the famous JavaScript framework: JQuery.

First things first, let me show you the HTML code we are going to use:

Code:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script>
      //This is where all the JQuery code will go
    </script>
  </head>
  <body>
    <div id="slider">
      <div id="pictures">
        <!-- This is the loading image -->
        <img id="spinner" src="images/spinner.gif">
        <img id="image" src=""/>
      </div>
      <div id="logo">
        <div id="controls">
          <ul>
            <li class="first"><a href="#" id="previous">Previous</a></li>
            <li><a href="#" id="next">Next</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

Now let us look at the css (style.css):

Code:


#slider{
  width:600px;
  height:200px;
  background-image: url('images/background.png');
  background-repeat: repeat-x;
  clear:both;
}

#pictures{
  float: left;
  height: 200px;
  width: 453px;
  position: relative;
  background-color: white;
}

#pictures IMG{
  position:absolute;
  top:0;
  left:0;
}

#pictures IMG#spinner{
  position:absolute;
  top:45%;
  left:27%;
}

#logo{
  float: right;
  height: 200px;
  width: 147px;
  position: relative;
  background-image:url('images/logo.png');
  background-repeat:no-repeat;
  background-position:center center;
  overflow:hidden;
}

#controls{
  position:absolute;
  bottom:-30px;
  height:30px;
  width:147px;
  background-image:url('images/background_nav.png');
  background-repeat: repeat-x;
}

#controls ul{
  margin:0px;
  padding:0px;
  list-style-type: none;
  height: 30px;
  width: 147px;
  margin: auto;
}

#controls ul a{
  padding-right: 5px;
  padding-left: 5px;
  display: block;
  line-height: 30px;
  text-decoration: none;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  color: white;
  text-align:center;
}

#controls ul li {
  float: left;
  width: 73px;
  border-left: 1px solid white;
}

#controls ul li.first {
   border-left: none;
}

So far, the idea here is to have two main div in the gallery:

The one on the left (#pictures) is where the pictures will be displayed. It contains two main images: the loading image and the one that will change when clicking on next or previous.
The second div contains the logo you want to display and the navigation controls. I specified in the CSS that the navigation controls should not be "displayed" by having:
Code:
```
#logo{
  ...
  overflow:hidden;
  ...
}
```
and
Code:
```
#controls{
  ...
  bottom:-30px;
  ...
}
```

Finally, here is the JQuery code where all magic happens:

Code:


//This array should come from the server, or any other way to get a list of images
var gallery=["images/img1.png","images/img2.png","images/img3.png","images/img4.png"];
var total_in_gallery=gallery.length - 1;

//Represents the position in the array
var gallery_nbr=0;

// when the DOM is ready
$(function() {

  //Load the first image of the gallery
  $("#image").load(function() {
    $(this).hide();
    $(this).fadeIn();
  }).attr('src',gallery[gallery_nbr]);

  //Defines what is happening when clicking on the previous button
  $("#previous").click(displayPrevious);

  //Defines what is happening when clicking on the next button        
  $("#next").click(displayNext);

  //Slides up the controls when the mouse is over the #logo div
  //Slides down the controls when the mouse is outside the #logo div
  $("#logo").hover(function() {
    $("#controls").animate({
        bottom: "0px"
    }, 500 );
  },
  function() {
    $("#controls").animate({
        bottom: "-30px"
    }, 500 );
  });

});

//Load the image 
function loadImage(image) {
  $("#image").fadeOut('slow', function(){
    $("#image").load(function() {
      $(this).hide();
      $(this).fadeIn();
    }).attr('src',image);
  });
}

//To calculate the index in the gallery for the previous image
function previousImage() {
  gallery_nbr--;
  if(gallery_nbr < 0)
    gallery_nbr=total_in_gallery;
}

//To calculate the index in the gallery for the next image
function nextImage() {
  gallery_nbr++;
  if(gallery_nbr > total_in_gallery)
    gallery_nbr=0;
};

//Display next image
function displayNext(){
  nextImage();
  loadImage(gallery[gallery_nbr]);
}

//Display previous image
function displayPrevious(){
  previousImage();
  loadImage(gallery[gallery_nbr]);
}

You can download the code example there: https://www.protechtraining.com/static/tutorials/code_slider.zip