Updating my ColdFusion HTML presentation to use jQuery

This post is more than 2 years old.

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:

<!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>

&lt;div id="content"&gt;
  &lt;div id="slides"&gt;
    &lt;div class="slide"&gt;
      &lt;h2&gt;Slide 1&lt;/h2&gt;
      &lt;p&gt;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.&lt;/p&gt;
      &lt;ul&gt;
       &lt;li&gt;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&lt;/li&gt;
       &lt;li&gt;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.&lt;/li&gt;
       &lt;li&gt;Here is a short list item&lt;/li&gt;
      &lt;/ul&gt;
     
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      &lt;h2&gt;Slide 2&lt;/h2&gt;
      &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      &lt;h2&gt;Slide 3&lt;/h2&gt;
      &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      &lt;h2&gt;Slide 4&lt;/h2&gt;
      &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="slide"&gt;
      &lt;h2&gt;Slide 5&lt;/h2&gt;
      &lt;p&gt;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.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div id="footer"&gt;
  &lt;div class="container"&gt;
    &copy; 2010 Trevor Davis Viget Labs
  &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript" src="scripts/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/jquery.presentation.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/global.js"&gt;&lt;/script&gt;

</body> </html>

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.

<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>

<!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; }

&lt;/style&gt;

</head> <body> <div id="header"> <div class="container"> <h1>jQuery Presentation Plugin</h1> </div> </div>

&lt;div id="content"&gt;
  &lt;div id="slides"&gt;

    &lt;div class="slide"&gt;
      &lt;h2&gt;Art Browser&lt;/h2&gt;
      &lt;p&gt;Welcome to our Art Browser. It is the most beautiful presentation you will see today...&lt;/p&gt;
    &lt;/div&gt;

	&lt;cfoutput query="getArt"&gt;
		
    &lt;div class="slide"&gt;
      &lt;h2&gt;#artname#&lt;/h2&gt;
	  	&lt;p&gt;
		&lt;img src="artgallery/#largeimage#" class="artImage" &gt;
	  		&lt;b&gt;Artist:&lt;/b&gt; #firstname# #lastname#&lt;br/&gt;
			&lt;b&gt;Media:&lt;/b&gt; #mediatype#&lt;br/&gt;
			&lt;b&gt;Price:&lt;/b&gt; #dollarFormat(price)#&lt;br/&gt;
			#description#
		&lt;/p&gt; 
    &lt;/div&gt;

	&lt;/cfoutput&gt;
	


  &lt;/div&gt;
&lt;/div&gt;

&lt;div id="footer"&gt;
  &lt;div class="container"&gt;
    &copy; 2010 Trevor Davis Viget Labs
  &lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript" src="scripts/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/jquery.presentation.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="scripts/global.js"&gt;&lt;/script&gt;

</body> </html>

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Mark Llewellyn posted on 8/9/2011 at 1:54 AM

Ray,

The html5slides has layout classes to compensate for various monitor screen aspects: "Change the outermost section class layout-regular to layout-faux-widescreen or layout-widescreen." Of course, an auto-detect and adjustment routine would be a nice touch...

I see some near-future uses for a couple of these preso plugins, thanks for the post!

-Mark

Comment 2 by Raymond Camden posted on 8/9/2011 at 1:57 AM

Mark, I didn't mean to imply that was a bug. In fact, I am pretty sure it is an intentional design choice. It's just one I don't like. I could be reading your wrong of course. :)

Comment 3 by Mark Llewellyn posted on 8/9/2011 at 2:24 AM

No I was just trying to say that I noticed the portion of the next slide disappeared as I pulled the right edge of the browser window in (so that it was more of a 4:3 aspect) so I assumed the different layout classes were meant for specific monitors/audiences... <grin>

Comment 4 by Raymond Camden posted on 8/9/2011 at 6:24 AM

Hmm, maybe. I've got a huge wide screen monitor so it may have been just that.

Comment 5 by Phillip Senn posted on 9/14/2011 at 10:57 PM

Hey, this is really good. I just thought of an application I can use this for. Rather than asking my students to put together a PowerPoint file, I can get them to upload their pictures one at a time and they can do their presentation from this. That way, it's all in my system and I can grade on each individual slide.

Comment 6 by Raymond Camden posted on 9/14/2011 at 11:23 PM

You should share that project when doing. It sounds very interesting.