Blog

1
December 15th, 2009
jquery

Feature Gallery – Jquery

This tutorial is about how to make a gallery using Jquery, without the need for a plugin. I’m not saying don’t use a gallery plugin, but like me you might not want to, so this is an alternative. We will make this work by attaching an image to each thumbnail using the rel attribute, then replacing a div with an image.

Click here to view the demo

Start by making 8 images total, 4 thumbnails (width of 230px, height of 75px) and 4 main images (width of 400px, height of 300px). I’m using a few images from my recent trip to New York.

The HTML

The HTML is pretty easy to understand, I started by wrapping it all in a container then adding the main section for the images to be displayed. Then you need somewhere for your thumbnails to be placed, I used a list to display them. You will notice the rel=” ” this is where you place the large image src for that thumbnail, if these are wrong the effect will not work. I have named them image_one and thumb_one so its easier to follow.

1
2
3
4
5
6
7
8
9
10
11

<div id="container">
	<div id="image"><img src="bg.jpg" border="0"/></div>
 		<div id="thumb_holder">   
        <ul>
            <li><a href="#" rel="image_one.jpg" class="main_image"><span class="thumb_one">thumbnail 1</span></a></li>
            <li><a href="#" rel="image_two.jpg" class="main_image"><span class="thumb_two">thumbnail 2</span></a></li>
            <li><a href="#" rel="image_three.jpg" class="main_image"><span class="thumb_three">thumbnail 3</span></a></li>
            <li><a href="#" rel="image_four.jpg" class="main_image"><span class="thumb_four">thumbnail 4</span></a></li>
       </ul>
	</div>
</div>

The CSS

You dont need to have it in a container but I prefer to wrap galleries in divs, as its easier to move them from place to place very easily. #container, #image and #thumb_holder are all used for positioning, you can move the thumbnails to the left bottom or top with a few simple changes to the styles. You then have separate background images for each thumbnail, which are specified in the CSS. I orginally had it set up with rollovers, I made the thumbnails double the height and used the background position to move them on hover.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#container {
	height:300px;
	width:600px;
	position:absolute;
	border:1px solid #000;
	background-color:#424242;
}
#image {
	position:absolute;
	height:300px;
	width:400px;
}
#thumb_holder {
	width:228px;
	height:300px;
	position:absolute;
	right:0;
}
.thumb_one, .thumb_two, .thumb_three, .thumb_four {
	height:75px;
	width:240px;
	display:block;
	text-indent:-9999px;
	float:left;
}
.thumb_one {
	background:url(thumb1.png) no-repeat 0 0;	
}
.thumb_two {
	background:url(about.png) no-repeat 0 0;	
}
.thumb_three {
	background:url(contact.png) no-repeat 0 0;	
}
.thumb_four {
	background:url(more.png) no-repeat 0 0;	
}

The Jquery

As in most of my tutorials I tell you to add the google hosted jquery code to your page. I have added comments to each line of jquery to make it easy for you to tell which each bit does.

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
$(document).ready(function(){
		$(".main_image").hover(function() { //when hover over.main_image
		var image = $(this).attr("rel");//create a image variable of the rel attribute 
		$('#image').hide();//hide all #image
		$('#image').fadeIn('fast');//fade it in
		$('#image').html('<img src="' + image + '"/>');//add the HTML to the page with the relevant rel attribute.
		return false;//to prevent the browser default behaviour
		});
	});

design
, , , , ,

Related Posts

Southern Snipers Jersey Designs
I have been asked by the GBHIS Chairman (Great Britain Hockey Inline Southe...
EA Sports Cover Design
If you didn't know I am a huge sports fan so I have been waiting for the ne...
Horizontal Sliding Panel
I want to make a jquery sliding panel but make it a little different. I al...

1 Comments

  1. Steve Whiteley
    December 21, 2009

    You could simplify this further by making use of jQuery method chaining:

    $(function() {
    $(‘.main_image’).hover(function() {
    $(‘#image’)
    .hide()
    .fadeIn(‘fast’)
    .html(”);
    return false;
    });
    });

    (Not sure how the above is going to look formatting wise!)

Leave a comment