JQuery_ Novice to Ninja - Earle Castledine [56]
The animate duration is set to 500, so it’s nice and zippy, and happens in plenty of time before the next scroll is scheduled using setTimeout. setTimeout is applied to the gallery.timer property, which is what we checked for earlier, and 500 milliseconds after the animation finishes the next scroll attempt occurs (since we set the timer for 1,000, which is 500 more than the animation). But which way are we going to scroll? gallery.direction sorts that out for us, like so:
chapter_04/15_iphoto_style_slideshow/script.js (excerpt)
gallery.direction = function(e,which) {
var x = e.pageX - which.offset().left;
gallery.scroll = (x >= gallery.width / 2) ? ">" : "<";
}
When the initializing method calls gallery.direction, it passes in two parameters: e for the event that’s causing the scroll, and which to hold a reference to the element that triggered the scroll. We’ll be diving in to the e parameter in the section called “Event Handler Parameters” shortly, but for now all you need to know is that this parameter allows us to access the coordinates on the page where the event took place. Using this e.pageX, we can calculate the distance from the left-hand edge of the trigger link to the cursor. This number in hand, we use the ternary operator (see the section called “Fading Slideshow”) to assign a value to gallery.scroll: ">" if the cursor is right of center, or else "<".
The last method we need to look at is our widget’s initializer, gallery.init:
chapter_04/15_iphoto_style_slideshow/script.js (excerpt)
gallery.init = function() {
$(gallery.trigger)
.mouseout(function() {gallery.scroll = false;})
.mousemove(function(e) {gallery.direction(e,gallery.trigger);})
.mouseover(function(e) {
gallery.direction(e,gallery.trigger);
gallery.slide();
});
}
By now you should be quite accustomed to everything we’re doing. gallery.init just chains jQuery methods on the jQuery object selected by gallery.trigger. Let’s break that chain down a little.
mouseout sets gallery.scroll to false. This is the property we check to make sure the user wants us to continue scrolling. mousemove calls gallery.direction, which in turn sets gallery.scroll as we saw earlier. And lastly, mouseover also calls gallery.direction, but also adds gallery.slide to the mix. By calling gallery.direction from the initial mouseover and from any subsequent mouse moves, we ensure that the direction of the scrolling is always properly set.
And there you have it. Add in a $(document).ready() to delay the enhancement until the DOM is available, and all you need now are happy site visitors who want to see what your gallery has to offer.
Many of the techniques we employed in building this widget are probably new to you, so you might be feeling a little overwhelmed! In the coming chapters we’ll be revisiting them in different forms, and before you know it, they’ll be second nature. Before moving on to the next round of changes to StarTrackr!, let’s just have a quick look at how we accessed the mouseover event’s position on the page from within our callback.
Event Handler Parameters
We’ve seen more than our fair share of event handler callback functions now, but if you look closely at the mouseover handler above, you might notice an imposter: e. e is the name we’ve given to the optional parameter that all jQuery event handlers can receive. We’ve not seen it until now as it hasn’t been required for any of the effects we’ve implemented so far.
When an event handler is called, jQuery passes in an event object that contains details and data about the event that occurred.