JSignage:Carousel
From SpinetiX Support Wiki
Contents
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.
- one-dimensional array representing the available choices. Even if no data is required, an object with a
-
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.
- enable automatic navigation through the choices as if calling
-
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'
.
- presentation order of the choices. One of
-
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%'
.
- percentage of empty space between two choices. Default:
-
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.
- type of carousel, either
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
See also JSignage:InteractiveTutorial4.
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 thehref
from the index. Thedata
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.