jCapSlide: A jQuery Image Caption Plugin

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

   this is great it’s work fine with me in firefox thanks
10. 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);
11. 9

    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)
12. 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
13. 11

    does not work with more than one per page ?

    greetz
14. 12

    Good plugin!
    Work with IE8 after add the js line.
    Thanks
15. 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!
16. 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!
17. 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
18. 16

    Sorry Cody, the link should be to my development site:

    http://www.equant-design.com/jbees
19. 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.
20. 18

    Hiya,

    Well awesome thingy there! =)

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

Comments are closed.