jQuery.silver_track

With great plugins comes great responsabilities. In some cases we have a lot of tracks in a page and some of them may have different plugins (or lots of them) and configurations, to enhance the creation in these cases we created SilverTrackRecipes. It is a way to define a track recipe, with all its particularities, and refer to that recipe later, using a much simplified interface. To allow these creations we will use the method $.silverTrackRecipes to define the recipes and $.silverTrackRecipes.create to refer to one recipe and create the track.

$.silverTrackRecipes will receive a string (the name of your recipe) and a function. This function will receive a factory object that will be responsible to assemble your track in a moment of need. The factory object has two methods, createTrack and installPlugins, you could use just one or both of them. The method createTrack should only be used when you want to customize the track initialization, the method will receive the element (track container) and an options object with your own options. It must return the new track. installPlugins will receive the already initialized track and the same options of createTrack, you should install the plugins you want here.

We will create a recipe with the basic track we learn at getting started, let's call it, humm..., basic.

$.silverTrackRecipes("basic", function(factory) {
  factory.createTrack(function(element, options) {
    // Let's tweak a little bit this track
    return element.silverTrack({
      easing: options.easing || "easeInOutQuad",
      duration: options.duration || 600
    });
  });

  factory.installPlugins(function(track, options) {
    var parent = track.container.parents(".track");
    track.install(new SilverTrack.Plugins.Navigator({
      prev: $("a.prev", parent),
      next: $("a.next", parent)
    }));
  });
});

With all recipes defined, in our case just "basic", we can create a new instance of SilverTrack using one of these recipes. Look that in our recipe we have a default easing function and duration but is possible to set another values, let's create three tracks, each one with a different pair of values. For a more generic solution let's keep the recipe name and options in data attributes, like:

<div class="track">
  <div class="view-port">
    <div class="slider-container" data-recipe="basic" data-opts='{"easing": "easeInOutSine", "duration": 800}'>
      <div class="item"><img src="http://lorempixel.com/230/134/nature/1/"></div>
      <!-- items ... -->
    </div>
  </div>
</div>

the "boot" code:

$(".track").each(function() {
  var container = $(this).find(".slider-container");
  var recipe = container.data("recipe");
  var opts = container.data("opts");
  $.silverTrackRecipes.create(recipe, container, opts).start();
});

and the magic happens!

Chaining Recipes

It is very common to have more complex recipes that are just variations of the basic one. To exemplify this case we will create a "complex" recipe that installs the BulletNavigator plugin, take a look at the code bellow.

$.silverTrackRecipes("complex", function(factory) {
  factory.createTrack(function(element, options) {
    return $.silverTrackRecipes.create("basic", element, options);
  });

  factory.installPlugins(function(track, options) {
    track.install(new SilverTrack.Plugins.BulletNavigator({
      container: $(".bullet-pagination", track.container.parents(".track"))
    }));
  });
});

With our current "boot" code we just need to change data-recipe to "complex", and it's done!

<div class="track">
  <div class="view-port">
    <div class="slider-container" data-recipe="complex" data-opts='{"easing": "easeInOutCubic", "duration": 700}'>
      <div class="item"><img src="http://lorempixel.com/230/134/cats/1/"></div>
      <!-- items ... -->
    </div>
  </div>
</div>

and presto!