Reviewing 3 JavaScript presentation libraries (for my MWLUG presentation)

As I previously mentioned my abstract for MWLUG2012 has been accepted and so I have gone about looking for an assessing different JavaScript presentation libraries to use as part of my demonstrations.

I am a firm believer in demonstrating the techniques I want to talk about rather than going through boring slide after boring slide. Any old vacuum cleaner salesman can blow smoke up your ass about how awesome their product is – but if I want to talk about how you use a JavaScript library then I want to be able to show it in action. Using a JavaScript presentation platform also negates the need for me to constantly flick back and forwards from PowerPoint to a Web Browser. I realize that sometimes that is a cruel necessity but it is not easy on the audience.

So I found these three examples – I am sure there are others but here we go – All these are firefox or chrome or safari to get the best out of the HTML5/CSS3 support

Turn.js is a really nice look and feel “book-like” presentation format. It allows to the user to grab the corner of the page and turn it to the next one. I did not go with this one because I found some issues with the display and it was also quite finicky to use – not good for a presentation but might be good for an online advert or something of that ilk

turn.js screenshot: turning a page
turn.js screenshot: turning a page



This is just an amazing demonstration of CSS3 transitions – This would be my preferred presentation library because I was SO impressed (pun intended) with the demonstration and the flexibility of the usage. I started to pan out my slides using this capability (mimicking the example slide types) and I was really enjoying it.

The problem I ran into was that it did not play well with the demonstrations I wanted to do. I want to include XPage code and the dojo CSS created by the XPage really screwed up the presentation CSS 😦 It was also  really time consuming to manage the canvas and where all the slides were going to go – kinda disappointed this didn’t work out because the WOW factor would be worth every minute!

the only limit is your imagination

This would be great if I was not using demonstrations within the presentation and if I had more time to play with it….

impress.js infinite canvas
impress.js infinite canvas



Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system

So this is the library I finally decided to go with. It is very simple one slide to the next you can use the arrow keys to move left and right up and down through the website. There are some nice examples of how this has been used in commercial sites and it struck me that it would make a very nice way of telling a story in a presentation. What I also liked was the simplicity of the stylesheet and the simplicity in which I could construct my slideshow.


In the main XPage I am able to just create a separate custom control for each presentation page and at any time I can jump from one slide to the next. This also allows me to ensure that each example can be treated individually. Unlike Impress where the content and positioning are controlled from the div attributes, Ascensor controls the slide order from the plugin attributes at creation.

	<div class="contenu">
		<!-- Narrowing the selection -->
	<div class="contenu">
	<!-- Returning the jQuery Object -->
	<div class="contenu">
	<!-- Chaining -->

Here is how the presentation is instantiated using the plugin call.

$(document).ready(function() {
    //google code prettyfier

    var cCoord='1|1 & 1|2 & 1|3 & 1|4 & 1|5 & 1|6 & 1|7 & 1|8 & 1|9 & 1|10'
    	cCoord+=' & 2|1 & 2|2 & 2|3 & 2|4 & 2|5 & 2|6 & 2|7 & 2|8 & 2|9 & 2|10'
    	cCoord+=' & 3|1 & 3|2 & 3|3 & 3|4 & 3|5 & 3|6 & 3|7 & 3|8 & 3|9 & 3|10 & 3|11 & 3|12'
        cCoord+=' & 4|1 & 4|2 & 4|3 & 4|4 & 4|5 & 4|6 & 4|7 & 4|8 & 4|9'
        cCoord+=' & 5|1 & 5|2 & 5|3 & 5|4 & 5|5 & 5|6 & 5|7 & 5|8 & 5|9'
        cCoord+=' & 6|1 & 6|2'


		Direction: 'y',


		AscensorMap: '9|2',
		ContentCoord: cCoord

More to come on the presentation as it comes together and I will certainly be blogging about the how as this goes along.

MWLUG Ascensor slideshow
Marky’s MWLUG Ascensor slideshow

2 thoughts on “Reviewing 3 JavaScript presentation libraries (for my MWLUG presentation)

  1. Wonderful items from you, man. I’ve consider your stuff previous to and you are simply too wonderful.
    I actually like what you’ve received right here, really like what you’re
    stating and the way during which you say it. You are making it enjoyable and you continue to care for to keep it sensible.

    I can not wait to learn far more from you. That is really a tremendous website.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s