jQuery Image Caption
This may not be the most complex bit of jQuery ever written, but for me it has been very useful. I was after a script to take the alt or title attribute from an img tag and place it beneath the image as a caption and wrap a div around the whole thing so I could float it. Not a difficult Google … or so you'd think. I found loads that make fancy overlays, or were overly verbose, or would not - without loads more effort than I wanted to make - add additional mark up on the fly.
So, I wrote my own - which really I should of done from the outset, but why re-invent the wheel …. I thought. Obviously there are not as many simple souls out there wanting a plain image caption below, so as not to obscure, the image as I first thought.
I first created my mark-up surrounding the image tag with all the various CSS classes included:
<div class="fimg-left"><span>
<img class="img-left-small" title="Title of the image" src="image.jpg" alt="Alt of the image" />
</span>
<div class="img-caption">Alt of the image</div>
</div>
I wanted to ensure that I only had to give the image a particular class (as in our Content Manager, which uses TinyMCE, you can only easily set one class for an image without using the source editor and I don't want our users using that!) in order to 'insert' the additional mark up around the image tag.
So, in this example the class to scan for will be "image-left-small". Firstly, we set up jQuery with a document.ready and what we are scanning for:
<script>
$(document).ready(function() {
$("img.img-left-small").each(function () {
//stuff happens
});
});
</script>
So we are now going to ensure that each image tag (img) with the class "img-left-small" is found but every other image is ignored. We then add a the variables we are going to need/use:
<script>
$(document).ready(function() {
$("img.img-left-small").each(function () {
var $this = $(this);
var title = $this.attr("alt");
// stuff going to happen
});
});
</script>
In the above we are looking for the 'alt' attribute in each matched img tag, you could as easily use the 'title' attribute. Next we want to build our wrapper html around the img tag, for this we make use of the most excellent jQuery wrap() function - a real boon in my view:
<script>
$(document).ready(function() {
$("img.img-left-small").each(function () {
var $this = $(this);
var title = $this.attr("alt");
$this.wrap('<div class="fimg-left"><span></span><div class="img-caption">'+ title +'</div></div>');
});
});
</script>
It's as simple as that, every image of class "image-left-small" ends up with the additional mark-up wrapped and with the addition of a bit of css magic you get a simple caption below the image, not obscuring it! I hope this saves someone the few lost hours of time I spent looking for something as simple as putting a caption below an image without the use of overly large amounts of javascript.
NOTE: I use a <span></span> to wrap the image as the wrap() function splits the string when it sees the first </>. In the version of this little script I use for the CMS, I have a href wrapped around the image to launch a lightbox type image viewer.
A full source is below, just copy and paste and change as you like ..
<html>
<head>
<title>Image caption</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img.img-left-small").each(function () {
var $this = $(this);
var title = $this.attr("alt");
$this.wrap('<div class="fimg-left"><span></span><div class="img-caption">'+ title +'</div></div>');
});
});
</script>
<style type="text/css">
div.fimg-left {
float:left;
margin-right: 10px;
border: 1px solid #222;
margin-left: 0px;
padding: 5px;
-moz-box-shadow:2px 2px 3px #aaaaaa;
-webkit-box-shadow:2px 2px 3px #aaaaaa;
box-shadow:2px 2px 3px #aaaaaa;
background-color: #fff;
}
.img-caption {
width: 250px;
font-size: .7em;
}
.img-left-small {
width: 250px;
}
</style>
</head>
<body>
<img class="img-left-small" src="http://www.ringo-simpkins.co.uk/articles/files/48/OldCityBadge.png" alt="The Title of the image" />
</body>
</html>
Any feedback most welcome