seldaek / slippy

HTML Presentations

Slippy - HTML Slides

Demo

See the example slide deck live on slides.seld.be

How to: Navigate slide decks

Navigate, double click anywhere, press space or use the left/up and right/down arrow keys

Go to a slide directly, press number keys and then enter

Get an overview, press escape or delete then click on a slide to go straight to it

How to: Make your own slide deck

At the core, slide decks are simple HTML files. Every slide can be any html element, but is typically a div or section. You initialize slippy by calling slippy() on a jQuery selection, for example, if you add the slide class to all your slide divs, use: $(".slide").slippy({}). Using the slide class is recommended because that's what the default CSS file is using, but you're free to do what you want.

To get quickly started, you can use the 2010-05-30 Example.html file which is an example slide deck, and edit it, however if you prefer to do it all by hand, here are the parts you need to add to your HTML file:

<!-- jQuery + history plugin -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>

<!-- Slippy core js file -->
<script type="text/javascript" src="slippy.js"></script>

<!-- Slippy structural styles -->
<link type="text/css" rel="stylesheet" href="slippy.css"/>

<!-- Slippy theme (feel free to change it) -->
<link type="text/css" rel="stylesheet" href="slippy-pure.css"/>

In addition, if you want syntax highlighting, you should add the following files. Using it is simple, just create a <pre> tag with a class="brush: js" to highlight javascript code for example. You can read more on the SyntaxHighlighter website itself.

<!-- Syntax highlighting core file  -->
<script type="text/javascript" src="highlighter/shCore.js"></script>

<!-- Syntax highlighting brushes, this one is only for javascript -->
<script type="text/javascript" src="highlighter/shBrushJScript.js"></script>

<!-- Syntax highlighting core CSS and a theme -->
<link type="text/css" rel="stylesheet" href="highlighter/shCore.css"/>
<link type="text/css" rel="stylesheet" href="highlighter/shThemeEclipse.css"/>

Finally you should initialize Slippy and the syntax highlighter:

<script type="text/javascript">
    $(function() {
        $(".slide").slippy({});
        SyntaxHighlighter.all();
    });
</script>

Images are automatically scaled to fit onto the slide whatever the size of the browser window. You can tweak the behaviour with the baseWidth and imgScaleTrivial parameters (see below). If one of your images should never be scaled, add the class "noscale" to the tag, i.e.

The slippy() call takes an option object, which accepts the following keys:

• animLen, duration for default animations (0 = disabled)
• animInForward, receives a slide and animates it
• animInRewind, receives a slide and animates it
• animOutForward, receives a slide and animates it
• animOutRewind, receives a slide and animates it
• baseWidth, defines the base for img resizing, if you don't want only full-width images, specify this as the pixel width of a slide so that images are scaled properly (default is 620px wide). Set to false to not scale images.
• imgScaleTrivial, defines the limit beneath that images are not scaled to avoid unnecessary scaling that renders the image less nice.
• ratio, defines the width/height ratio of the slides, defaults to 1.3 (620x476)
• margin, the fraction of screen to use as slide margin, defaults to 0.15

How to: Show images fullscreen

If a slide contains a data-background attribute, the referenced image will be inserted fullscreen, and the background (if the image is not of the same aspect ratio as the screen) will turn black. Example:

<div class="slide" data-background="foo.jpg">
    <h1>Content</h1>
</div>

Server

The src/ folder contains an index.php that serves slides.

• Put the src folder inside the webroot of a web server
• Copy config.php.dist to config.php and adjust to point to the folder containing  your slides - or just copy/symlink all slides into the src folder. The  index.php looks for html files in that folder and shows them, using the header information for title and author.

Exporting self-contained HTML presentations

Slippy can generate a presentation in a single file, with all javascript, css and images inlined.

php src/index.php <slippy slides> [<output file>]

If you omit the output file, slippy will generate the filename from the input file, appending _compiled to the name.

If you set up the slippy webserver (see above), you can also click the download link.

Limitation: If you use images in css statements, they are not included. If you need to do that, you should generate a PDF instead (see below).

Exporting PDFs

To upload your presentation on SlideShare, or to share it with others, it can be convenient to export it to a PDF. Slippy comes with a CLI utility that does just that.

The only requirement is that you download PhantomJS (2.0+) and pdftk and place the executables in the bin/phantomjs and bin/pdftk dirs or make them accessible via your PATH environment variable. If you're on linux you can probably install pdftk with your distro's package manager.

Once that is done, you can call the script using bin/slippy-pdf.sh <path to your html presentation> <path to the pdf file to generate>.

It will take a while and then should output a 4:3 PDF file. If you don't like the aspect ratio or size, you can change the viewport size in the bin/phantom-slippy-to-pdf.js file. If you have rendering issues (missing images or such), try increasing the delay, or rendering again, sometimes PhantomJS just fails without apparent reason.

Author

Jordi Boggiano - [email protected] http://seld.be/ - http://twitter.com/seldaek

See also the list of contributors which participated in this project.

Contribute

If you like this piece of software, please consider giving back with Flattr.

Code contributions, bug reports and ideas are obviously also much welcome.

Changelog

• 1.0.0

  • Switched license to BSD
  • Slide decks files are now standalone html files that don't need php
    • However it is recommended if you have code blocks since it will convert html special chars automatically
    • Note that this breaks compatibility with previous slide decks, since the js/css files have to be included by hand in it now
  • Added layout functionality, see the slide on layouts in the example deck for docs
  • Added parameters to the main slippy js command that enable users to easily tweak/override things, see example file
  • Added swipe/double-tap support on touch devices
  • Added PDF export functionality using PhantomJS
  • Splitted css in structural/theme stylesheets for easy customization
  • Improved the default theme for better readability on projectors
  • Auto-sizing to the browser dimensions
  • Added page up, page down support for prev/next slide, and home/end to go to the begining or end of presentaiton
  • Animations are going the right way now when using overview/direct input and going backwards
  • Added a template to render the slide repository page
  • Added a packager that embeds everything for easy distribution of slides as one html file
  • Added incremental slides functionality (use the incremental class on any elements to make them appear one by one)
  • Added fullscreen image support on a per-slide basis (data-background="img url" on a slide div)
  • JS Alerts are now cleared when changing slide, but stay visible longer
  • Fixed bug preventing "0" to be used to switch to slides

• 0.9.0

  • Initial Public Release

License

Slippy is licensed under the New BSD License, which means you can do pretty much anything you want with it - However, I encourage you to share your slides and stylesheets if you make some, but there is no obligation whatsoever.

New BSD License - see the src/LICENSE file for details

Compatibility

It should work with all browsers, except for the overview function that does not work in IE8 and below.

slippy's Issues

Incremental presentations

Is there a way to make incremental presentations that are out of order? For example by specifying a increment number or something? In reveal.js I can do this:

<li class="fragment" data-fragment-index="3" >third</li>
<li class="fragment" data-fragment-index="2" >second</li>
<li class="fragment" data-fragment-index="1" >first</li>

which makes list items appear from the bottom first.
Thanks for any help.

Incremental slides locks the next navigation

In the example, once you start incrementing the last slide and then go back (left), every attempt to go right will not move you forward but instead increment the last slide. When it's full, hitting right will again take you forward.

Reproduce:

• Visit page 5 in the example.
• Hit right and right again, to trigger incrementation.
• Hit left to go back to page 5.
• Hit right. Instead of going to page 6, this keeps incrementing the last page and keeps you at page 5.

dependency on pdftk

what is the minimum version of pdftk required to render pdfs? i have pdftk 1.41 and just downloaded phantomjs 1.5.0.

when i render slides, i get half of the image grey and for long slides i see the bottom part at the top of my slide. the lower part of the slide is always blank. and data-background slides seem not to have the background image.

PDF render SyntaxHighlight

Hello,

I have a trouble when i want to generate a pdf from the example on mac os.
I have :
pdftk 2.02
phamtomjs 1.9.7

I clone the git repository and just change in phantom-slippy-to-pdf.js :
page.paperSize = { width: viewport.width * 1.5, height: viewport.height * 1.5 + 30 };
with :
page.paperSize = { width: viewport.width * 1.8, height: viewport.height * 1.8 + 30 };

But syntaxhighlight don't work.
You can see in the following pdf.

slippy is not working under Firefox 4

No key binding is working under Firefox 4. For example, http://owenou.com/jekyll_and_hyde_demo/#1.

PhantomJS-rendered PDFs are entirely raster, including the text

Normally when I print to PDF from a webkit-based browser, I get a PDF with text that will zoom to any size, and is selectable.

Switch to use the native history API

I often have issue when using http://slides.seld.be/ with the jquery.history.js file that get aborted after 20s or so, and so breaking slippy. As modern browsers now support the history API, it could be better to use it instead (and so no issue about loading a file for them) and fallback to a polyfill for old browsers (IE...). What do you think about it ?

data-background and inlined images

when downloading the presentation as all-including html file, the data-background full screen images are not included

Readme gives no indication as to how to actually use this

Sorry, but what do I need to do to create my own slideshow? A step-by-step in the readme would be useful :D

Phantom-js renderer rendering less slides than total when there are incremental elements

From the code of the renderer:

for (;current<=slides;current++) {
    //....
    $(document).click();
    $(document).click();
}

So, loading the next slide is done by doing a double click with phantomjs. Bit if there are $(.incremental) elements, double click will load an incremental element, current gets incremented anyways and at the end it will render a slide less. It can be done changing the for to:

incrementalElements = $('.incremental').length;
for (;current<=slides+incrementalElements;current++) {
    //....
    $(document).click();
    $(document).click();
}

Also, as incrementals are set to opacity 1, it will render their slides repeatedly.

Nice tool, btw :)