Image Gallery using CSS3 and jQuery

admin July 1, 2017 0 Comments

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.

untitled

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

Download files

Leave a Reply