I admit I do not know jQuery or JavaScript that well. I am building a portfolio section. I was able to use jQuery to fade in and out each portfolio div but wanted to add the Cycle plug-in to paginate the pages within each section.

I can only get it to work for the first one, and really have no clue how to make it work on all portfolio pieces. i figure passing a variable to the class or id call but am not sure.

heres my jQuery code:
Code:
$(document).ready(function(){
	$('.portItem').hide();  // hide all
	$('#pt-bioSensory').fadeIn('900'); //first item fades in
	
	//fading effect for portfolio sections on thumbnail click
	$('.imageHolder a').click(function() {
		var port = '#pt-' + this.id;
		$('.portItem').fadeOut('900').animate({opacity: 1.0}, 900);	
		$(port).fadeIn('900');	
		return false;
	});
	
	//Cycle plugin code with first one working
	$('#pt-bioSensory .mainImage')
		.before('<div class="numbers">')
		.cycle({ 
			fx:     'turnDown', 
			speed:  'slow', 
			timeout: 0, 
			pager:  '.numbers' 
		});
The HTML (shortend):
Code:
<div id="colLftThin">
			<div class="imageHolder"><a href="#" id="bioSensory" style="background-image:url(images/port-thumbnails/BioSensory-Home.jpg)"> </a></div> 
            <div class="imageHolder"><a href="#" id="snp" OnClick="showMe('#snp');" style="background-image:url(images/port-thumbnails/snp-home.jpg)"> </a></div> 
            <div class="clearAll">&nbsp;</div>     
	  </div>
        <div id="colCenter">
        
        
         <!-- port item 1 -->
     	<div class="portItem"  id="pt-bioSensory">
           <div class="description">
        	<h3>BioSensory</h3>
            <div>
            <p>BioSensory is a manufacturer of insect pest repellant products that eco-friendly for families, pets and the environment. 
            I was asked to update the look of their site. I wanted to bring a consumer friendly look and feel while keeping a professional business look.</p>
            <p><a href="http://biosensory.com/">www.biosensory.com</a></p>
            </div>
            <div class="clearAll">&nbsp;</div>
          </div>
          
          <!--jQuery cycle adds number anchor links here -->   
          <div class="mainImage">
          	<img src="images/port-large/BioSensory-Home.jpg" />
            <img src="images/port-large/BioSensory-Products.jpg" />
            <img src="images/port-large/BioSensory-NightWatch.jpg" />
          </div>
        </div>
        
        <!-- port item 2 -->
        <div class="portItem"  id="pt-snp">
           <div class="description">
        	<h3>SNP Technologies Inc</h3>
            <div>
            <p>SNP technologies</p>
            <p><a href="http://www.biosensory.com/">www.biosensory.com</a></p>
            </div>
            <div class="clearAll">&nbsp;</div>
          </div>
            
          <div class="mainImage">
          	<img src="images/port-large/snp-home.jpg" />
            <img src="images/port-large/snp-consulting.jpg" />
            <img src="images/port-large/snp-nav.jpg" />
          </div>
        </div>
        <!--- end port item --->
See it at: http://doubletakesolutions.com/lucas/

any help would be appreciated
thanks