JSignage:Carousel

Description

The carousel is an extension of the slideshow layer, being able to display more than one item in the same time from a list of items and offering also the possibility to navigate interactively between these items by dragging movements.

Usually, the carousel will display the previews of the items before and after the current selected item.
The carousel can also be used in substitution to a table layer to create scrollable menus.

The carousel is part of the interactive layer type and part of the interactivity framework. A new carousel is constructed with $.carousel( { parameters } ).

Carousel parameters

All layers share a common set of attributes to define their screen layout and active time interval.

Required

data
one-dimensional array representing the available choices. Even if no data is required, an object with a length property is required to determine the number of choices.

renderToSVG: function( index, item ){}
callback that returns the SVG code representing each choice. See renderToSVG Callback for more.

Optional

autoNext
enable automatic navigation through the choices as if calling .next() periodically. Default: false.

autoNextInterval
time spent on each choice in autoNext mode. Default: 5s.

direction
presentation order of the choices. One of 'leftToRight', 'rightToLeft', 'topToBottom' or 'bottomToTop'. Default: 'leftToRight'.

draggable
enable touch based navigation through the choices by dragging the carousel. Default: true.

looping
enable looping to the first choice when navigating to the next choice on the last one and vice versa. Default: false.

numVisible
number of choices showing at the same time. Default: 3. This number will determine the size of the presentation area of each choice together with the total width and height of the carousel; it should be more than 1 for most carousels.

spacing
percentage of empty space between two choices. Default: '10%'.

type
type of carousel, either 'strip', 'wheel', 'roller', 'squeeze' or 'electron'. Default: 'strip'.
Check the carousels demo in an HTML5 compatible browser to see the different types of carousels.

Specific functions

In addition to the list of functions common to all layers, the carousel supports the following specific functions:

.auto( timePerItem )
Start/resume auto mode. The timePerItem parameter is optional and overrides the value of the timePerItem property.

.next()
Navigate to the next choice.

.previous()
Navigate to the previous choice.

Examples

Image library

Display all the images of a folder using an electron carousel. See the full-page demo here.

var list = [];
for ( var i=1; i<18; i++ )
    list.push( 'media/Monet_4_3/' + i + '.jpg' );

$(function(){
    $.carousel({
      type: 'electron',
      data: list,
      renderToSVG: function( idx ) { 
            return $.media({ href: this }); 
      }
    }).addTo('svg');
});

Dynamic data

Get the latest images uploaded into flickr, and display them at the bottom of the screen.

$.get(
  'http://api.flickr.com/services/feeds/photos_public.gne?format=rss2',
  function( feed ) {
    $.carousel({
        top: '70%', height : '25%',
        type: 'strip',
        numVisible : 7, 
        looping: 'true',
        data: $.parseRSS(feed),
        renderToSVG: function( idx ) {
            return $.media({ href: this.enclosure.substr(0,this.enclosure.length-5)+ "m.jpg" }); 
        }
    }).addTo('svg');
  },
  'text'
);

Notes:

The $.get() is used to retrieve data from the 'uri'.
The $.parseRSS() is used to parse the input data, and map it into a JavaScript array.
The values returned by the RSS feed is modified in order to get an image of lower resolution than the default one returned in the RSS.
The example bellow uses a local source for the data, because cross-site GET request are not allowed in most browser.

Using buttons

This carousel is controlled using button.

$(function(){
    var car = $.carousel({
       top: '70%', height : '20%',
        type: 'wheel',
        looping: 'true', 
        numVisible : 3, 
        draggable: 'false', 
      data: { length: 18 },
      renderToSVG: function( idx ) { 
            return $.media({ href: 'media/Monet_4_3/' + (idx+1) + '.jpg' }); }
    }).addTo('svg');
    
    $.pushButton( { top: '90%', width: '30%', left: '10%', height: '10%' }, "Previous" ).click( function() { car.previous(); } ).addTo('svg');
    $.pushButton( { top: '90%', width: '30%', left: '60%', height: '10%' }, "Next" ).click( function() { car.next(); } ).addTo('svg');
});

Notes:

The renderToSVG callback creates directly the href from the index. The data is only used to specify the number of item to be displayed.
PushButton are used to move the carousel from one item to the other.