A few days ago I blogged about a simple slide show built using CFIMAGE and CFLAYOUT. While this worked ok, it wasn't very sexy. It had no flair. And as everyone knows, I'm all about the flair, so let's take a look at a cooler version. First I'll show the demo than talk about how it was built.

Demo

So how was this built? First off - none of the flair comes from me. It comes from a script called Slide Show. This code is pretty neat and I wish I could credit the guy who built it - but like far too many people out there, he doesn't have a "About Page". Do check out his other demos though as they are just as cool as this one. As Paris would say - that's hot.

The code uses mootools, an interesting JavaScript library. I haven't looked at it a lot - but it seems pretty nice. Although I will flaw them one thing - the download page nicely lets you select which libraries you want to grab. It will even compress them. But there is no "get all" option. As a developer, I wanted to just grab everything so I can play with it when I have time.

The ColdFusion code behind this is not really different than what I did last time. The only change was to remove the cflayouts. I used the same HTML he did for his demo and that was pretty much it. The complete code is below. It is a bit messy as I was just playing with it, but hopefully you get the idea. I think this goes to show that if you don't like ColdFusion 8's built in Ajaxy-goodness, you can definitely still play well with other Ajax libraries.

<html> <head> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript" src="BackgroundSlider.js"></script> <script type="text/javascript" src="slideshow.js"></script> <link href="slideshow.css" rel="stylesheet" type="text/css" /> <style> body { font: normal 91%/1.2 Helvetica,Arial,Verdana,Sans-serif; background-color: #fff; color: #999; padding-top: 30px; text-align: center; } </style>

</head>

<body>

<div id="thumbnails">

<cfset folderurl = "images2"> <cfset folder = expandPath("./images2/")> <cfdirectory action="list" directory="#folder#" name="images">

<cfquery name="images" dbtype="query"> select name from images where (lower(name) like '%.jpg' or lower(name) like '%.gif') and lower(name) not like 'thumb%' </cfquery>

<cfloop query="images"> <cfif not fileExists(folder & "thumb" & name)> <cfimage source="#folder##name#" action="read" name="newimage"> <cfset imageScaleToFit(newimage, 100, 100)> <cfimage action="write" source="#newimage#" destination="#folder#/thumb#name#" overwrite="true"> </cfif>

<cfoutput><a href="#folderurl#/#name#" class="slideshowThumbnail"><img src="#folderurl#/thumb#name#" border="0" /></a></cfoutput> </cfloop>
<p><a href="#" onclick="show.play(); return false;">Play</a> | <a href="#" onclick="show.stop(); return false;">Stop</a> | <a href="#" onclick="show.next(); return false;">Next</a> | <a href="#" onclick="show.previous(); return false;">Previous</a></p>

</div>

<div id="slideshow" class="slideshow"></div>

<script type="text/javascript"> window.addEvent('domready',function(){ var obj = { wait: 3000, effect: 'fade', duration: 1000, loop: true, thumbnails: true, backgroundSlider: true } show = new SlideShow('slideshow','slideshowThumbnail',obj); show.play(); }); </script>

</div>

</body> </html>