search

Seldaek / slippy

HTML Presentations
814 stars 89 forks source link

readme

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="https://github.com/Seldaek/slippy/raw/master/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/Seldaek/slippy/raw/master/jquery.history.js"></script>

<!-- Slippy core js file -->
<script type="text/javascript" src="https://github.com/Seldaek/slippy/raw/master/slippy.js"></script>

<!-- Slippy structural styles -->
<link type="text/css" rel="stylesheet" href="https://github.com/Seldaek/slippy/blob/master/slippy.css"/>

<!-- Slippy theme (feel free to change it) -->
<link type="text/css" rel="stylesheet" href="https://github.com/Seldaek/slippy/blob/master/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="https://github.com/Seldaek/slippy/raw/master/highlighter/shCore.js"></script>

<!-- Syntax highlighting brushes, this one is only for javascript -->
<script type="text/javascript" src="https://github.com/Seldaek/slippy/raw/master/highlighter/shBrushJScript.js"></script>

<!-- Syntax highlighting core CSS and a theme -->
<link type="text/css" rel="stylesheet" href="https://github.com/Seldaek/slippy/blob/master/highlighter/shCore.css"/>
<link type="text/css" rel="stylesheet" href="https://github.com/Seldaek/slippy/blob/master/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:

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.

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 - j.boggiano@seld.be 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

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.