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. Pingback: Best Celebrity Gossip Blog – The Latest Celeb News & Pictures – I … | Leonardo DiCaprio Celebrity Monitor

  2. Pingback: uberVU - social comments

  3. 1

    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

    • 2

      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

  4. 3

    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

    • 4

      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

  5. Pingback: Legendas deslizantes com jQuery - Blog do Marcelo

  6. 5

    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

  7. Pingback: jCapSlide: A jQuery Image Caption Plugin | Codrops

  8. 6

    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

  9. 8

    @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);

  10. 10

    Hello. Cool plugin, thanks for this. I’ve implimented it in my site (http://s90578.gridserver.com/wp/) on the 3 boxes near the top of the page.

    The only problem is that you can see the hidden caption momentarily while the page is loading, then it hides.

    Any suggestions on how to get around this?

    Kind regards, Russell

  11. 13

    Thanks for this, and thanks to MyRuiner as well! Adding that line fixed ie8 transparency issue for me too! Maybe that should be added as an update to the plugin? hint hint

    Thanks again!

  12. 14

    Thanks for this, and thanks to MyRuiner as well! Adding that line fixed ie8 transparency issue for me too! Maybe that should be added as an update to the plugin? hint hint

    Thanks again!

  13. 15

    Great plug-in, can’t up vote you enough!

    However, I need some help cody.

    I’m using it as a caption overlay on each of the product thumbnails on my client’s site http://www.j-bees.co.uk. Unfortunately it only seems to work properly in FF3 and IE7/8.

    In Safari (4.0.5), Chrome (5.0.375.99 Beta) and Opera (9.52) it hides the price/brand summary text and appears above the thumbnail rather than within it.

    My code works by first building the img DIVS for each thumbnail (using the “ic_container” class), and then after all these have been generated, I run the

    $(“.ic_container”).capslide

    which should apply to all classes where the class name is ic_container.

    Sorry for the long comment, but I couldn’t find your email anywhere

  14. 17

    Dear Cody,

    This is really great! Could you please help me with one doubt? The roll-over text is not anti-aliased in IE. but on Firefox there is no problem. How can we make your pluggin render smooth font on IE7 and IE8?

    Please help. You can see that on guardian.co.uk, the similar pluggin is used, but there is no anti-aliasing issue on guardian web site.

  15. 18

    Hiya,

    Well awesome thingy there! =)

    I am just wondering if theres any way to make the same effect happen vertically?

Comments are closed.