jQuery in Action
214
CHAPTER 7
Extending jQuery with custom plugins
The settings variable is now available to both functions, and we're finally ready to
complete the implementation of the plugin function. We define the listeners that
we listed earlier with the following code:
complete the implementation of the plugin function. We define the listeners that
we listed earlier with the following code:
settings.thumbnails.click(function(){ showPhoto(this.index); });
settings.photoElement.click(function(){
showPhoto((settings.current + 1) % settings.thumbnails.length);
});
$(settings.nextControl).click(function(){
showPhoto((settings.current + 1) % settings.thumbnails.length);
});
$(settings.previousControl).click(function(){
showPhoto((settings.thumbnails.length + settings.current - 1) %
settings.thumbnails.length);
});
$(settings.firstControl).click(function(){
showPhoto(0);
});
$(settings.lastControl).click(function(){
showPhoto(settings.thumbnails.length - 1);
});
Each of these listeners calls the
showPhoto()
function with a thumbnail index
determined either by the index of the clicked thumbnail, the length of the list, or
computed relative to the current index. (Note how the modulus operator is used
to wrap the index values when they fall off either end of the list.)
computed relative to the current index. (Note how the modulus operator is used
to wrap the index values when they fall off either end of the list.)
We have two final tasks before we can declare success; we need to display the
first photo in advance of any user action, and we need to return the original
wrapped set so that our plugin can participate in jQuery command chains. We
achieve these with
wrapped set so that our plugin can participate in jQuery command chains. We
achieve these with
showPhoto(0);
return this;
Take a moment to do a short Victory Dance; we're finally done!
The completed plugin code, which you'll find in the file chapter7/photomatic/
jquery.jqia.photomatic.js, is shown in listing 7.6.
(function($){
var settings;
$.fn.photomatic = function(callerSettings) {
settings = $.extend({
photoElement: '#photomaticPhoto',
transformer: function(name) {
Listing 7.6
The complete Photomatic Plugin implementation