multiple jquery slideshows on one page

[tabbu]

Hello,

I'm trying to add two slide shows on to a page using a jquery plugin. I've tried a number of ways to do this without success, can anyone give me a solution to this problem?

<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>

I've tried to recreate the above code by changing the class and div id names but this didn't work either. I'm also using the slides.min.jquery.js plugin.

Thanks for any solutions to this.

[VIPStephan]

Well, the code has selectors that are too general. For example, if you have several slideshows, how should it know which .caption to address if all it say is “address the element with class .caption, anywhere in the document”? Either you copy the function and change the selectors for each specific slideshow or you work with the each() function, like:

$('.slides').each(function() {
  var el = $(this);
  var caption = el.find('.caption');
  el.slides({
    …
    (your slider code here)
    …
  });
// everytime when $('.caption').animate() occurs it should be replaced with the variable defined above, i. e. caption.animate()
});

[tabbu]

Ok solution found, and it was staring me in the face and way too easy, how silly this javaScript malarkey is.

Thanks for your swift reply.

What i did is copied the entire code and added:

$(function(){
$('#slides_two').slides({

Then added the #slides_two id to html and css put in my styling and hey presto it all works, probably not the most elegant solution but it works.

Yours seems far more elegant and efficient.
Thanks again.