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!

56 thoughts on “jQuery Drop Captions Plugin Released”

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

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

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

  4. Great plugin!

    I have a question—it seems that if the caption contains a great deal of text it can exceed the height of the image. When this happens, and the mouse is eased out, users can see the caption box transitioning outside of the image at the top.

    Is there a way to hide that so the caption is never visible beyond the top of the image?

  5. Islamorada tarpon fishing involves the fishing of an prehistoric
    rare fish tarpon through the scientific name Magalops Atlanticus
    which is a prehistoric fish considered to be one in every
    of the diverse & interesting creatures across
    the country which can be present in both side of Atlantic also referred to as as the
    tarpum tarpon or else the silver king due to it’s majestic appearance & colour which lays 15 million eggs.
    Nowadays, these super coolers are used for both commercial and domestic purpose.

    Of course, lots of methods have evolved to try to avoid spooking fish out of your swim or
    even stop them from stopping feeding in the
    possible case of some line shy fish, and having them leave your swim.

    my web page – dock the party box nj

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>