View Full Version : jQuery multiple jQuery Cycle plug-in on same page

09-11-2009, 04:43 AM
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:

$('.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);
return false;

//Cycle plugin code with first one working
$('#pt-bioSensory .mainImage')
.before('<div class="numbers">')
fx: 'turnDown',
speed: 'slow',
timeout: 0,
pager: '.numbers'

The HTML (shortend):

<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 id="colCenter">

<!-- port item 1 -->
<div class="portItem" id="pt-bioSensory">
<div class="description">
<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 class="clearAll">&nbsp;</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" />

<!-- port item 2 -->
<div class="portItem" id="pt-snp">
<div class="description">
<h3>SNP Technologies Inc</h3>
<p>SNP technologies</p>
<p><a href="http://www.biosensory.com/">www.biosensory.com</a></p>
<div class="clearAll">&nbsp;</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" />
<!--- end port item --->
See it at: http://doubletakesolutions.com/lucas/

any help would be appreciated