Multiple jQuery Slideshows on 1 page

jsfiddle here (updated)

What i have is a bunch of sets of images (like an album) that I want to display all on one page. So I have a box with single thumbnail for each album and use jquery to expand the box and replace the thumbnail with a slideshow of all the images for that album.

<div class="slideshowContainer">
  <div class="slide"><img /></div>
  <div class="slide"><img /></div>
</div>

The jquery inserts a 'slideInner" div around all the slides in order to swipe them to the side. This is where the problem lies. Because there are multiple instances of the slideshow on the page, it wraps around all divs with class 'slide' instead of just the ones for that album, effectively pulling all the images into the slideshow for one album and leaving any others blank.

The H开发者_开发百科TML is generated by PHP, so while I can add a unique class to each slideshow, I don't necessarily know the value.

EDIT: I updated the code to call the slideshow script as a function when clicked and gather the php-generated id for that element using $this on the clicked element. The slideshow now recognized only the correct images for that album, but there are now 2 new issues:

1.) the width of the 'slideInner' div is now being calculated too wide and so it continues to allow you to move the position, even though there are only x amount of 'slide' divs.

2.) strange things happen when you scale the box back down and then reopen it. I'm assuming this is because the Slideshow function has now been called twice on the same element. How would I terminate/reset the function when the box is closed?

---

I think you should just create a function to initialize the different albums and give it the id to only select the slides you want.

 function initAlbum(id){   
    var slides = $('#'+id+' .slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('.slideshowContainer').css('overflow', 'hidden');

   // Wrap all .slides with #slideInner div
   slides.wrapAll('<div class="slideInner"></div>')....

and on document ready do something like

$(".galleryimage-box").each(function(index, element){
    initAlbum(element.id);
});

But you also need to find another solution for the variables currentPosition which no is global for all album. Probably better to add a class to the visible image and that way keep track of which is selected (and also get which index it is list of slides).