Flow 2.7

(2012-09-04)

Introduction

Flow is a flexible engine which allows to create various "coverflow", carousel and other types to display pictures.
Writing the engine of a jQuery display plugin is often 90% of the job, and the css image manages the rest. Flow is designed to allow you to create your own display by focusing on the css managing.
Since it is a pure engine, it does not embed any display plugin however we have added some example plugin in the package.
Take a look on the examples plugins of Flow and be creative enough to display your own pictures the way you want.
Flow also embed a picture loader for a better user experience.
Flow is compatible with all main browsers (ie7+, firefox, chrome, safari...)

Licence

Licence Creative Commons

Download

jQuery Flow 1.7.tar.gz (sha1sum: 70d8ed99d3061cace26883e183d711de23866d2b)
jQuery Flow 1.7.zip (sha1sum: 4f009fe7a1d27b9480fe773e650c90ab7ec8ed24)
Fork on GitHub

Google advertisement

Because free code doesn't pay beers ;)

Live demo

This example describe the possibility of Flow as a potential use on website

You also can see the differents plugins in the download package

Getting started

Source files

Flow requires at least one plugin, so you need to include three files: the jQuery library, the Flow library and the plugin.
Have a look at the code extracted from one of the embedded demonstation:

      <script type="text/javascript" src="../jquery/jquery-1.7.1.js"></script>
      <script type="text/javascript" src="./jquery/flow/jquery.flow.js"></script>
      <script type="text/javascript" src="./jquery/flow/plugins/rotation.js"></script>
    

Many plugins can be appended to Flow on the same page.
If only one plugin is appended, there is no need to specify it when calling Flow, else you'll have to specify it's name. Thanks to the plugin property.
If a missing plugin is required, Flow will use the first plugin available.
Notice that the plugin property allows the use of an online object.

Using Flow

It use a mixed parameter which can be a json object, a string or a number depending on the use.

Initializing a Flow

When calling Flow the first time, the parameter required is an object which redefine the default properties :

Sliding to a specific item

Once initialized, you can access directly to a specific item using a numeric or a specific string parameter.

      $("#div").flow(2); // slide to the third item
      ...
      $("#div").flow("next"); // slide to the next item
    

Using events

Flow trigs few difference events using its namespace. Each event is associated to a "on camel-cased" callback which can be defined in the initialization argument

Here are two equivalent codes :

      // callback association : onXxxYyy
      $("#div").flow({
        onRunEnd:function(data){
          alert( data.current.element.attr("src") );
        }
      });
      
      // binding
      
      $("#div").flow();
      ...
      $("#div").bind("run_end.flow", function(event, data){
        alert( data.current.element.attr("src") );
      });
    

Writing a plugin

A plugin is an object registered to Flow thanks to :

$.fn.flow("plugin", plugin_name, plugin);

The plugin object manages two functions :

The init function is called once all pictures are loaded to allows to initalise the elements or to pre-calculate some data.
A data property is stored in the context and in each element object to store the custom data.



Licence Creative Commons
jQuery Flow of Jean-Baptiste Demonte is shared under the therms of the Creative Commons Attribution - Attribution-NonCommercial .