Playlists & Slideshows
Two primary ways to sequence content: Playlists (auto-play
media files) and Slideshows (custom layouts via renderToSVG).
Playlist — $.playlist()
Auto-plays media items sequentially. Each item is rendered with $.media() by default.
| Attribute | Description |
|---|---|
data | Array of file paths or objects with href |
defaultDur | Default duration for each item (seconds) |
repeatDur | Total repeat duration ('indefinite' for infinite) |
defaultTransition | Default transition between items |
$(function() {
$.playlist({
data: ['ad-1.mp4', 'info-1.mp4', 'promo.jpg'],
repeatDur: 'indefinite',
defaultDur: 5,
defaultTransition: $.crossFade()
}).addTo('svg');
});Slideshow — $.slideshow()
Custom-rendered slides using the renderToSVG callback. This
gives full control over layout per slide.
$(function() {
var items = [
{ title: "News Item 1", img: "1.jpg"},
{ title: "News Item 2", img: "2.jpg"}
];
$.slideshow({
data: items,
defaultSlideDur: 5,
repeatDur: 'indefinite',
defaultTransition: $.push({ direction: 'rightToLeft'}),
renderToSVG: function() {
return $.g().add([
$.media({ href: this.img, width: '100%', height: '80%'}),
$.fitTextArea({
top: '80%', height: '20%', fontSize: 'max',
frame: { backColor: 'black', backOpacity: 0.7 },
fill: 'white'}).text(this.title)
]);
}
}).addTo('svg');
});Playlist vs Slideshow
| Feature | $.playlist() | $.slideshow() |
|---|---|---|
| Layout | Full-screen per item | Custom via renderToSVG |
| Data | File paths only | Any objects |
| Multi-zone | No | Yes |
| Simplicity | Very simple | Needs callback |
Dynamic Data — pushData()
var pl = $.playlist({ repeatDur: 'indefinite'}).addTo('svg');
// Later, push new items dynamically
pl.pushData(['new-1.jpg', 'new-2.jpg']);Related Pages
- Transitions & Effects — crossFade, push, flip, slide
- Media Layers — content inside playlists
- Text Layers — text inside renderToSVG
- Data Feeds — RSS-driven slideshows
- Utilities —
$.shuffle()for random order