jCapSlide: A jQuery Image Caption Plugin

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 […]
jCapSlide

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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:

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

Tagged with:

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

http://tympanus.net/codrops/author/cody/

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 53

Comments are closed.
  1. Hi, and thank you so much for this amazing plugin. been trying many others but but I chose yours 😉
    I do have 1 little question: i can’t figure out how i can have for example a container of 200px, a picture inside of 100px and the make the hover work on the 200px width
    [div container of 200px]
    [img width=100px]
    Caption
    [/div]
    I managed to have the caption’s width in 200px but i can display it only when i hover the image of 100px, that means that i have a 50px blank space in the left and right of the image 🙁
    Thanks a lot for your help

  2. Hi,

    I have tried inserting the IE8 piece of code but it does not work (js stops working completely). I copied this from above:

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

    and pasted it in its entirety after this line in js.

    $(‘.overlay’,$this).css(‘background-color’,o.overlay_bgcolor);

    Is there a typo or am I missing something? Any help much appreciated

  3. I solved issue with IE8 script. I had to delete and replace each single quotation.

    Hope that helps any others that encounter problem. Works fine in IE8 now.

    Great plugin. Thanks

  4. here is the code i use for wordpress in order to count the number of image on my front page from a certain div id

    thisOne = document.getElementById(“DIV ID”);
    items = thisOne.getElementsByTagName(“img”);

    var numberofpic = items.length ;
    var i = 1 ;
    while (i <= numberofpic) {
    $("#capslide_img_cont_" + i).capslide({
    caption_color : 'white',
    caption_bgcolor : 'black',
    overlay_bgcolor : 'black',
    showcaption : true
    });
    i++ ;
    }

    with that code i dont need to call the plugin for each pic

  5. @barney_nest

    Hello
    how did you solved the issue of IE? I didn’t understand.. could you please help me out?

  6. Hello!

    Great plugin! I have created this in joomla module, it works good. but it shows caption on one image not fo all images.

    Any help please?

  7. I have the same problem as Rahul it only displays on the first image that comes from my php loop. The rest are not working thay all refrence the same class. Any chance of a little heads up on this one ?

  8. When you wrap this in the “a” attribute it becomes invalid markup, has anyone got around this?

  9. I am having the same problem with the “a” tags, this plugin is great but I wish I knew this before because now I have to remove it and it takes so much work. Can you please find a solution for this?

  10. Hi,

    I have done it in my php file of Joomla module like this and it works good. Tutotrial: beginning of php code add this code $i=1; and in the end of caslide_img_cont add this php code like blow capslide_img_cont
    and in the end of php code add end tags $i++; like this
    This php code create numbers, if change this number code $i=1 one to 10, it will starts from 10 to 11 and … how much file you have like it create numbers from capslide_img_cont10 to capslide_img_cont100 and that works and sorry about my english:D

  11. For anyone having trouble getting this to work on Safari or Chrome like Shazman, here is the solution. Make sure to define the image width and height in the html. So, your image must look something like this:

    Not defining the height and width for some reason makes the caption load at the top of the image in Safari and Chrome. Simple fix. Great Plugin!

  12. Sorry, the html didn’t show up. The image must have a size definition like this: width=”294″ height=”217″ within the image tags.

  13. hi. in what part do i edit so that the caption slides up and covers the whole image? thanks.

  14. Hi there! Great plugin, I love it! But I have one tiny problem. If I do use the same div id for the ic_container class only the first picture/caption will work but the others won’t. I would like to use this inside a wordpress loop so I need this to work or I have to find any other way to automate the id in order to make it work with different posts… Any solution? Thank you very much!