CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sushil Raghav
Sushil Raghav

Reputation: 253

How can we increase slides limit to dynamic currently it set for only 3 slide

I want to create same fadeIn and fadeOut effect which is shown in given below example:

http://www.spicypeanut.net/Slideshow/Slideshow.html

http://www.spicypeanut.net/Blog/jQuery%20Slideshow.html

But the issue is - this example was created only for 3 slides and i want more then 3 slides or need this to be dynamically increased.

but how do i modify the script that it gets the maximum amount of slides automatic? If i generate the slide dynamic within a cms for example no one can say what the maximum number of slides will be.. so i have to update the *.js everytime by hand at this parts :/ 

if (this.Last < 1) { 
this.Last = 3;
} 

if ($$.Slideshow.Counter > 3) 
{ 
$$.Slideshow.Counter = 1; # 
}

Would be nice if you could help me (and i think many others) at this point :)

Below is the JS used in this example:

var $$ = $.fn;

$$.extend({
  SplitID : function()
  {
    return this.attr('id').split('-').pop();
  },

  Slideshow : {
    Ready : function()
    {
      $('div.tmpSlideshowControl')
        .hover(
          function() {
            $(this).addClass('tmpSlideshowControlOn');
          },
          function() {
            $(this).removeClass('tmpSlideshowControlOn');
          }
        )
        .click(
          function() {
            $('div.tmpSlide').hide();
            $('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');

            $('div#tmpSlide-' + $(this).SplitID()).show()
            $(this).addClass('tmpSlideshowControlActive');
          }
        );

      this.Counter = 1;

      this.Transition();
    },

    Transition : function()
    {
      if (this.Interrupted) {
        return;
      }

      this.Last = this.Counter - 1;

      if (this.Last < 1) {
        this.Last = 3;
      }

      $('div#tmpSlide-' + this.Last).fadeOut(
        'slow',
        function() {
          $('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
          $('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
          $('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');

          $$.Slideshow.Counter++;

          if ($$.Slideshow.Counter > 3) {
            $$.Slideshow.Counter = 1;
          }

          setTimeout('$$.Slideshow.Transition();', 5000);
        }
      );
    }
  }
});

$(document).ready(
  function() {
    $$.Slideshow.Ready();
  }
);

Even i have also done some R&D and found one more amazing issue :

When i increased its Last vale 3 to 5 then its showing problem in navigation controls - Like if your slide is on 4 then if you clicked on 2 then your navigation will be moving on previous track mean it will move to 5 instead of 3.

So please if someone can help me out in this.

Upvotes: 0

Views: 422

Answers (1)

Terry
Terry

Reputation: 66188

Instead of setting a static value for the number of slides, use jQuery to fetch the number of slides instead, with .length:

// Get number of slides
var slideCount = $("#tmpSlideshow > .tmpSlide").length;

if (this.Last < 1) { 
    this.Last = slideCount;
} 

if ($$.Slideshow.Counter > slideCount) { 
    $$.Slideshow.Counter = 1;
}

Upvotes: 1

Related Questions