hi...trying very hard to get the jQuery cycle plugin advanced pager option to work!  Due to the fact that I am quite new to jQuery I have probably made a very silly mistake.  Any words of wisdom will be much appreciated!!

 

My css is copied as supplied...

<style type="text/css">
#slideshow { left: 20px }
#nav { width: 300px; margin: 15px;background:yellow;  }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
</style>

 

My jQuery call is as follows:

<script type="text/javascript">
$(document).ready(function() {
$(function () {
$('#slideshow').before('<ul id="nav">').cycle({
        fx:     'fade',
        speed:  2000,
        timeout: 3000,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
  } //end pageranchor
  }); //end cycle
 });  
}); // end ready()

</script>

 

And, my html is as follows:

<div id="right-side">
 <div id="slideshow">
 <img src="images/jewelry.png" width="200" height="200" />
 <img src="images/pottery.png" width="200" height="200" alt="pottery" />
 <img src="images/lighting.png" width="200" height="200" alt="lighting" />
 <img src="images/wallart.png" width="200" height="200" alt="wall art" />
 <img src="images/miscellaneous.png" width="200" height="200" alt="miscelleous" />
 </div> <!--close slideshow-->
 <div id="nav"></div>
 </div> <!--close right side-->

 

Thanks in advance to anyone who can straighten me out!!  :)