Cycle plugin with multiple instances on one page: how to show active image?

Cycle plugin with multiple instances on one page: how to show active image?

I have a page with multiple instances of the jquery cycle plugin that are each controlled with their own pager. I want to figure out how I can identify what the current (or "active") image is and have that page identifier stay as color #333333 (same as the hover state).

JQUERY:

  1. $(document).ready(function() {
  2.       $('.pics').each(function() {
  3.             var $nav = $('<div class="nav"></div>').insertAfter(this);
  4.             var $this = $(this);
  5.             $this.cycle({
  6.             fx:     'fade',
  7.             speed:   300,
  8.             timeout: 0,
  9.             pager:   $nav,
  10.             });
  11.       });
  12. });


CSS/HTML:

  1. .nav { margin: 0; float: right; }
  2. .nav a { background-color: #ffffff;  }
  3. .nav a:hover { background-color: 333333; }

  1. <div class="pics">
  2.       <img src="img/sample.gif" width="470" height="260"/>
  3.       <img src="img/sample2.gif" width="470" height="260"/>
  4.        <img src="img/sample3.gif" width="470" height="260"/>
  5. </div>