(^452) ❘ CHAPTER 20 CREATING AN INTERACTIVE SLIDESHOW
The next section of code begins the slideshow.prototype.init function. When the slideshow is
instantiated with new slideshow(node, slideCollection), the slideshow.prototype.init function is
executed to create a new copy of the slideshow object.
The names of the arguments are the same so that you can easily associate new slideshow(node,
slideCollection) with slideshow.prototype.init = function(node, slideCollection). When a new
slideshow object is created, some variables are created to keep track of different states.
The this.counter property keeps track of which slide is presently being displayed. The this.isIn-
terrupted property keeps track of whether the slideshow has been interrupted by the user clicking
a slide control. When a slideshow is interrupted, the slideshow pauses for 5 seconds on the slide the
user clicked to see, and then the slideshow automatically resumes.
The this.transitioning property keeps track of whether an animated transition is occurring. This
property prevents multiple animations from stacking up by ignoring any additional animation
requests until the current one has completed.
The this.resumeTimer property keeps a reference to timers created when the user interrupts a slide-
show. This timer occasionally needs to be cleared or created based on what the user does.
slideshow.prototype.init = function(node, slideCollection)
{
this.counter = 1;
this.isInterrupted = false;
this.transitioning = false;
this.resumeTimer = null;
The next line creates the slideshow controls. At this point, the element created is a
- element with
the class name slideshowControls; it does not yet have any child elements.
if (!node.find('ul.slideshowControls').length)
{
node.prepend(
$('
);
}
If the
- with the class name slideshowControls does already exist, its children are removed.
Next, you iterate over each element existing within the slideshow container element with the class
name slide. This block of code begins with the declaration of a variable, slideInCollection, which
is a counter to keep track of which slide in this slideshow is presently under consideration. The
counter creates id names as well as creates the slideshow controls.
var slideInCollection = 1;
node.find('.slide').each(
function()
{
this.id = 'slide-' + slideCollection + '-' + slideInCollection;
node.find('ul.slideshowControls')
.append(
http://www.it-ebooks.info