jquery slideshow only show images with same class
===

I am using the jquery cycle plugin w/ pager. 

I am trying to get the the next/prev arrows to only page through items with an li class of image, skipping the items with a header class.

any help is appreciate <br />
/trace


Jquery

    $(function() {
    $('ul#slides').before('<ul id="nav" class="nav">').cycle({
        fx:     'fade',
        speed:  'slow',
        timeout: 0,
        next:   '#next2', 
    	prev:   '#prev2', 
        pager:  '#menu',
        pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#menu li:eq(' + idx + ') a'; 
            }
    });
    });


HTML

    <div id="main-nav">
	<ul id="menu">
           <li class="header">2010</li>
           <li class="image"><a href="#">Image01</a></li>
           <li class="image"><a href="#">Image02</a></li>
           <li class="header">2009</li>
	</ul>​
    </div><!-- end main-nav -->

		
    <div id="slideshow" class="pics">
	<ul id="nav" class="group">
		<li id="prev2" href="#">prev</a></li>
		<li id="next2" href="#">next</a></li>
	</ul>
		 

    <ul id="slides">

	<li class="header">
		<!-- empty no image -->
	</li>	

	<li class="image">
		<a class="fancybox" rel="gallery1" href="image01.jpg" "image01">
		<img src="image02.jpg" alt="" /></a>
	</li>
					
	<li class="image">
		<a class="fancybox" rel="gallery1" href="image02.jpg" "image02">
		<img src="image02.jpg" alt="" /></a>
	</li>

	<li class="header">
		<!-- empty no image -->
	</li>		
 			
    				
    </ul>
    </div><!-- end slideshow -->