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

Copyright © 2018 ProTech. All Rights Reserved.

Sign In Create Account

Navigation

Social Media