jQuery jCarousel Lite With Pretty Image Captions That Appear On Rollover

April 28, 2009 in Tutorials by OXP Editorial

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=”https://onextrapixel.com/examples/jquery-jcarousel-lite-and-jquery-captify/” download=”https://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