A Backbone.JS powered slideshow
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
spec
README.md
slideshow.html

README.md

backbone-slideshow

A simple backbone.js powered slideshow. Great for satisfying those markety-types, who want a "rotating slide thingy", without having to use a jQuery plugin.

Demo

A basic working demo is up on jsfiddle

Features

backbone-slideshow preview

  • Rotates between any number of slides
  • Generates controls for each slide
  • Play/Pause toggle button
  • Collapsible (pauses when hidden, plays when shown)
  • Jump to any given slide by clicking on the corresponding control (triggers pause)
  • Slide background images and text can be aligned "left" or "right"

Usage

  • include lib/css/slideshow.css into your page.
  • mixin the contents of lib/js/app.js into your apps .Models, .Views and .Collections namespaces.
  • include lib/js/slideshow.js into your page.
  • include the 2 client-side templates (slideshow.html > #slide-template, #controls-template) into your page or however you add templates to your app/page.
  • include the boilerplate markup (slideshow.html > #slideshow) into your page.
  • configure the path to your images (slideshow.html > #slide-template) and name them numerically 1.jpg, 2.jpg .... n.jpg etc...

Declaration

<script>
  var slides = new APP.Collections.Slides([
    {
      id: 1,
      headline: 'Heffalumps',
      caption: 'and woozles',
      layout: 'left' // options: 'left', 'right' -> controls layout of text and images in slides
    } //... etc
  ]);
  var slideshow = new APP.Views.Slideshow().render();
</script>

3rd Party Dependencies

Author

Contributions

Pull requests with passing specs will be gladly accepted :)

Todos

These things are a list of 'nice-to-haves' that I'll probably get around to

  • Upload a demo page w/ GH pages.
  • Style the demo page using Twitter Bootstrap
  • API for creating a slideshow completely via js (ie: no html template deps) -> new APP.Views.Slideshow({ container: "#myContainer", slides: myCollection }).render();
  • Configurable Image paths via js (they're hardcoded in the client-side templates right now)
  • CoffeeScript version
  • Package this thing up for standalone use (it was extracted from an existing app and could use some "standalone" love) :)

Acknowledgments