jCapSlide: A jQuery Image Caption Plugin

Development November 23, 2009 by cody 13 Comments

Here is a new plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay.

You can call the plugin the following way:

$(elementID).capslide()

You can configure the plugin with the following properties:

caption_color: The text color of the caption
caption_bgcolor: The background color of the caption
overlay_bgcolor: The overlay color (tint color)
border: e.g. ‘2px solid #00000′ for a black border, leave empty for no border /li>
showcaption: Boolean value to show or hide the title of the caption initially

View demo Download jCapSlide

Tagged with: caption, image, jQuery, plugin

Discussion¹³ Join the discussion

Picard
December 4th, 2009 at 17:48

Great plugin! Works well across the different browsers & is nice for additional contextual info.

Im using it for blurb info on event pics as a call to action without cluttering up the image, I have href linked my background jpg image.

My only issue is the popup overlay actually blocks the images href link when it slides up, is there any way to make this click thru or to make the entire sliding div a link itself. Id prefer to keep the image linked with its own href so non javascript users can click on the picture to follow my link, while js users can click on the image or the sliding div to reach the same destination.

Thanks
cody
December 4th, 2009 at 18:07

Hi, thanks!

You can do the following.

where it is:

<img src=”images/example2.jpg” width=”180″ height=”240″ alt=”"/>
<div class=”overlay” style=”display:none;”></div>

put

<a href=”http://www.google.com”>
<img src=”images/example2.jpg” width=”180″ height=”240″ alt=”"/>
<div class=”overlay” style=”display:none;”></div>
</a>

Greetings
david
December 7th, 2009 at 07:06

hey i like ur plugin, i wanna know is there a way i can use this with a lightbox, so when u click on the image it opens up in a lightbox.

thanks
cheers
cody
December 7th, 2009 at 07:55

Hi, I’m sure you can. Just make sure you insert the “jQuery.noConflict()” so that you can use jQuery and Prototype together. Take a look <a href=”http://docs.jquery.com/Using_jQuery_with_Other_Libraries”>here</a> where this is explained.
greetz
Picard
December 10th, 2009 at 18:17

Hi cody,
Thanks for a quick reply. I had already wrapped a href around the divs like you posted above, it was not working for me for some reason, im using a difficultCMs, noinline css and everything has to be broken into little bits, can you add this link behavour to the example gallery?

I found one way around it for time being but its not the proper way, I linked all the caption text and styled it white, no underline :-/

Theres another sliding boxes & caption tutorial over at:
http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

They have the same effect, but the sliding boxes do not act like one large link, except for the rss example that slides between 2 large images. My plan for this text effect was to add a caption and intro text with Read more… link that changed on hover that linked thru to the article.

Ill also add css so there are no dotted outlines in firefox on clicking
Matt
January 6th, 2010 at 22:02

It does not work in IE 8, not even on your Demo, been trying to figure out what I killed and then saw that you dont have it working for IE either.

In IE the opacity does not work at all.

off to try other Opacity methods
tina
January 14th, 2010 at 23:17

this is great it’s work fine with me in firefox thanks
MyRuiner
February 18th, 2010 at 09:08

@Matt, in order to make opacity works in IE8, you can try to add the following line in the JS. file :

$(’.overlay’,$this).css(’filter’,'progid:DXImageTransform.Microsoft.Alpha(opacity=50)’);

right after :
$(’.overlay’,$this).css(’background-color’,o.overlay_bgcolor);
guild77
February 24th, 2010 at 12:13

Hi,

Great plugin! thank’s.
But I want scale thumbnail and crop to fit in thumbnail container.
exactly like this jquery plugin but with your caption effect

http://joanpiedra.com/jquery/thumbs/

This possible?

thanks
(i m french sorry)