Last Updated:

Creating a Great Gallery in jQuery

 

I've talked about jQuery effects many times and what you can create with them. But today I want to tell you how you can create an excellent gallery of viewing thumbnails using this effect, the gallery is quite simple but at the same time it will look great on your site, a feature of this gallery is an animated preview of the images of interest and the display of the picture in the right sitebar, and so, see what we got.

 

And so, according to the tradition of our lessons I propose, for the lazy :) view the ready-made result of our gallery or download the sources.

Now let's look at what we need to do to create such a gallery:

1. jQuery Insert the following code between the <head></head> tags. Do not forget about the right way to the framework.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Increment on hover
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px'
height: '174px'
padding: '20px'
}, 200);


} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0'
marginLeft: '0'
top: '0',
left: '0'
width: '100px'
height: '100px'
padding: '5px'
}, 400);
});
//Change image on click
$("ul.thumb li a").click(function() {


var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});


});
</script>

This function will make an animation when you hover the mouse cursor over the thumbnails of the image.

2.CSS, The second stage is the styles of design. Styles can be inserted into the document itself or taken out into a separate file.

<style type="text/css">
body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 910px
margin: -180px 0 0 -450px;
top: 50%; left: 50%
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px
width: 360px
}
ul.thumb li {
margin: 0; padding: 5px
float: left;
position: relative;
width: 110px
height: 110px;
}
ul.thumb li img {
width: 100px height: 100px;
border: 1px solid #ddd;
padding: 5px
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none
}
#main_view {
float: left;
padding: 9px 0
margin-left: -10px;
}
</style>

HTML, And the final step will be the addition of images, All pictures must be arranged in a list like this:

<div>
<ul>
<li><a href="images/main_image1.jpg"><img src="images/thumb1.jpg" alt="" /></a></li>
<li><a href="images/main_image2.jpg"><img src="images/thumb2.jpg" alt="" /></a></li>
<li><a href="images/main_image3.jpg"><img src="images/thumb3.jpg" alt="" /></a></li>
<li><a href="images/main_image4.jpg"><img src="images/thumb4.jpg" alt="" /></a></li>
<li><a href="images/main_image5.jpg"><img src="images/thumb5.jpg" alt="" /></a></li>
<li><a href="images/main_image6.jpg"><img src="images/thumb6.jpg" alt="" /></a></li>
<li><a href="images/main_image7.jpg"><img src="images/thumb7.jpg" alt="" /></a></li>
<li><a href="images/main_image8.jpg"><img src="images/thumb8.jpg" alt="" /></a></li>
<li><a href="images/main_image9.jpg"><img src="images/thumb9.jpg" alt="" /></a></li>
</ul>
<div id="main_view">
<img src="images/main_image1.jpg" alt="" /></a>
</div>
</div>

In order for everything to work out, do not forget to point out the right path to the images, this is the end of our gallery, I hope you will succeed.