Build A jQuery Image Gallery

Displaying images galleries on your web pages can be very complicated, much like the jQuery modal boxes, today you will learn a very simple way to create a nice looking image gallery in CSS and jQuery.

The gallery has a main image and multiple alternative images which on the hover event will change the main image.

The CSS will be used to setup the look of the gallery and jQuery is used to change the main image with the alternative images.

Below is the look we are aiming for.

Greyscale_image_gallery

Demo

The HTML

We need to create an area for the main image and then spaces to put all the alternative images on the right side.

First we will start by having a container div for everything.

<div class="gallery">

</div>

Now we can create the main image area, for this we need another div and have an image inside.

<div class="gallery">
	<div class="main_image">
		<img src="images/aston.jpg" />
	</div>
</div>

For now we don't need to worry about the styling as this will be done with the CSS. Now we have the main image we can add all the other alternative images.

<div class="gallery">
	<div class="main_image">
		<img src="images/aston.jpg" />
	</div>
	
	<div class="selection_image">
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston.jpg" />
		</div>
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston2.jpg" />
		</div>
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston3.jpg" />
		</div>
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston4.jpg" />
		</div>
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston5.jpg" />
		</div>
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston6.jpg" />
		</div>
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston7.jpg" />
		</div>
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston8.jpg" />
		</div>
		<div class="thumb">
    		     <div class="overlay"></div>
    		     <img src="images/aston9.jpg" />
		</div>
	</div>
</div>

This is the full HTML needed, each of the alternative images has a overlay div which we will use to greyscale the image by putting a transparent div over the top of the image.

The CSS

With the HTML in place we need to style the gallery to make it look like the gallery as above.

First we will create the 2 different sections, the main image and the alternative images.

.main_image{
	width:48%;
	display:inline-block;
	border:3px solid #eee;
}
.main_image img{
	width:100%;
}
.selection_image{
	width:48%;
	display:inline-block;
}

Now we can style the alternative images which will have an overlaying div with a transparent background colour on them.

.thumb {
	position:relative; 
	width:25%; 
	height:15%; 
	display:inline-block; 
	margin:2px;
	border:4px solid #eee;
	outline:1px solid #ddd;
	}
.thumb:hover .overlay {
	opacity:0!important;
	cursor:pointer;
}
.overlay {
	position:absolute;
	top:0;left:0;width:100%;height:100%;
	background:#000;opacity:0.4;
}
.selection_image img {
	width:100%;
	height:100%;	
}

Copy the above CSS into your CSS file.

This creates 2 different areas one for the main image and another for the alternative images. Each one of the alternative images has a overlay div and on hover event the overlay div will become invisible to display the image on the hover event.

The JQuery

The image gallery should now look the same as the image above, we can add the functionality to change the main image on the hover image of the alternative images.

To create this functionality we just need a couple of lines of JavaScript.

$.(document).ready(function(){
    $.('.thumb').hover(function(){
          $('.main_image img').attr('src',$(this).children('img').attr('src'));
    });
})

That's all you need to create your image gallery.

Try out the demo to see if yours works the same way.

Demo

Advertise here

Comment