title: jQuery Cycle: How to add a title, caption and custom pager images
body: <p>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 <code>rgba(0.0.0.04)</code> ) at the bottom-left corner of the slides.</p>
  
  <p>The image array is already assigning the caption to the image's <code>alt</code> and the title to the image's <code>title</code> like so: <code>&lt;img src="banner[i].image" alt="banner[i].caption" title="banner[i].title" /&gt;</code></p>
  
  <p>Here is the jsFiddle: <a href="http://jsfiddle.net/rkSqj/1/" rel="nofollow noreferrer">http://jsfiddle.net/rkSqj/1/</a></p>
  
  <p>I'd like to achieve something similar to <a href="http://slidesjs.com/examples/images-with-captions/" rel="nofollow noreferrer">http://slidesjs.com/examples/images-with-captions/</a>
  but I do not need the (Next/Prev) controls.</p>
  
  <p>I can't get the pager to show up, let alone the other customizations >_&lt;
  I'll really appreciate your help.</p>
  
  <p>Although I am using jsFiddle, I am still adding the code for convenience ;-)  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- #gallery.banner --&gt;
      &lt;div id="banner"&gt;
      &lt;/div&gt;
  &lt;!-- /#gallery.banner --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>JS:
  var $banner = ; //The whole data is within jsFiddle</p>
  
  <p>$(document).ready(function(){
      $().append('        ');</p>
  
  <pre><code>for( $i = 0; $i &lt; $banner.length; ++$i){
      $('#banner').append('&lt;a href="' + $banner[$i].link + '"&gt;&lt;img src="' + $banner[$i].image + '" alt="' + $banner[$i].caption + '" titile="' + $banner[$i].titile + '" /&gt;&lt;/a&gt;');
  }
  
  $('#banner').cycle( {
      fx: 'fade',
      timeout: 1500,
      speed: 4000,
      pager: "#pager",
  });
  </code></pre>
  
  <p>});</p>
  
  <p><br/><br/><br/>
  <strong>=== EDIT (11/21/2012) ===</strong>
  <br/>
  Final revission: <a href="http://jsfiddle.net/omarjuvera/WX77f/18/" rel="nofollow noreferrer">http://jsfiddle.net/omarjuvera/WX77f/18/</a></p>
  
  <p>Thanks @<a href="https://stackoverflow.com/users/815386/eicto">eicto</a> !!!</p>