The script of the gallery for the site download.

5/51 rating

Greetings. In today's article, we will consider an example of creating a photo gallery for a site. We will make a simple gallery but at the same time, very beautiful, stylish and modern, with little animation effects when hovering over a miniature.

Image galleries are very often used on their websites by webmasters, and we are no exception, when developing websites or creating an online store image gallery is used for convenient display of information about the company or for presenting photos of goods.

It can also be used for other purposes, because the photo gallery is intended not only for the photographer's website, but also for any Internet resource. The image gallery on your website is a great way to show your users their photos or work.

After reading this article, you can easily create a simple photo gallery yourself using the step-by-step instructions that we will now consider. You can also download the gallery script that we will now create and which we will publish below under the article.

And so, how to create a simple image gallery?

The first point is to connect all the necessary JS scripts to your site, let's do it!

Add to the site somewhere above the <head> script connection string:

<script type="text/javascript" src="js/jquery-latest.js"></script>

1	<script type="text/javascript" src="js/jquery-latest.js"></script>

The file itself can be downloaded from the sources under this article.

Next you need to add the script to the page:

<script type="text/javascript">
 $(document).ready(function(){
//Hover Zoom
$("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 when clicking
 $("ul.thumb li a").click(function() {

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

 });
 </script>

$(document).ready(function(){

//Hover Zoom

$("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 when clicking

$("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name

$("#main_view img").attr({ src: mainImage });

return false;

});

</script>

Add this script you can directly into the body of the page on which you will work this gallery. Well, or you can put it in a separate file and connect it the same way:

<script type="text/javascript" src="js/main.js"></script>

1	<script type="text/javascript" src="js/main.js"></script>

We want to note immediately that in the source code it is just rendered in a separate file, that is, on its page we simply connected but did not add it. Well, we've hooked up the scripts, now let's add the basic CSS styles for the photo gallery:

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;
}

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;

}

These styles as well as the JS scripts we mentioned above can be added to the body of the page or output as a separate file and simply connected to the page, which we did.

Well, now let's add the HTML markup itself in which our photo gallery will be located:

<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>

<div>

<ul>

</ul>

</div>

Well, that's all, the gallery was created. As you can see, when creating the gallery we did not apply anything complicated or unusual, and at the same time we managed to make an incredibly stylish photo gallery. I hope everything will turn out the same for you, good luck to you.