SilverTrack was designed to be extensible through plugins, so it provides a clean way to define one. To explain the internals of the missing art of plugin crafters we will create an example plugin that presents an alert to the user when an item is clicked. To create our plugin we will use the method $.silverTrackPlugin, this method receives the plugin name and an object that will handle all the callbacks during the life cycle of our track.
$.silverTrackPlugin("PluginName", {
defaults: {
attribute: "default value"
},
/*
* Constructor
* options already merged with defaults
*/
initialize: function(options) {}
// more callbacks
});For our plugin, let's assume the following code:
$.silverTrackPlugin("ConfirmWhenItemClicked", {
defaults: {
message: "Really?"
},
initialize: function(options) {
this.options = options;
},
beforeStart: function(track) {
var self = this;
var itemSelector = "." + track.options.itemClass;
track.container.find(itemSelector).off("click").click(function(e) {
if (!confirm(self.options.message)) {
e.preventDefault();
}
});
}
});We will use the same markup of the getting started track, just surrounding the images with a link. The code to create the track and install our plugin is:
$(function() {
var container = $(".my-track");
var track = container.find(".slider-container").silverTrack();
// Look at this guy, it will rule the world!
track.install(new SilverTrack.Plugins.ConfirmWhenItemClicked());
track.start();
});and presto!
For a complete list of callbacks and their usage check the table below.
Available callbacks
| name | description | arguments |
|---|---|---|
| initialize | It is the plugin constructor, it will receive the arguments passed to the plugin during the instantiation | options - already merged with it's defaults |
| onInstall | Diferent from initialize, this callback is called when your plugin is installed into a track, so this is the perfect moment to configure the track before it even starts | track |
| beforeStart | It is called when the track receives the method start | track |
| afterStart | It is called after the track is fully started | track |
| afterRestart | Is is called after the track restarts | track |
| onTotalPagesUpdate | Called when the totalPages is manual updated through the track method updateTotalPages | track |
| beforeAnimation | It is called before any animations. The event object has which event was trigged (prev/next) along with page, cover and the items | track, event1 |
| afterAnimation | Is is called after any animations | track, event1 |
| beforePagination | It is called before any pagination, it happens before any animation | track, event1 |
| beforeAdjustHeight | It is called only if the track parameter autoHeight is true, the default is false. Is is called before the height adjustment. The event object has the new height | track, event2 |
| afterAdjustHeight | It is called only if the track parameter autoHeight is true, the default is false. Is is called after the height adjustment. The event object has the new height | track, event2 |
Event 1: beforeAnimation, afterAnimation and beforePagination
{
name: "prev", // or "next"
page: 1,
cover: false,
items: []
}Event 2: beforeAdjustHeight and afterAdjustHeight
{
items: [],
newHeight: 150
}