Simple Jquery Gallery
In this tutorial we will make a
light jquery gallery where the images will just fade in and out, the images can
be found in the source code.
Start by typing up the HTML
<div id="wrapper">
<h1>Simple Jquery Gallery</h1>
<div id="main">
</div>
</div>
and now add the CSS for the basic
shape of the gallery
body
{
background-color: #383838;
margin: 0px;
}
h1
{
margin: 0px;
font-weight: normal;
font-family: arial;
margin-bottom: 10px;
font-size: 13pt;
color: #1e67b2;
}
#wrapper
{
margin-left: auto;
margin-right: auto;
width: 400px;
margin-top: 50px;
}
#main
{
width: 400px;
background-color: #f2f2f2;
height: 430px;
border: 1px solid #b3b3b3;
padding: 5px;
}
Now we are going to make the gallery
part so add the div for the image display
<div
id="mainImageBox">
<img class="active" src="plants/plant1.jpg"
width="400" height="400" />
<img src="plants/plant2.jpg" width="400"
height="400" />
<img src="plants/plant3.jpg" width="400"
height="400" />
<img src="plants/plant4.jpg" width="400"
height="400" />
<img src="plants/plant5.jpg" width="400"
height="400" />
<img src="plants/plant6.jpg" width="400"
height="400" />
<img src="plants/plant7.jpg" width="400"
height="400" />
<img src="plants/plant8.jpg" width="400"
height="400" />
</div>
one of the images is given the class
active because this will be the image that is shown in the gallery as this
gallery will switch between them.
Now add the CSS
#mainImageBox
{
width: 400px;
height: 400px;
}
#mainImageBox img
{
display: none;
}
Now lastly before we start the
javascript code we need to make links to navigate between the images, type in
this HTML just before the end of the main
<div
id="options"><a id="prevLink" href="#">Prev
Image</a> | <a id="nextLink" href="#">Next
Image</a></div>
and style it with the CSS
#options
{
width: 400px;
height: 25px;
padding-top: 5px;
}
a
{
text-decoration: none;
color: #4f4f4f;
}
a:hover
{
color: #2777c9;
}
Now time for the javascript so first
we need to is set up the links and fade in the first image like so
$(function() {
$("img.active").fadeIn("slow");
$("#prevLink").click(function(e){
changeImage("prev");
});
$("#nextLink").click(function(e){
changeImage("next");
});
});
here we fade in the active image and
then set click events of the links. Now we will make the changeImage() function
like so
function changeImage(direction)
{
var images = $("#mainImageBox > img");
for (var i=0;i<images.size();i++)
{
var image = getImage(images,i);
if (image.hasClass("active"))
{
image.removeClass("active");
image.fadeOut("slow",function() {
if (direction == "prev"){ var newImage = getImage(images,i - 1); }
if (direction == "next"){ var newImage = getImage(images,i + 1); }
newImage.addClass("active");
newImage.fadeIn("slow");
});
break;
}
}
}
okay so we get the images and store
them in the images variables and loop them all. to get the properties of an
image we use the getImage function which we will look into next.
next if we find the active set one we remove the active class off it and
fadeout the image. Next check the direction we are changing the image and use
the getImage function to get the new image from the images variable and then
add teh active class to it and fade it in and then break to end the loop.
Lastly we come to the getImage function
function getImage(images,index)
{
if (index > images.size()-1){index = 0;}
if (index < 0){index = images.size()-1;}
var image = "";
for (var i=0;i<images.size();i++)
{
if (i == index)
{
return image = $(images[i]);
}
}
return false;
}
here we
require the images data and the index number of the image that we want to get.
first we check if the index is max or at a 0. This is so that we can set the
index to the start or the end so all images are found.
Next the images variable is created and a the for loop is to loop and get the
index of images and return it as its own element. Else if it cant be found
false is returned.
