I want to create same fadeIn and fadeOut effect which is shown in given below example:http://www.spicypeanut.net/Slideshow/Slideshow.htmlhttp://www.spicypeanut.net/Blog/jQuery Slideshow.htmlBut 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 :/ \[code\]if (this.Last < 1) { this.Last = 3;} if ($$.Slideshow.Counter > 3) { $$.Slideshow.Counter = 1; # } \[/code\]Would be nice if you could help me (and i think many others) at this point 
Below is the JS used in this example:\[code\]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(); });\[/code\]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.
Below is the JS used in this example:\[code\]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(); });\[/code\]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.