Image Gallery using CSS3 and jQuery
Today, I would like to share a little gallery with you. The resulting gallery shows some thumbnails, when a thumbnail is clicked it is shown on a big scale like a preview.
The Markup
I use the following structure for gallery.
<div id="panel"> <a href="images/image1.jpg"><img src="images/icon1.jpg"></a> <a href="images/image2.jpg"><img src="images/icon2.jpg"></a> <a href="images/image3.jpg"><img src="images/icon3.jpg"></a> <a href="images/icon4.jpg"><img src="images/image4.jpg"></a> <a href="images/image5.JPG"><img src="images/icon5.JPG"></a> <a href="images/image6.jpg"><img src="images/icon6.jpg"></a> </div> <div id="preview"> <img src="images/image1.jpg"> </div>
The “panel-div” is used to hold thumbnails and “preview-div” is used for previewing them.
The CSS
#panel
{
float:left;
margin-left:5%;
margin-top:10%;
width:55%;
padding:10 20 10 20;
}
#panel img
{
height:100;
width:25%;
-webkit-box-shadow: 1pt 2px 5px rgba(105, 108, 109, 1);
-moz-box-shadow: 1pt 2px 5px rgba(105, 108, 109, 1);
box-shadow: 1pt 2px 5px rgba(105, 108, 109, 1);
}
#panel img:hover
{
width: 27%;
height: 110;
margin-top: -20px;
margin-left: -10px;
z-index:10;
}
When hovering over a thumbnail, it is zoomed or is stretched in size, for this we have used pseudo element “hover”.
Now, we style the “preview-div” and image it will contain
#preview
{
margin-top:10%;
margin-right:5%;
width:30%;
height:230px;
float:right;
}
#preview img
{
height:100%;
width:100%;
-webkit-box-shadow: 1pt 1px 5px rgba(105, 108, 109, 1);
-moz-box-shadow: 1pt 1px 5px rgba(105, 108, 109, 1);
box-shadow: 1pt 1px 5px rgba(105, 108, 109, 1);
}
jQuery
We need jQuery for selecting the source of thumbnail clicked and previewing it.
$(function()
{
$("#panel a").click(function()
{
var previewImg = $(this).attr("href");
$("#preview img").attr({ src: previewImg })
return false;
})
})
