I can’t seem to stop creating jQuery plugins. The project that’s currently taking up most of my time provides me a lot of freedom in the way the site is designed. As I work through various parts of the site, my brain begins to come up with ways to enhance parts here and there with jQuery. Several parts of the site will have images interspersed with text. Some of these pages will use a lightbox to allow the visitor to view a larger version of the image while other pages won’t. Some pages will have images that have captions, yet the captions are getting in the way visually of the flow of the page. jQuery to the rescue.
How can I caption these images while maintaining the clean look of the site? Before I tried to develop anything new, I searched around for some creative caption solutions using any JavaScript framework. Low and behold none of them did what I was thinking of so I came up with Drop Captions.
Drop Captions
In a nutshell, drop captions takes an image’s title attribute and converts it into a caption that appears only when the mouse is moved over the image. This allows me to maintain a clean look to the site, while enabling the functionality of captions. It’s also totally degradable if the user has JavaScript disabled; the title attribute will still display the exact same text.
Demo
Download
Download jquery.dropcaptions.js
What’s So Great About This Plugin?
- It’s a mere 3 KB (about half that if you compress it)
- Completely degradable
- Easily configurable
- Styled with CSS
- Reusable on multiple images
How to Use
To get up and running, all you need to do is apply the plugin to any images on your page. To use the plugin you’ll need to have a copy of jQuery, or point to jquery on Google, and the plugin. Place the plugin files on your site and link to them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dropcaptions.js"></script>
<script type="text/javascript">
$(function(){
$('.captionedimage').dropCaptions();
});
</script>
That’s it! You can apply drop captions to any number of images on a page. Check out the demo code for working examples.
Options
The following options are configurable:
- showSpeed – how long (in milliseconds) it should take to display a caption when mousing over an image. Default: 500
- hideSpeed – how long (in milliseconds) it should take to hide a caption when mousing out from an image. Default: 500,
- showOpacity – The final opacity of the caption once displayed (0-1). Default: .85
- hideOpacity – The final opacity of the caption once displayed (0-1). Default: 0
- showEasing – The style of easing to use when displaying a caption. Default: ‘swing’
- hideEasing – The style of easing to use when hiding a caption. Default: ‘swing’
- showDelay – how long of a delay (in milliseconds) it should take before the animation of showing a caption begins on mouseover. Default: 0
- hideDelay – how long of a delay (in milliseconds) it should take before the animation of hiding a caption begins on mouseout. Default: 0
Options are added when calling the script:
$('.captionedimage').dropCaptions({
showSpeed: 2000,
hideSpeed: 1000,
showOpacity: 1,
hideOpacity: 0,
showEasing: 'easeOutElastic',
hideEasing: 'easeInQuint',
hideDelay: 2000
});
The caption area can by styled via CSS and targeting the caption class. For example:
.caption {
background: #333;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
border-top: 1px solid #666;
font-family: Verdana;
font-size: 11px;
padding: 4px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
color: #eee;
}
Enjoy!
Looks nice – your example links are broken though
Ug, wordpress farted. Fixed. Thanks.
this works for Simple Machines
Cool! This is something I can really use, thank you!
cool stuff, great post
Is there an example markup of this? Or am I just missing something here…
@Nico
You’re missing it ;) . The demos are at the top of the post. Or see http://www.catchmyfame.com/jquery/dropcaptions/ and http://www.catchmyfame.com/jquery/dropcaptions/index1.html for examples.
Ahhh… no I didn’t miss those. I was using the markup generated in Firebug rather than the actual source. Dumb. All is well now… sorta
Would there be a way to use these captions on an entire div rather than just an image? The reason I ask is that I’m using another plugin for my images which swaps it’s position on hover (causing a fade effect). I can’t seem to smush them together in just the right way…
hello from Barcelona. First of all, thanks for sharing.
But I’m having trouble applying the dropcaptions to the Cycle plugin (http://malsup.com/jquery/cycle/).
With the first image of the slide works perfect but on the 2, 3…n it “crashes”. If you feel like helping here the screenshots http://imgur.com/vgcBf.png and http://imgur.com/8ZyYA.png
Code is basically from the demo (using images title’s) and jquery’s:
$(‘.slideshow img, #theWork img’).dropCaptions({
showSpeed: 2000,
hideSpeed: 1000,
showOpacity: 1,
hideOpacity: 0,
showEasing: ‘easeOutElastic’,
hideEasing: ‘easeInQuint’,
hideDelay: 2000});
any ideas why?
thanks again!
Can you run the dropCaptions plugin alone? If so then there may be a conflict between plugins. I haven’t tested dropCaptions with Cycle but if I get the chance I’ll check it out.
thanks admin for your reply.
It does work alone. I’ve tryed other captions-plugins and all “crash” on the second slide so I guess it’s Cycle’s problem.
great and cool stuff!
thanks so much.
but it seems to have some probrem in IE.
when you apply this stuff to an img nested by “a” tag with link, the “a” tag’s link does not work in IE.
so I fixed this probrem.
http://t-rix.net/ameblo/dropcaption/jquery.dropcaptions.js
“I can’t seem to stop creating jQuery plugins.” …awesome.
Hello !
Many thanks for sharing… First, I am total newbie… So apologies for my ignorance… But how to apply this wonderful plug-in to all my images !
Thank you for your answer…
Hello
It is really a very good post. I am having a problem of error message “”jquery” is not defined” . i have followed all the way but the caption text is not showing. thanks
Make sure you link to jquery first before linking to or calling the plugin.
I am a beginner with Jquery. So thank you for making this plugin very eaasy to use. I am having one problem that im not sure how to fix. I am making a gridded image gallery 3 img’s wide and 4 tall. When When I applied the plugin to the 4th image ( the first of the second row ) something peculiar happens. The caption of the first image slides down beneath of the 4th image. I sort of get why this is happening, but would like to know if you have any ideas on how to work around it.
link?
I’m having the same issue as Adam; it won’t let the images sit side by side; it forces them onto their own line/div/what have you.
Hey is it possible for this to drop caption up, towards the thumbnail image instead of the default down? Sorry if this is such a simple answer, I’m not very familiar with javascript.
Yup, sure is.
Care to show me how or a quick pointer?
It would require a bit of tweaking based on how it’s setup now. Basically you’d need to add the overflow CSS selector to the caption container and set it to hidden (easy). The captions would also need to have a z-index set on them to something greater than the image they’re on top of (almost any positive integer should be fine). Then you’d have to change the positioning and animation of the caption so that they started below the image (they start flush with the bottom of the image now) and animate upwards (instead of the default downwards).
I am very new to jquery, this will be my first attempt to install a jquery plugin. Can someone point me to a step-by-step guide to installing this on wordpress. I’ve installed the “wp jquery cdn” plugin to point to the jquery source, but, I don’t know how to use it.
this plugin can also use for dropdown menu with effects
thanks for sharing
please add a dd menu demo
Is it possible to have the Drop Caption sliding up from bottom of image?
Also, not when mouseover but when image loaded, meaning if clicking a thumbnail, when the big image appears, the Caption does too from bottom up? (need this behavior for website to be compatible with iPads — no mouse)
Thanks :)
Do you mean so it slides over the image? Sure it’s possible but then this plugin would be like a dozen others that do that. The point of this plugin is to leave the image unobstructed.
I don’t understand what your second point is.
Thank you for your reply.
My second point is that on iPads, you don’t have a mouse to ‘mouseover’ so the caption appears.
The behavior i’m looking for is that upon ‘tapping’ a thumbnail, the caption would slide in right after the ‘big’ image has loaded, not when mouseover.
Thanks :)
Thank you for sharing. Highly appreciated. Hoping to use one of these soon
Thank you for sharing, great and Highly appreciated. Hoping to use one of these soon
Please!! Help me!!
How can i do to use this in wordpress.. i need to put the images in the post! i can’t use javascript there i dont know what to do.
Thanks!
Are there any known bugs using this script? I can’t seem to get it to work.
I call both js files in the header.
I call the function $(‘.captionedimage’).dropCaptions();
I gave the class=”captionedimage” to the images in the loop.
I gave the img a specific “title” which the plugin should read and display.
I added the class .caption with standard values in my stylesheet
Did I miss anything??
Are the demos working for you? If so, are you getting any errors? Can you post a link to where you’re using it?
I found one small flaw. Animations on small images, menu or a tight image galleries etcetera without dequeue’ing always lead to funny behaviours.
Fixing it makes life a bit easier.
o.hideSpeed => {queue:false, duration:o.hideSpeed}the same goes to o.showspeed
Hope it helps somebody.
Omay gat diyorum. çok güzel olmuş çok iyi olmuş ellerinize ayaklarınıza sağlık panpiler..
Hi! I need some help.. I downloaded the plugin and got the css but where the hell do I put it? I’m not css sacy :/
I am using Blogger.
Hello is there any posibility to insert a custom div and to be used as a caption instead of the title attribute ?
Sure anything is possible with jQuery, however you’d just need to hack the plugin to do this which is outside the scope of the comment system.