So a few hours ago I blogged about how you can use the cfpresentation tag to create an HTML-based presentation. As I mentioned in the blog post, the output works, but, is a bit atrocious. It looks like I designed it. Drunk. (To be fair, I'd probably do better design if I was drinking.) I spent a few minutes Googling today to see if I could find a nicer example, one based on jQuery. It didn't take long at all. I turned up this blog entry, 8 HTML presentation plugins that you can use, and decided to play around a bit.
After looking at a couple of them, I decided my favorite was the simple jQuery Presentation Plugin by Trevor Davis. It wasn't the sexiest of them all, but it was the easiest to work with. (I also liked the html5slides project, but I don't like presentations that show you a bit of the next slide on screen. I think it's distracting to the audience.) Here's how simple his code is to use:
<div id="content"> <div id="slides"> <div class="slide"> <h2>Slide 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>Here is a short list item</li> </ul> </div> <div class="slide"> <h2>Slide 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="slide"> <h2>Slide 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="slide"> <h2>Slide 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="slide"> <h2>Slide 5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> <div id="footer"> <div class="container"> © 2010 Trevor Davis Viget Labs </div> </div> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.presentation.js"></script> <script type="text/javascript" src="scripts/global.js"></script> </body> </html><!DOCTYPE html> <html class="no-js"> <head> <title>jQuery Presentation Plugin</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript">(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> <link href="stylesheets/screen.css" type="text/css" rel="stylesheet" media="Screen,projection" /> </head> <body> <div id="header"> <div class="container"> <h1>jQuery Presentation Plugin</h1> </div> </div>
As you can see, it's just a collection of DIV tags. The presentation is enabled in global.js, but is just this few lines of code:
$(document).ready(function(){ $('#slides').presentation(); });
If you want to see this live on my server, just click here: http://www.coldfusionjedi.com/demos/aug82011/preso/index.htm. Note that you can use the left and right arrow to navigate. Also note that the URL changes as you advance. This means you can deep link (for example, slide 3) to a particular slide. I whipped up a quick example using ColdFusion. I apologize for doing yet another art browser.
<!DOCTYPE html> <html class="no-js"> <head> <title>Art Presentation</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script type="text/javascript">(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> <link href="stylesheets/screen.css" type="text/css" rel="stylesheet" media="Screen,projection" /> <style> .artImage { float:right; margin-top: 10px; margin-left: 10px; width: 250px; height: 250px; } </style> </head> <body> <div id="header"> <div class="container"> <h1>jQuery Presentation Plugin</h1> </div> </div> <div id="content"> <div id="slides"> <div class="slide"> <h2>Art Browser</h2> <p>Welcome to our Art Browser. It is the most beautiful presentation you will see today...</p> </div> <cfoutput query="getArt"> <div class="slide"> <h2>#artname#</h2> <p> <img src="artgallery/#largeimage#" class="artImage" > <b>Artist:</b> #firstname# #lastname#<br/> <b>Media:</b> #mediatype#<br/> <b>Price:</b> #dollarFormat(price)#<br/> #description# </p> </div> </cfoutput> </div> </div> <div id="footer"> <div class="container"> © 2010 Trevor Davis Viget Labs </div> </div> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.presentation.js"></script> <script type="text/javascript" src="scripts/global.js"></script> </body> </html><cfquery name="getArt" datasource="cfartgallery"> select artid, artname, description, price, largeimage, mediatype, firstname, lastname from art left join media on art.mediaid = media.mediaid left join artists on art.artistid = artists.artistid </cfquery>
As you can see, I've added a simple query on top. I then replaced the 2nd-N slides with a simple cfoutput. This gives me a title slide and then one slide per piece of art. I could add a concluding slide as well. To see this in action just hit the big ole demo button below.
