How to apply jquery for particular class - php

Question

I am showing images in list with having next and previous button.
I have use this jquery in for loop so that it can more than one.
list1:
Prev <ul><li> img1 img2 img3....</li></ul> Next
list2:
Prev <ul><li> img1 img2 img3....</li></ul> Next
if i have three different image list on same page if i click on next Or prev of 1st list then its apply for all list.
how can i apply it for that particular list to move Next and prev.
I have used the code from ths link:http://css-plus.com/2010/09/create-your-own-jquery-image-slider/
i have used folloeing code:
Jquery:
$(document).ready(function(){
// Gallery
if(jQuery(".gallery").length){
// Declare variables
var totalImages = jQuery(".gallery > li").length,
imageWidth = jQuery(".gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery(".gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery(".gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if(jQuery(".gallery").position().left < 0 && !jQuery(".gallery").is(":animated")){
jQuery(".gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if(jQuery(".gallery").position().left > stopPosition && !jQuery(".gallery").is(":animated")){
jQuery(".gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
Html and php:
<?php foreach($records as $row) :?>
<div id="gallery-wrap">
<ul id="gallery" class="gallery">
<?php foreach($row['images'] as $image) :?>
<li>
<img src="<?php echo base_url();?>uploads/<?php echo $image['img']; ?> />
</li>
<?php endforeach ;?>
</ul>
</div>
<div id="gallery-controls" class="gallery-controls">
<a href="#" id="gallery-prev" >Prev</a>
<a href="#" id="gallery-next" >Next</a>
</div>
<?php endforeach ;?>

Answer 1

ok first of all....
1) IDs should always be unique... but in your case you have elements with same ID since it is in loop.. so either change it and makeit unique OR you can change it to class in your HTML code...
<div class="gallery-wrap">
-----^^---- change to class...
2) since you are using class , all your ID selector i.e # should be replaced by class selector . in your jquery code.
jQuery(".gallery-prev").click(function(){
--------^------ here
changes in your
HTML
<div class="galleryDisplayBlock"> //add new div
<div class="gallery-wrap">
<ul class="gallery">
<?php foreach($row['images'] as $image) :?>
<li>
<img src="<?php echo base_url();?>uploads/<?php echo $image['img']; ?> />
</li>
<?php endforeach ;?>
</ul>
</div>
<div class="gallery-controls">
<a href="#" class="gallery-prev" >Prev</a>
<a href="#" class="gallery-next" >Next</a>
</div>
</div>
JQuery
jQuery(".gallery-prev").click(function(){
var thisGallery=jQuery(this).parent();
if(thisGallery.find(".gallery").position().left < 0 && !thisGallery.find(".gallery").is(":animated")){
thisGallery.find(".gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery(".gallery-next").click(function(){
var thisGallery=jQuery(this).parent();
if(thisGallery.find(".gallery").position().left > stopPosition && !thisGallery.find(".gallery").is(":animated")){
thisGallery.find(".gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});