FadeSlideShow Multiple instances.

FadeSlideShow Multiple instances.

Hi All,

I am in the process of modifying the fadeslideshow by Pascal Bajorat as I found that it was not capable of supporting multiple slideshows on the page.

I am to the point where the i can have multiple slideshows on the page but the Next and prev buttons only effect the last slideshow that is being rendered.  My initial thoughts is the array of slideshow items that i create to control the count and fade in/ out effects for the slides is not being associated seperately with each slideshow but being overwritten by each successive slideshow.  The reason i am thinking this is that the passed parameters are also being overwritten by the later implemented slideshows.

If anyone can let me know what i have done wrong or point me in the direction with some samples that would be awesome. Im still pretty new to jquery so def still in the deep end.  Also if there are better ways to do anything please let me know. Code attached below.

Thanks in advance.

  1. (function($) {
  2.     $.fn.fadeSlideShow = function(options) {
  3.         return this.each(function() {
  4.             settings = $.extend({
  5.                 width: 640, 
  6.                 height: 480,
  7.                 speed: 'slow', 
  8.                 interval: 3000,
  9.                 NextElement: '',
  10.                 NextElementText: '',
                    PrevElement: '',

  11.                 PrevElementText: '',
  12.                 autoplay: true
  13.             }, options);

  15.             // set style for wrapper element
  16.             $(this).css({
  17.                 width: settings.width,
  18.                 height: settings.height,
  19.                 position: 'relative',
  20.                 overflow: 'hidden'
  21.             });

  23.             // set styles for child element
  24.             $('> *', this).css({
  25.                 position: 'absolute',
  26.                 width: settings.width,
  27.                 height: settings.height
  28.             });

  30.             // count number of slides
  31.             var items = $("#" + this.id + " ." + this.id + "_slide");
  32.             var current = null;
  33.             var currNo = items.length - 1;

  35.             autoplay = function() {
  36.                 intval = setInterval(function() {
  37.                     current = (current != null) ? current : items[(items.length - 1)];
  38.                     currNo = $.inArray(current, items) + 1

  40.                     currNo = (currNo - 1);
  41.                     $(items[currNo]).fadeOut(settings.speed);

  43.                     currNo = (currNo - 1);
  44.                     if (currNo == -1) { currNo = items.length - 1; }
  45.                     $(items[currNo]).fadeIn(settings.speed);

  47.                     current = items[currNo];

  49.                 }, settings.interval);
  50.             }

  52.             stopAutoplay = function() {
  53.                 clearInterval(intval);
  54.                 intval = false;
  55.                 if (settings.PlayPauseElement) {
  56.                     $('#' + settings.PlayPauseElement).html(settings.PlayText);
  57.                 }
  58.             }

  60.             jumpTo = function(newIndex, curIndex) {
  61.                 $(items[curIndex]).fadeOut(settings.speed);
  62.                 $(items[newIndex]).fadeIn(settings.speed);
  63.                
  64.                 currNo = newIndex;
  65.             }

  67.             if (settings.NextElement) {
  68.                 if (!$('#' + settings.NextElement).css('display')) {
  69.                     $(this).after('<a href="#" id="' + settings.NextElement + '">' + settings.NextElementText + '<\/a>');
  70.                 }

  72.                 $('#' + settings.NextElement).bind('click', function() {
  73.                     nextSlide = (currNo <= 0) ? items.length - 1 : currNo - 1;
  74.                     stopAutoplay();
  75.                     jumpTo(nextSlide, currNo);
  76.                     return false;
  77.                 });
  78.             }

  80.             if (settings.PrevElement) {
  81.                 if (!$('#' + settings.PrevElement).css('display')) {
  82.                     $(this).after('<a href="#" id="' + settings.PrevElement + '">' + settings.PrevElementText + '<\/a>');
  83.                 }

  85.                 $('#' + settings.PrevElement).bind('click', function() {
  86.                     prevSlide = (currNo >= items.length - 1) ? 0 : currNo + 1;
  87.                     stopAutoplay();
  88.                     jumpTo(prevSlide, currNo);
  89.                     return false;
  90.                 });
  91.             }

  93.             if (settings.autoplay) { autoplay(); } else { intval = false; }
  94.         });
  95.     };
  96. })(jQuery);