jQuery Cycle: How to add a title, caption and custom pager images

Question

I was able to get jQuery Cycle to dynamically generate the images I want. However, I am scratching my head on how to add a custom pager (using image sprites), title and caption box/watermark (opacy rgba(0.0.0.04) ) at the bottom-left corner of the slides.

The image array is already assigning the caption to the image's alt and the title to the image's title like so: <img src="banner[i].image" alt="banner[i].caption" title="banner[i].title" />

Here is the jsFiddle: http://jsfiddle.net/rkSqj/1/

I'd like to achieve something similar to http://slidesjs.com/examples/images-with-captions/ but I do not need the (Next/Prev) controls.

I can't get the pager to show up, let alone the other customizations >_< I'll really appreciate your help.

Although I am using jsFiddle, I am still adding the code for convenience ;-)

HTML:

<!-- #gallery.banner -->
    <div id="banner">
    </div>
<!-- /#gallery.banner -->

CSS:

@charset "utf-8";
#banner {
    width: 550px;
    height: 225px;
    float:left;
    box-shadow: -2px 15px 50px 10px #888888;
}
#banner a {
    margin: 0;
    padding: 0;
    color: #fff;
}
#banner img {
    width: 550px;
    height: 220px;
    border: 2px solid #DBDBDB;
    border-radius: 4px;

    padding: 4px;
    background-color: #F3F3F3;
}


/* Pager CSS */
#banner #pager.active {
    width:12px;
    height:13px;
    background:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png) 0px -12px;
}
#banner #pager.inactive {
    width:12px;
    height:13px;
    background:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png) 0px 0px;
}


/* Watermark CSS */
#banner #watermark {
    background-color: #000000;
    background-color: rgba(0.0.0.04);
}
#banner #watermark #title {
    color: #FFFFFF;
    font-weight: bold;
}
#banner #watermark #caption {
    color: #FFFFFF;
    font-weight: normal;
}

JS: var $banner = ; //The whole data is within jsFiddle

$(document).ready(function(){ $().append(' ');

for( $i = 0; $i < $banner.length; ++$i){
    $('#banner').append('<a href="' + $banner[$i].link + '"><img src="' + $banner[$i].image + '" alt="' + $banner[$i].caption + '" titile="' + $banner[$i].titile + '" /></a>');
}

$('#banner').cycle( {
    fx: 'fade',
    timeout: 1500,
    speed: 4000,
    pager: "#pager",
});

});

=== EDIT (11/21/2012) ===
Final revission: http://jsfiddle.net/omarjuvera/WX77f/18/

Thanks @eicto !!!

Answer 1

Add a caption to your <a> element, make a css for caption

sample

JS:

for( $i = 0; $i < $banner.length; ++$i){
        $('#banner').append('<a href="' + $banner[$i].link 
          + '"><img src="' + $banner[$i].image + '" alt="' + $banner[$i].caption + '" titile="'          
          + $banner[$i].titile
          + '" /><div class="caption" style="bottom:0">' 
          + $banner[$i].caption + '</div></a>');
    }

CSS

a .caption {
    margin-top: -10px;
    color:white;
    text-decoration: none;
    position: absolute;
    text-align: center;
    background: black;
    opacity: 0.6;
    width: 100%;
}

about pager, cycle have callback function to generate the pager, so i just generated same element that other plugin do:

http://jsfiddle.net/oceog/rkSqj/14/

$('#banner').cycle( {
        fx: 'fade', 
        timeout: 15000, 
        speed: 400,
        pager: "#pager",
        //build new pager!
        pagerAnchorBuilder: function(index,dom) {
        console.log(index,dom);
        return "<li><a href='#'>"+index+"</li>";
}
});

CSS:

#pager {
    margin:0px auto 0;
    top: 30px;
    width:100px;
    position: relative;
    z-index: 1005;
}

#pager li {
    float:left;
    margin:0 1px;
}

#pager li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    float:left;
    overflow:hidden;
    background-image:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png);
    background-position:0 0;
}
#pager li.activeSlide a {
     background-position:0 -12px;  
}
​

to html i just added <ul id="pager"></ul>