Jquery Image Caption

This is my first tutorial on jquery so just bear with me…Jquery seems to be something I really want to learn but I just cant find the time to learn it. Everytime I open my Learning Jquery 1.3 book from Packt a deadline comes up, so the book it placed back on the shelf to gather dust! But finally I found a perfect moment to fiddle with it. So I have put together a simple effect using an image and a caption which slides up when hovered over. It was actually pretty easy to achive.

Click here to view the demo.

Make sure you have inserted jquery into your page, I am trying to get in the habbit of using the version hosted on google. Find out why here.

The HTML

1
2
3
4
5
6
7
8

<div id="photo">
<img src="image.jpg" alt="" width="300" height="300" />
<div id="caption">
<h2>Title would go here</h2>
<small>Sub text could go here</small>
 
Then more text could here, then more text could go, then more text could go here</div>
</div>

You can probably work out what each part of this does but I will run over it quickly. The Photo div is the container, everything goes inside this div. You could call it container but you might already be using that id. Next you insert your image. Caption div is what will slide up infront of your image, inside this theres a H2, sub heading then your main text. You dont have to have text in here you can have anything you want. Pretty simple right?

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#photo {
	width:300px;
	height:300px;
	position:relative;
}
#photo img {
	position:absolute;
}
 
#caption {
	position:absolute;
        bottom:0px;
        width:280px;
	height:100px;
	padding:10px;
	background-color:#000;
	color:#fff;
        opacity: 0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
}

Set the photo div to the same size as the photo/image you are using you want position relative so everything inside positions properly, to keep Ie happy you need to apply absolute positioning to the img inside the photo div. If you dont the caption will appear to the right of the image. The caption div looks alot but actually is very simple. You need to position it absolutely and bottom 0 so it sits at the bottom of the photo div. Then the rest is purely cosmetics.

Why do you have 4 opacity styles?

To suit all the browsers you must use all 4 to get the same effect, yes its a pain but we all have to do it, you could always use a png and tile it as a background.

• filter:alpha(opacity=80) – This is needed for IE*/
• -moz-opacity:0.8 – This is for old school mozilla broswers like Netscape Navigator
• -khtml-opacity: 0.8 – Old versions of Safari and “KHTML” browser engines
• opacity: 0.8 – FireFox, Safari, and Opera – The Standard in CSS

Now on to the Jquery

The Jquery

1
2
3
4
5
6
7
8
9

           $(document).ready(function(){
                $('#caption').hide();
		$('#photo').hover(function () {
		$('#caption').slideDown('slow');
		},
			function () {
				$('#caption').slideUp('slow');
			});
            });

Let me explain how this works. You need to hide the caption from view on load. Then you need to attach a hover function to the photo div. Then you need to tell the caption div what to do which is slide up and down. I only noticed that the slideDown and slideUp were the wrong way round when I was writing this post, but seeing as it works why fight it! The reason for this is becasue the I have the caption div set at bottom:0.

Making the Alt tag the caption

I was chatting to the very talented Steve @36flavours and he said he would create a function that would find the title or alt tag of the image and make that the caption, meaning even less HTML coding would be needed to create the same effect. We all love to save time in our code so I am adding to this code to save you time.

Keep the same CSS as before but shortern the HTML to only 3 lines of code.

The improved HTML

1
2

<div id="photo">
     <img src="image.jpg" alt="text caption goes here...." width="300" height="300" /></div>

The Jquery Function

1
2
3
4
5

       $("#photo img").each(function () {
		var $this = $(this);
		var title = $this.attr("alt");
		$this.after('<div id="caption">'+ title +'</div>');
	});

Pretty straight forward, attaching the function to the photo divs image, then you need to create a new variable which finds the alt tag of the photo divs image. Then it inserts it into the caption div. I was playing around and if you didnt want to use the alt tag you could change it to the word caption in the HTML and the jquery maybe this will remind you how to put it in.

Problem solved with multiple images

I have been told that if I have multiple images on a page if I hover over 1 image it slides all the captions up…not good. Sorry. To fix this use the ‘this’ function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

       $(document).ready(function(){
		 $("#photo img").each(function () {
			var $this = $(this);
			var title = $this.attr("alt");
			$this.after('<div id="caption">'+ title +'</div>');
		});
			$('#caption').hide();
			$('#photo').hover(function () {
			$('#caption', this).slideDown('slow');//note the change code
				},
			function () {
				$('#caption', this).slideUp('slow'); //note the change code
			});
        });

The code is not massively different but it just add the caption to the image you have hovered on rather then all the images.

Hey, my name’s Kevin, I love hockey and the internet. I like my rock music and its great to just plug in and get the designs flowing. I love chicken wings, the more hot sauce on them the better and I have 3 kidneys...You can find me on multiple social networking sites, so come say hi. I hope at least one post on here is useful to you!

• Delicious
• Design Float
• Digg
• stumble
• twitter
• Reddit