Tutorials
There are many jQuery plugins that give designers an array of options to use in order to make very nice captions. We can’t argue with that, and what I am going to do here is not much different, but it might just help you avoid the need to include a large number of plugins on a single web page. After all, captions are not that hard to achieve, and in this tutorial we are going to make them very simple and with less than ten lines of JavaScript code. Compare that and plugins which incorporate a large number of lines, and you’re gonna see advantages. Not to mention that those plugins often provide options that you don’t even need most of the time.
So, what do we need to do. First step is to create a sample HTML page so we can see our code in action. Here is a simple one with included styling for wrapping elements:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Make Nice Captions Using Image Alternative Tag</title>
<style>
/* Style wrapping elements */
.caption {position: relative; display: block;}
.caption div {position: absolute; padding: 5px; bottom: 0; text-align: center; line-height: 150%; color: #ffffff; background: #000000;}
</style>
</head>
<body>
<h1>Make Nice Captions Using Image Alternative Tag</h1>
<img src="path to the image goes here" alt="Here goes the alternative text which pops out on hover" />
</body>
</html>
As you can see the page is very simple and all we see on it is a title, one h1 tag (which is used only for displaying purposes), and one image. What we are going to do next when we add JavaScript code is best illustrated in the image below.
Figure1 - Illustration of the intended layout
Yes we are going to change the layout a bit. We are going to add a wrapping div around our target images, and we are going to add one more div below images which will contain the image ALT tag text. Sounds complicated? Trust me, it’s not and here is the JavaScript code which you need to insert immediately after the </title> tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Wrap up images
$('img').each(function() {
$(this).wrap('<div class="caption"></div>').after('<div>' + $(this).attr('alt') + '</div>');
$('.caption').width($(this).width()).children('div').each(function() {
$(this).css({width: $(this).siblings('img').width() - 10, opacity: 0, display: 'block'});
});
});
// Show captions on hover
$('.caption').hover(
function() {$(this).children('div').stop().fadeTo(500, 0.7);},
function() {$(this).children('div').stop().fadeOut(500);}
);
});
</script>
So, when the page loads, we are going to wrap images and add additional div below each wanted image. That additional div will contain image ALT tag text inside. We are also going to set the width of the top most container, and the div below to be equal to the image width. That’s what the first part of the code does. Second part of the code only adds on hover event to the top most container, and it says to fade in or out the children div element.
And there you have it. Nice animated captions with no sweat. But, there are a couple of things here that you need to take care of. First thing is that caption container is somewhat transparent, as the opacity attribute goes up to 0.7 which means that even text inside will be partially transparent. In order to solve this issue we need to take a different approach, and it goes beyond the scope of this tutorial. Second thing is that in the provided code, we are selecting all images on the page with $(‘img’) which is something you probably don’t want to do on a fully designed page. So, you’re gonna need to change that selector to address only images that you want to show captions on.
For those of you who don’t believe until you see, here is a tailored demo page where you can see this tutorial in action.
For those of you who actually need this, use the download link below to obtain your copy of the zipped archive which contains previously mentioned demo page.
Timber Door Manufacturer on June 23, 2010
Nice tip. That would make it easy to create some photo galleries