Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcins/revealjs-simple-gallery
A simple gallery plugin for use in a reveal.js presentation
https://github.com/marcins/revealjs-simple-gallery
Last synced: 7 days ago
JSON representation
A simple gallery plugin for use in a reveal.js presentation
- Host: GitHub
- URL: https://github.com/marcins/revealjs-simple-gallery
- Owner: marcins
- License: mit
- Created: 2014-03-01T03:43:17.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2014-03-02T00:21:55.000Z (over 10 years ago)
- Last Synced: 2024-11-07T12:52:06.332Z (13 days ago)
- Language: JavaScript
- Size: 230 KB
- Stars: 8
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Simple Gallery Plugin for reveal.js
I wanted to show a small gallery inside a reveal.js presentation (slideshow within a slideshow - Inception!). This is a simple plugin that takes a list of images and converts it to an auto-advancing slideshow.
Check out an [example of the different variations](http://junkheap.net/examples/revealjs-gallery/)
## Why?
Why not?
Seriously though, could just do a sequence of regular slides with an auto-advance to get the same effect, so why not? Well first of all I didn't think of it until it was too late, and secondly this keeps the slide deck a bit neater. You can easily skip past the whole slideshow by using the keyboard controls, whereas with auto-advance you'd need to jump through all the slides.
## Installing
* copy `gallery.plugin.js` to `plugin/gallery/gallery.plugin.js` in your reveal.js presentation
* copy `gallery.css` to `plugin/gallery/gallery.css` or integrate into your CSS your preferred way, customise the styles as required. You will need to set the width and height of the `.gallery` selector to match the natural size of your presentation defined in `reveal.js`
* add the following to the head of `index.html` after other stylesheets are loaded:
``````
* add the following to the bottom of `index.html`, where the other plugins are defined:
```js
{ src: 'plugin/gallery/gallery.plugin.js', async: true, condition: function() { return !!document.querySelector('.gallery'); } }
```
* add a gallery somewhere in your slide:
```html
```
The gallery plugin will take the alt tags in your images and convert them to `label` elements within the `li`.
## Configuring
Configuration options are set as data elements on the `
- `:
* **data-interval** a Number which determines how long each slide is shown for (in seconds) - default is 1.0
* **data-iterations** how many times to loop through the slideshow - default is once and stop on the last slide. Set
to 0 to repeat indefinitely
* **data-mode** supported values are "normal" and "full-screen", with normal being default if the attribute isn't present
You can also customise how the labels will look by editing the `label` style in `gallery.css`.
### Full Screen Mode
This is a bit of a hack, basically when the gallery's mode is "full-screen" and you enter a slide with the gallery it is taken out of the slide flow and inserted into the DOM before the slides element. The images are hidden and their sources are applied as backgrounds on the `li` instead, to allow them to be center cropped via CSS. Animation continues as normal, which wouldn't have been possible with a slide background.
When you exit the slide with a gallery the element is returned back into the slide where it was - order is restored!
Your mileage may vary with the behaviour of any of the keyboard commands except going back and forth between slides when in full screen mode, as reveal.js now has an unexpected element in an unexpected place.
## Contributing
### Building
Just for kicks this codebase is a bit overengineered. The Reveal specific code has been split from the generic Gallery code to allow it to be tested. Gallery code is in `src/gallery.js`, Reveal plugin code is in `src/gallery.reveal.js`. To build a single JS file for use with Reveal there is a `Makefile` - so just run `make` in the root of the project and you'll get a `gallery.plugin.js`.
### Testing
Tests are browser based using Mocha & Chai, run these by running `tests/index.html`.