Creating a Slideshow (^) ❘ 453
$('
.attr(
'id',
'slideshowControl-' + slideCollection + '-' +
slideInCollection
)
.html(
$('').text(slideInCollection)
)
);
slideInCollection++;
}
);
First, each element with the slide class name is given an id name that identifi es the collection’s
offset and the slide’s offset. The
- with the class name slideshowControls is given a new
element for each slide. Each- element is populated with a element, which in turn contains
the numbered offset of the slide.
You can fi nd the fi rst- element within the
- slideshowControls with the following code, and
- element within
- slideshowControls is provided with hover and click events.
The hover event simply toggles the presence of the slideshowControlOn class name.
node.find('ul.slideshowControls li')
.hover(
function()
{
$(this).addClass('slideshowControlOn');
},
function()
{
$(this).removeClass('slideshowControlOn');
}
)
The click event controls what happens when the user clicks a slideshow control, indicating that the
user wants to see that particular slide again.
Within the callback function to the click event, you can use the existing slideshows global variable
to refer to the correct instance of the slideshow object. You can do this in many ways—this is the
method that best illustrates what is happening.
The fi rst statement within this block of code checks whether an animation is in progress using
the transitioning property. If an animation is occurring, then nothing happens and the click
event is ignored.
http://www.it-ebooks.info
it is given a class name slideshowControlActive.
node.find('ul.slideshowControls li:first')
.addClass('slideshowControlActive');
Next, each - element within the