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

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

View demoDownload jCapSlide





Previous:
Next:

Tagged with:

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

View all contributions by

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

Related Articles

Feedback 53

Comments are closed.
  1. 1

    Hi there, first of all, great job!
    I like your work so much.

    I only had some little trouble like McEnroe did.

    As he already said I’ve got multiple elements which I’d like to “decorate” with this caption sliding effect.

    But the change they all have the same div id, actually I set it to #capslide_img_cont.

    So there is a way to make all them work?
    At the moment only the first work right… and it seams the script ends after it.

    Thank you again for your job and your support!

    Bye
    Carletto

  2. 2

    Hi guys I found a solution for the issue of not working repeated elements.

    I change the page script where it calls the plugin from $(“#capslide_img_cont”) to $(“.ic_container”).capslide so it won’t search for the ID element (that should be a single entity) but it will search for the CLASS element.

    Now it’s working like a charm.
    Hope this could be helpful!

    Thanks again
    Bye
    Carlo

  3. 4

    Thanks Carloalberto Fornea , i change my ID for the class from my div and works perfect!!!!

    thanks again

  4. 6

    To Carloalberto Fornea – I tried to find page script where it calls the plugin from $(“#capslide_img_cont”) like you did but I can’t figure it out. I am not a programmer but what you say makes sense.

    I’m trying to use cap slide on large images that appear from using swap image in Dreamweaver. Currently, the same text comes up when you hover over each big image. I think your solution could work. Can you tell me where I would find the code you changed? Thanks!

  5. 7

    How to display the caption and content from top to bottom when i mouse over the image. Now it is working from bottom to top;

  6. 9

    I have been looking around for an effect like this for WordPress. I’ve looked at Mosaic and some others. They all seem very cool. The problem is, no one gives any clear direction on how to install this in a WP site. :(

  7. 10

    I just wanted to thank Chris for putting in that fix for Safari. I believe width and height are defined in the original download, but I didn’t add them while implementing my own images at first. That really screws up how Safari handles this plugin. Not Firefox though.

  8. 11

    Hi,
    Great plugin! I have a question…. how can I add some character encoding support other than English, for example Persian?

Comments are closed.