jQuery Drop Captions Plugin Released

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

  • Example 1
  • Example 2 (demonstrates how drop captions can be used with other JavaScript frameworks)

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>
You can also include the popular jQuery easing plugin to add some nice easing effects to the captions.
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!

55 thoughts on “jQuery Drop Captions Plugin Released”

      1. 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

  1. 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…

  2. 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!

    1. 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.

    2. 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.

  3. 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…

  4. 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

  5. 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.

  6. 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.

      1. 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).

  7. 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.

  8. 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 :)

    1. 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.

      1. 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 :)

Leave a Reply

Your email address will not be published. Required fields are marked *