Feed on
Posts
Comments

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!

Related posts:

  1. jQuery Infinite Carousel Plugin 1.0.1 Released
  2. jQuery Infinite Carousel Plugin 1.2 Released

21 Responses to “jQuery Drop Captions Plugin Released”

  1. Erik says:

    Looks nice – your example links are broken though

  2. DrHouse says:

    this works for Simple Machines

  3. Cool! This is something I can really use, thank you!

  4. [...] View Demo AKPC_IDS += "198,";Related PostThe Best jQuery Lightbox ScriptsEversince, Lokesh Dhakar created the first lightbox application, photo galleries…jQuery Multi Level Popup MenuThis jQuery plugin lets you associate a multi level drop down menu to any link o…Easy and Slick Way to Do Auto-Complete & Auto-SuggestAutoSuggest jQuery Plugin makes auto-completing extremely easy. AutoSuggest will… jQuery sliding menu revisitedA few months ago I posted a sliding menu using jQuery and some users asked for a…How to Make a Smooth Animated Menu with jQueryEver seen some excellent jQuery navigation that left you wanting to make one of … [...]

  5. BigM75 says:

    cool stuff, great post

  6. Nico says:

    Is there an example markup of this? Or am I just missing something here…

  7. Nico says:

    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…

  8. [...] 3. jQuery Drop Captions Plugin [...]

  9. [...] jQuery Drop Captions Plugin: 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. It’s also totally degradable if the user has JavaScript disabled; the title attribute will still display the exact same text. [...]

  10. Pol Moneys says:

    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!

    • admin says:

      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.

    • Pol Moneys says:

      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.

  11. meat18 says:

    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

  12. “I can’t seem to stop creating jQuery plugins.” …awesome.

  13. figueline says:

    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…

Leave a Reply