Gem_building is a project mainly written in JAVASCRIPT and PHP, it's free.
Small presentation for Sevastopol RoR group
See the example slide deck live on slides.seld.be
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, tab or delete then click on a slide to go straight to it
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>
The slippy() call takes an option object, which accepts the following keys:
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 (1.1 only) and pdftk and place the executables in the bin/phantomjs and bin/pdftk dirs or make them accessible via your PATH environment variable.
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'll 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.
Jordi Boggiano - [email protected] http://seld.be/ - http://twitter.com/seldaek
See also the list of contributors which participated in this project.
If you like this piece of software, please consider giving back with Flattr.
Code contributions, bug reports and ideas are obviously also much welcome.
1.0.0
0.9.0
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
It should work with all browsers, except for the overview function that does not work in IE8 and below.