https://github.com/kickstarter/fullscreen_slideshow
A generic version of the code that runs Kickstarter's 2013 Year In Review: https://www.kickstarter.com/year/2013
https://github.com/kickstarter/fullscreen_slideshow
Last synced: about 1 year ago
JSON representation
A generic version of the code that runs Kickstarter's 2013 Year In Review: https://www.kickstarter.com/year/2013
- Host: GitHub
- URL: https://github.com/kickstarter/fullscreen_slideshow
- Owner: kickstarter
- Created: 2015-01-09T20:20:12.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-02-12T18:25:56.000Z (over 11 years ago)
- Last Synced: 2025-04-30T04:48:31.830Z (about 1 year ago)
- Language: JavaScript
- Size: 2.87 MB
- Stars: 41
- Watchers: 156
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kickstarter Year in Review 2013
A handy all-in-one fullscreen slideshow, extracted from Kickstarter's
2013 year in review.
[See it in action.](http://kickstarter.github.io/fullscreen_slideshow)
# Features
- Mobile friendly.
- URL's allow deep linking to individual slides.
- Background videos in slides are lazy and predictively loaded. On mobile they're not loaded at all, to conserve bandwidth.
- Page background color can be controlled via a slide attribute, allowing subtle rainbow effects as you progress through the slideshow.
- Slides can open full screen modal dialogs which can embed arbitrary pages via iframe.
## Howto
### Background color
If a slide has a `data` attribute called `color` then that attribute will be added to the `body` element when the slide is loaded.
A CSS class with the same name as the slide `id` will also be added.
For example, this slide will have `green30 dollars-pledged` set as the CSS class on `body`:
```html
```
### Modal dialogs
A `div` with the class `js-modal` and a `data` `src` attribute can be turned into a full screen modal dialog. A button
or link with the `js-show-modal` will show the modal dialog for the slide. An element with the class `js-embed-wrap`
will have an `iframe` appended to it, with the frame source set to the `src` `data` attribute. An element with the class
`js-hide-modal` inside the modal will close it when clicked.
For example:
```html
```
---
## License
[MIT](http://www.opensource.org/licenses/mit-license.php)