jQuery jCarousel Lite With Pretty Image Captions That Appear On Rollover

jQuery jCarousel Lite With Pretty Image Captions That Appear On Rollover

Circular row of scrolling thumbnails have been very popular on the net. It’s sleek yet simple. That’s why many web professionals like to use them. However, if you are thinking of a different way to show the caption of the thumbnails instead of the usual way of having it displayed below the images or as a tooltip box, you can try using the following tutorial below.

In this tutorial, we will be using jQuery, a popular JavaScript framework combining “jQuery jCarousel” and “jQuery Captify Plugins” together to create a slick and cool way of showing the thumbnails and captions. Thumbnails can be scrolled with the use of previous and next buttons and when rolling over any thumbnail, the caption or the title of the thumbnail will slide up.

jQuery Flower

[tut demo=”http://www.onextrapixel.com/examples/jquery-jcarousel-lite-and-jquery-captify/” download=”http://www.onextrapixel.com/examples/jquery-jcarousel-lite-and-jquery-captify/jquery-jcarousel-lite-and-jquery-captify.zip”]

Using jQuery

First download the latest jQuery version 1.3.2. For the circular scrolling images we will be using jCarousel Lite a super light weight jQuery plugin that takes you on a carousel ride filled with images and HTML content.

As for the pretty image captions or titles that will appear on rollover of the thumbnails, we will be using jQuery Captify plugin. For full details and the plugin configuration, you can check out the author site.

Now, let’s start by adding the jQuery framework, jCarousel Lite and jQuery Captify into your HTML file.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js/captify.tiny.js"></script>

After you have included jquery-1.3.2.min.js, jcarousellite_1.0.1.pack.js, captify.tiny.js. Wrap the JavaScript below in a script tag and then place it at the head of your document,

<script type="text/javascript">
    //jCarouselLite
    $(function() {
        $(".slider").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 5
    });
});

//Captify
$(document).ready(function(){
    $('img.captify').captify({
    // all of these options are... optional
    // speed of the mouseover effect
    speedOver: 'fast',
    // speed of the mouseout effect
    speedOut: 'normal',
    // how long to delay the hiding of the caption after mouseout (ms)
    hideDelay: 500,
    // 'fade', 'slide', 'always-on'
    animation: 'slide',
    // text/html to be placed at the beginning of every caption
    prefix: '',
    // opacity of the caption on mouse over
    opacity: '0.7',
    // the name of the CSS class to apply to the caption box
    className: 'caption-bottom',
    // position of the caption (top or bottom)
    position: 'bottom',
    // caption span % of the image
    spanWidth: '100%'
    });
});
</script>

Here is the HTML markup.

<div id="list">
<div class="prev"><img src="images/prev.jpg" alt="prev" /></div>

     <div class="slider">
     <ul>
     <li>
         <a href="#" title="Title 1"><img src="images/1.jpg" alt="Title 1" class="captify" /></a>
     </li>
     <li>
         <a href="#" title="Title 2"><img src="images/2.jpg" alt="Title 2" class="captify" /></a>
     </li>
     <li>
         <a href="#" title="Title 3"><img src="images/3.jpg" alt="Title 3" class="captify" /></a>
     </li>
     <li>
         <a href="#" title="Title 4"><img src="images/4.jpg" alt="Title 4" class="captify" /></a>
     </li>
     <li>
         <a href="#" title="Title 5"><img src="images/5.jpg" alt="Title 5" class="captify" /></a>
     </li>
     <li>
         <a href="#" title="Title 6"><img src="images/6.jpg" alt="Title 6" class="captify" /></a>
     </li>
     <li>
         <a href="#" title="Title 7"><img src="images/7.jpg" alt="Title 7" class="captify" /></a>
     </li>
     </ul>
</div>

<div class="next"><img src="images/next.jpg" alt="next" /></div>
</div>

Here is the style for jQuery jCarousel Lite.

/************************************************
JCAROUSEL LITE
************************************************/
#list {
     height:130px;
     width:880px;
     margin:30px auto;
}

.slider {
     float:left;
     left: -5000px;
     margin:15px;
     position:relative;
     visibility:hidden;
}

.slider ul {
     height:100px;
     width:600px;
}

.slider ul li {
     padding:0 20px;
}

.slider ul li img {
     cursor:pointer;
     height:100px;
     padding-top:3px;
     width:120px;
}

.prev {
     cursor:pointer;
     float:left;
     padding-top:60px;
}

.next {
     cursor:pointer;
     float:right;
     padding-top:60px;
}

And here is the style for jQuery Captify.

/************************************************
CAPTIFY CAPTION
************************************************/
.caption-top, .caption-bottom {
     background: #000000;
     color: #ffffff;
     cursor:default;
     padding:2px;
     font-size:11px;
     text-align:center;
}

.caption-top {
     border-width:0px;
}

.caption-bottom {
     border-width:0px;
}

.caption a, .caption a {
     background:#000;
     border:none;
     text-decoration:none;
     padding:2px;
}

.caption a:hover, .caption a:hover {
     background:#202020;
}

jQuery Flower

Conclusion

This tutorial has been tested on IE6, IE7, FireFox 3 and Safari 4.

For a clear overview and how it works, you might want to download the files to test it out too. Enjoy!

Comments

  1. / Reply

    Nice job tying the two plugins together! It’s cool to see the merger of the two :-)

    Keep it up,
    -Brian (I’m the one who made Captify)

      • Terrance,
      • May 7, 2009
      / Reply

      Thanks Brian for coming by oxp!

      In fact you’ve made Captify easy to use, so I have the chance to use it.

      Thank for the plugin :)

    • cristina,
    • June 26, 2009
    / Reply

    Hi there,
    I was wondering if there’s a way to make the lateral arrow work with the mouseover instead of clicking them,
    thanx lot

  2. / Reply

    Hi,
    When photos are less than 3 and “visible” is set to “5” or “6”, the two or one photos we have are not visible. The control arrows and the carousel block are visible but not the images. I use firebug and I see that the problem is on generated width of “ul” element, but I can’t fix it.

    Have you any ideas?
    p.s. Sorry for my poor English.

      • Terrance,
      • June 30, 2009
      / Reply

      Hi Angel,

      In this section of the code, change current visible no. 5 to the number you want for the image to be visible.

      //jCarouselLite
      $(function() {
      $(“.slider”).jCarouselLite({
      btnNext: “.next”,
      btnPrev: “.prev”,
      visible: 5
      });

      1. / Reply

        The srange in my case is that if I have 3-4 images and the visible number is set ot 6 then images are visible but not if they are 1 or 2.
        I use jcarousel lite for an dinamic news galleries, and by default I set to 6 images and this is what I want. But if there is a news with 2 images as I say this images are not visible. One solution will be for every news to count images and to set diferent number of “visible” by using php.
        Any other ideas?

          • Terrance,
          • June 30, 2009
          / Reply

          I does not quite understand what’s your problem.

          You can try scanning the folder for the list of image then loop through the list of images, so whenever new images are added to a folder. It will automatically be included in the galleries list.

          Something like:
          < div class="slider">
          < ul>
          < ?php $album_dir = 'url to your folder'; $image_names = scandir($album_dir, 1); foreach ($image_names as $image_name) { ?>

        1. < a href="#" title="Title 1">
          < img src="images/.jpg” alt=”Title 1″ class=”captify” />
        2. < ?php } ?>

          < /ul>
          < /div>

          hope this helps.

  1. /

    Hi, again

    The situation is:
    “visible:6”
    news 1 – 7 photos – ok
    news 2 – 4 photos – ok
    news 3 – 2 photos – not visible
    so for news 2 and 3 photos are less than number of visible photos set by default but in news 2 photos are visible but not for news 3. I hope now you will understand what to explane.
    This result you can see when try this 3 described cases with Download Demo, you share in this article. My last solution is to add default image(company logo) to complete number of photos to 6 if they are less.
    When the site is online I will post link here to see the result.

    p.s. by the way, nice work and thanks for your comments ;)

    • Rex,
    • February 10, 2011
    / Reply

    Angel,

    I had the same issue with using jCarouselLite on IE7. I use Lotus Notes v8 and Domino to create dynamic sites using jQuery & Ajax. Anyway if I have the setting to show 4 images, and if there are less, it blows up! Something to do with the tag. So what I did is added the width of the to , and this opened it in IE7.
    I also added code to compute the “visible: x” number to how many slides I have.

    Hope this helps!

    • Terrance,
    • June 30, 2009
    / Reply

    Hi Angel,

    Thank you and I’ll be looking forward to see your work. :)

    1. / Reply

      Hi Terrance,
      Here is the result of my design customization of jCarouselLite:
      http://www.balkanvegetables.eu/en/stages/detail/id/12

      Hope you like it!

    • Gozilla,
    • July 2, 2009
    / Reply

    Hi, really cool carousel!
    Any body knows how to set autostart and loop?

    Tnx

      • Terrance,
      • July 2, 2009
      / Reply

      You might want to check out jCarouselLite Site.

      Under the demo section, it tells you how to customize an auto scroll and by default the jCarouselLite is running a circular loop.

      Hope this helps.

        • Gozilla,
        • July 2, 2009
        / Reply

        Yes, i’ve solved as you answer me.
        Tank u!

          • Terrance,
          • July 2, 2009
          / Reply

          You’re welcome Gozilla. It’s always a joy to share and help one another if possible. Meanwhile, do stay tuned for more tips and information @ OXP.

      1. / Reply

        nice job
        thanks so much

    • Stuart Kirkland,
    • October 20, 2009
    / Reply

    Please can someone help me, I have tried the carousel and i seem to be having problems, it works perfectly in Firefox, But I seem to be having issues in IE7, IE6 I would appreciate if someone can help me please. The URL is

    http://daro-cane-new.dev.triad.uk.com/Furniture-Ranges/Cane-Furniture

    Stuart Kirkland

    • Roland,
    • October 30, 2009
    / Reply

    Hi,
    I’m facing the problem when displaying 3 different set of pictures within the same page. Fist time is ok when js is downloaded from the server and set the dimensions for itself but if I choose another set of picture with different dimensions (under the same div id), the carousel get crazy, and only reload of the page helps.
    Can someone tell me a solution how to reset the carousel for each page load on the client (browser) side? (For the full carousel js there exist such reset solution but for the lite one.)
    Thanks,
    Roland.

    • ooty,
    • December 27, 2009
    / Reply

    Thanks for your plug in, it made my work easy

  • / Reply

    nice one thanks for this

    • Roland,
    • January 14, 2010
    / Reply

    The soluton was this: I removed the line “.css(“height”, li.height())” so the hight will be set to the maximum one automatically.

    • Sander,
    • February 16, 2010
    / Reply

    Hey, great! I was wondering how I could add an other mouse-over effect to this; like an image in black and white and on mouse-over it turns to full-color!?

    • Jeff,
    • February 26, 2010
    / Reply

    Hi,

    How do I change the style element here as it shows up in my html.

    I need to decrease the width to 700px but that style= is not anywhere in my wordpress files or css.

    I added an element.style to the css and that did not work.

    Any help would be greatly appreciated.

    Thank you

    • Jeff,
    • February 26, 2010
    / Reply

    wow, guess the particular case did not show up. Basically, it is the:

    div=slider style= overflow: hidden; visibility: visible; position: relative; z-index: 2; left: 0px; width: 800px; that needs to be changed to 700px

    Thanks

  • / Reply

    how to build an auto-scrolling..?

    • Erik,
    • March 13, 2010
    / Reply

    Trying to run it as auto-scrool :( what happens if you are using id instead of class?

  • / Reply

    Nice tutorial – sure to book mark – this is going to help out so much. jQuery plugin’s are just fantastic!

    • Zeljka,
    • June 17, 2010
    / Reply

    Hi,

    i really like your tutorial, it’s really really really something I want to use.

    I started learning things about web design this year and this is my first web page and I’m of course experiencing a lot of problems :( And I’m really hoping you or somebody else can help me.

    I incorporated your gallery into my website and everything seems to work except in IE6. The images are there but they don’t load completly, I tried everything and don’t know what to do anymore.

    Here is the link: http://metalurban.eu5.org/proizvodi/cerada/cerada.htm

    Thank you very much in advance ::))))

    • ooty,
    • June 29, 2010
    / Reply

    nice tutorial i will use this in my website thanks for sharing

    • dr,
    • October 30, 2010
    / Reply

    hi! I love this carousel and want to use it but I’d like to make the captions appear below the image and not cover it… is there any way to do that??? I’ll really appreciate any help!
    thx! =)

    • Chris,
    • November 3, 2010
    / Reply

    Would I be able to implement the jQuery Captify with the thumbs from Pikachoose? Pikachoose seems to use the carousel and jquery and already has captions for the large photos, but my client wants rollover captions for the thumbs to be different. Would this be possible to implement?

    • Scott,
    • November 23, 2010
    / Reply

    This plugin works really well! Adding AutoScroll was easy enough. What would make it great is HOW TO MAKE IT PAUSE? Any way to have it pause when a user mouses over one of the images?

  • / Reply

    hello i used you plugin in my site but it is not fully loaded at first time. Can you help me what is the problem? Have a look at my site feralplanetnepal.com

    • Donsyl,
    • January 27, 2011
    / Reply

    Very nice job my brother. I use it with images whitch are in my Database, It’s dynamic and very well. Thank you so much.

    • Vabee,
    • February 4, 2011
    / Reply

    You hv done awesome work but i dont want it in looping. so what should i do to stop slider after last image?
    Plz Suggest. I want to use it for my website!

    • kim,
    • February 8, 2011
    / Reply

    Hi! This is great! Thank you! Is there a way to make it scroll vertically instead of horizontally?

    • Paul,
    • April 23, 2011
    / Reply

    Hi,

    Do you have any idea why this is not working in Firefox 4? You have to moving mouse in order for that to work… On rest of the browsers it seems to be fine. But Firefox is one of the most importnat to me!

    Could you help with that?

    Cheers,
    Paul

    • Patrick,
    • June 11, 2011
    / Reply

    Unfortunately in IE9 captions are part of transparency. So even I set #fff font color, its grey, if transparency is set to 0.0 then captions are #fff any idea how to fix this bug?

    • Robert,
    • July 6, 2011
    / Reply

    I have the same problem with IE9
    It looks to me like IE 9 makes the caption’s text use the same opacity as the background.
    Sadly, it works fine in IE8, but not IE9.
    Any plans to fix this bug?

  • / Reply

    i have one issue with this if i use fx: ‘scrollRight’ with this plugin and next previous buttons when you click previous it is not scrolling it to left…

  • / Reply

    thanks very useful

    • Darren,
    • July 27, 2011
    / Reply

    Hi, I’ve got his working with sorgilla’s version http://sorgalla.com/jcarousel/ and it works great in all browsers except ie7, what happens is that the hyperlink that wraps the image is disabled. What could be causing this?

  • / Reply

    As you can see in your own example or on my website: There is still a problem with the captions in IE. No matter what I tried, the color remains dark (If the caption color is set to white, it becomes a grey, if the color is set to red, it becomes a brown).

    To me, it looks like a Z-Index problem, the overlay goes in front of the caption in IE. But I am by no means a programmer.

    I tried every possible thing I could imagine, but still no luck. Any help with that is gladly appreciated.

    Greetings from Germany

    • jay,
    • August 25, 2011
    / Reply

    how can i make it scrolling automaticly

  • / Reply

    hi i starting php recently and your site help me a lot.very great work brother than you making for this site….

  • / Reply

    Hi Terrance,

    I was wondering if you could drop by my site real quick I have the SLR Lounge Photo Feature Theme. I don’t know what the heck happened, but the jCarousel is only working on the homepage. It was working on every page. Fire Bug is telling me the Jquery isn’t defined. Everything I’ve read isn’t helping solve the problem. Can you help me out and tell me why you think that all of the sudden it’s not loading on all pages.

    Thanks in advance Terrance,

    Michael

    • jonathan-ely,
    • September 18, 2011
    / Reply

    buen aporte hay que darte un premio x eso , gracias

    • umair,
    • October 24, 2011
    / Reply

    Many of them are free. And many of the ones that aren’t, you can probably find through Tineye. Anyway, some seriously beautiful images.

  • / Reply

    was wondering if you could drop by my site real quick I have the SLR Lounge Photo Feature Theme. I don’t know what the heck happened, but the jCarousel is only working on the homepage. It was working on every page. Fire Bug is telling me the Jquery isn’t defined.

    • dee,
    • October 29, 2011
    / Reply

    Thank you! Very handy, I’ve used it on my website …

    http://fitnessjunk.nl/

    is it possible to integrate auto scroll?

    thanks you for your comment.

    greets, Dee

    • Marie,
    • October 31, 2011
    / Reply

    The Prev and Next buttons are showing up above and below the gallery rather than on the same line.

    Any ideas on what the problem might be?

    Thanks,

    Marie

    • Brigitte,
    • November 8, 2011
    / Reply

    since a few days, I´m trying to install this cool slider. But the images will not be showed… I could need help…

    Thanks in advance Brigitte

    • Brigitte,
    • November 8, 2011
    / Reply

    OK, I am one step further, the images appears , but verticaly…

    regards Brigitte

    • Steve,
    • November 9, 2011
    / Reply

    to make it so it doesn’t loop, no looping, open the carousel js file, ie. jquery.jcarousel.min.js, and where it says “carousel:true” make it “false”

  • / Reply

    Hey…thanks for this awesome tut. <3 the site.

    Any solutions to the IE 9 caption bug?

    • IE 9 FIX,
    • January 6, 2012
    / Reply

    .caption-top, .caption-bottom
    {
    background:#fff;
    color: #000000;
    cursor:default;
    padding:2px;
    font-size:11px;
    text-align:left;
    filter: alpha(opacity=100);
    }

    • Jude,
    • January 15, 2012
    / Reply

    Hello! I love your carousel, I am using it after plugging through the jcarousellite site and not getting that to work.

    My question is how to accomplish clicking on the images and a larger version showing up in another div. The “custom” widget on http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo does this, but my javascript skills are level…. zero. I have created a separate div and attached an id for css styling, and messed around with mixing your very good example with the very poorly documented (for people like me) site referenced above.

    Please help?

    Thanks!

    • Jude,
    • January 15, 2012
    / Reply

    P.S. Because the creator of the site uses some pretty complicated javascript and CSS to hide/show pages, once you click the link http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo you have to choose “Custom” under “DEMO” on the right side of the page to see what I’m asking about.

    I just need my carousel to display a larger image when the thumbnail in the carousel is clicked.

    THANK YOU!

  • / Reply

    Usuful Codes !

    Jqury is king and you are thebest

    Every Week I folow your site…..
    I share it in my Face book now….
    Thank You

  • / Reply

    Worked it out nice, thanks for sharing!!

    • lta,
    • May 14, 2012
    / Reply

    tnx a lot

    • Azman,
    • June 27, 2012
    / Reply

    Hi Terrance,

    I’ve been using the code given. However, I would like to add some more functions in which the images can be moved automatically without having to click on the next or prev button. I am sure it can be done but I can’t do it. I spend time a day to make the function but failed. Can u help me plzz.

    Tqvm.

    • jack,
    • July 4, 2012
    / Reply

    Hi,

    How (if) can i change the speed of moving?

    Thank You

  • / Reply

    Hi
    how can i make this touchable

    • Nosheen,
    • November 12, 2012
    / Reply

    Nice Work, I used this in my website and it gives perfect result. Many Thanks

  • / Reply

    I found that to correct the problem with text opacity in IE, I needed to modify the jquery that is included the download. In jquery-1.3.2.min.js, find the spot where it says opacity:0.5 and change it to opacity:0:8.

    • Jake,
    • February 7, 2013
    / Reply

    Very nice , attractive and easy code slider..thanks a lot for this act….

    • Dere Ezekiel,
    • July 14, 2013
    / Reply

    THIS IS THE BEST CAROUSEL ELASTISLIDE THAT I CAME ACROSS… EASY TO MODIFY WITH A LITTLE KNOWLEGE OF CSS. THANX A LOT

    • Jordan Charters,
    • December 20, 2013
    / Reply

    Is it possible to change the colour of particular List-Items? They are all using the same #000.

  • Leave a Reply to طراحی سایت Cancel reply

    Your email address will not be published. Required fields are marked *

    Deals

    Iconfinder Coupon Code and Review

    Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

    WP Engine Coupon

    Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

    InMotion Hosting Coupon Code

    InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

    SiteGround Coupon: 60% OFF

    SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.