Slideshow with Flair

This post is more than 2 years old.

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>

  &lt;div id="thumbnails"&gt;
	  
	  &lt;cfset folderurl = "images2"&gt;
	  &lt;cfset folder = expandPath("./images2/")&gt;
	  &lt;cfdirectory action="list" directory="#folder#" name="images"&gt;
	  
	  &lt;cfquery name="images" dbtype="query"&gt;
	  select	name
	  from		images
	  where 	(lower(name) like '%.jpg'
	  or		lower(name) like '%.gif')
	  and		lower(name) not like '_thumb_%'
	  &lt;/cfquery&gt;
	  
	  &lt;cfloop query="images"&gt;
		&lt;cfif not fileExists(folder & "_thumb_" & name)&gt;
		  &lt;cfimage source="#folder##name#" action="read" name="newimage"&gt;
		  &lt;cfset imageScaleToFit(newimage, 100, 100)&gt;
		  &lt;cfimage action="write" source="#newimage#" destination="#folder#/_thumb_#name#" overwrite="true"&gt;
		&lt;/cfif&gt;
		
	  &lt;cfoutput&gt;&lt;a href="#folderurl#/#name#" class="slideshowThumbnail"&gt;&lt;img src="#folderurl#/_thumb_#name#" border="0" /&gt;&lt;/a&gt;&lt;/cfoutput&gt;
	  &lt;/cfloop&gt;		  
	  &lt;p&gt;&lt;a href="#" onclick="show.play(); return false;"&gt;Play&lt;/a&gt; | &lt;a href="#" onclick="show.stop(); return false;"&gt;Stop&lt;/a&gt; | &lt;a href="#" onclick="show.next(); return false;"&gt;Next&lt;/a&gt; | &lt;a href="#" onclick="show.previous(); return false;"&gt;Previous&lt;/a&gt;&lt;/p&gt;

	  &lt;/div&gt;
	  
	  &lt;div id="slideshow" class="slideshow"&gt;&lt;/div&gt;

		&lt;script type="text/javascript"&gt;
	  	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();
		});
	  &lt;/script&gt;

&lt;/div&gt;

</body> </html>

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 existdissolve posted on 8/31/2007 at 7:25 PM

<i>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.</i>

Sexy = truth.

Comment 2 by Dave Ferguson posted on 8/31/2007 at 7:44 PM

On FireFox (windows) there is a flicker or blink during image transition or display.

--Dave

Comment 3 by Raymond Camden posted on 8/31/2007 at 7:49 PM

Odd, I don't see it with FF/OSX. But in general guys - please post any comments about the js to the original author. (If you can find a way to contact him.)

Comment 4 by Dave Dugdale posted on 8/31/2007 at 8:17 PM

I have FF and I don't see the issue.

I think it is nice and clean looking - great job!

Comment 5 by Raymond Camden posted on 8/31/2007 at 8:20 PM

@Dave - Thanks. I'm good when I stand on the shoulders of others. ;) My own design skills wouldn't look much different from my kids.

Comment 6 by Dave Dugdale posted on 8/31/2007 at 8:25 PM

Ah you are so modest.

Also, I have seen your code in Ben's books before and I can say it looks clean and easy to follow.

Can you tell us when the book will come out on Amazon?

Comment 7 by James Edmunds posted on 8/31/2007 at 8:29 PM

Let's not forget to mention that this was a great chance to see your cute bunch of kids in action... and the alligator, I'm assuming, is just a visitor.

Comment 8 by Raymond Camden posted on 8/31/2007 at 8:32 PM

@Dave, you can preorder them now - I think B1 goes on sale tomorrow. I'm 90% done with my last chapter for b3.

http://www.coldfusionjedi.c...

The links in that blog entry are affiliate links. If you buy the books from there, I get a small cut.

@James - Nah - thats lunch. ;)

Comment 9 by Greg Nilsen posted on 8/31/2007 at 9:08 PM

Yea, it functions like crap on my FF also. I think I liked your original better, Ray.

Comment 10 by Sam Curren posted on 8/31/2007 at 9:21 PM

Mootools is ok, but for some real power, bask in the goodness of jQuery. It provides a very solid base, and many plugins that play nicely. All this IMHO, of course.

(My windows/ff worked great)

Comment 11 by Dave Ferguson posted on 8/31/2007 at 11:45 PM

Using FireBug I was able to see what the cause of the flicker was. On click the large image is requested 2 times. When it is auto playing only one request is made. After the image loads another request is made for the image. The last request is what is causing the flicker.

--Dave

Comment 12 by Dave Ferguson posted on 8/31/2007 at 11:47 PM

Oops.. posted to soon. You have to have cache disabled in FF to see this. Otherwise it works as expected.

--Dave

Comment 13 by Lori posted on 10/24/2007 at 4:45 PM

Did you download the javascript code for BackgroundSlider.js and slideshow.js? I downloaded the mootools.js but can't find the other javascript codes. I see instructions on the Slide Show page, but no actual js file to download. If you wrote it yourself, would you mind posting it? Great tutorial by the way!

Thanks!

Comment 14 by Raymond Camden posted on 10/24/2007 at 8:46 PM

I downloaded the JS from his demo site.

Comment 15 by Lori posted on 10/24/2007 at 10:51 PM

I'm sorry, but I don't see the download link. I looked on his main site: http://www.phatfusion.net as well as the direct link to the slide show.

Thanks!

Comment 16 by Raymond Camden posted on 10/24/2007 at 10:56 PM

You have to view source, find the URLs, and grab them by hand. :) Yes - I wish he would have made a zip. I'm not sure why he didn't.

Comment 17 by Lori posted on 10/24/2007 at 11:10 PM

You're gonna kill me, but I don't see the URL links in the source code. Is it part of the mootools.js? I already downloaded mootools.js, but don't see it in there. I see src="BackgroundSlider.js" and src="slideshow.js", but have no idea how to get those. I really appreciate your time.

Comment 18 by Raymond Camden posted on 10/24/2007 at 11:18 PM

Um, so when you src="foo", and foo is a relative url, not a full url, then the full url is CURRENTURL+foo.

So if you are at www.foo.com/index.html, and see an image tag pointing to zoo.jpg, then the URL of the JPG is

www.foo.com/zoo.jpg

This is 101 stuff for HTML Lori. ;)

Comment 19 by Lori posted on 10/24/2007 at 11:37 PM

Not sure what you're looking at or referring to. I'm looking in the source code for the SlideShow on http://www.phatfusion.net/s... . Sorry to waste your time.

Comment 20 by Raymond Camden posted on 10/24/2007 at 11:40 PM

Lori, in the comment you made earlier, you said you see src="BackgroundSlider.js", and src="slideshow.js". So if you saw this on http://www.phatfusion.net/s..., it means the JS files are ALSO found at http://www.phatfusion.net/s...

Here is one:

http://www.phatfusion.net/s...

Do you understand the relative URL concept now?

Comment 21 by Lori posted on 10/24/2007 at 11:51 PM

Yes, I do understand the concept but I guess I was so focused on finding an actual link that I wasn't really thinking about following the reference to the link in the src code. Even though you said it, it didn't click. I appreciate your patience and explanation.

Thanks to this blog tutorial I quickly used lightbox to create data driven images pop-ups and am excited to use your tips to make a slide show. Again, thank you for your tutorial and assistance. All of your tips, tutorials, applications, and references have been extremely beneficial over the years and most appreciated.

Thanks again.

Comment 22 by Raymond Camden posted on 10/25/2007 at 1:18 AM

No problem. Hopefully I didn't sound too snippesh up there. :)

Comment 23 by Lori posted on 10/25/2007 at 2:01 AM

Nope. I appreciate your help.

Comment 24 by Bernd posted on 2/5/2008 at 2:13 AM

hello,
I saw your slideshow and its very fine.
But I have no function.
I downloades mootools.js, slideshow.js and backgroud.js from mootool homepage.
I put at example 1.jpg and _thumb_1.jpg into an image2 folder and I used the source code, but I have no funktion.
The .jpg file are not found.
With source code from mootools, I get the slideshow, but without rectagle about the thumbnail.

I think, I have wrong .js files or my .css stysheet is wrong.

Please can someone help me ?

Regards,

Bernd

Comment 25 by ryan posted on 5/19/2008 at 7:24 PM

hey thanks so much for this outline, its just what i was looking for.

quick 2 question..

if i put my thumbs in an overflow div (so i can scroll through the 300+ images) how can i keep the background slider (orange box) inside the div? currently, the box continues outside the div and just makes the page expand...

also, how might i add a title to each rotating image?

hopefully this makes sense.. i am a little new to javascript and just can not figure out how to do this.

either way thanks for the CF app.

Comment 26 by Raymond Camden posted on 5/19/2008 at 7:30 PM

Not to pass the buck - but I'd recommend pinging the author of the JS stuff. All I did was package it up. :)

Comment 27 by ryan posted on 5/19/2008 at 7:36 PM

thanks ill give it a try.

Comment 28 by Chris Bowyer posted on 10/23/2009 at 11:15 AM

Hi Ray,

I know this is an old post, but just wondering what the significance is of the ./ in <cfset folder = expandPath("./images2/")>

Comment 29 by Raymond Camden posted on 10/26/2009 at 12:38 AM

expandPath can be used to change a relative path into a full path.

Comment 30 by Dr Adam posted on 1/22/2010 at 10:49 AM

Hi Ray,
This slideshow is still awesome 2 years later! Works exactly for what I wanted to do. Only one question I have is can you see a way to make it choose the photos from the directory at random? I tried putting the "order by RAND()" there in the images query but that made it break.
Any ideas?
Thanks,
Adam

Comment 31 by Raymond Camden posted on 1/22/2010 at 5:11 PM

You can use this UDF on the query of images: http://www.cflib.org/udf/Qu...

Comment 32 by Dr Adam posted on 1/22/2010 at 6:40 PM

Wow that was fast!
I'll give it a shot.
Thanks Ray!
Adam

Comment 33 by Justin posted on 9/7/2011 at 5:13 AM

I'm trying this but I get a blank box where the slide show should be. I do a dump and my image file names are being pulled out of the database. So I'm not sure what's going wrong. I suppose I have a couple of questions then...1. I am using mootools.js version 1.3.2; will that work? and 2. Does anyone know of any other slide shows similar to this that uses CF as well? I'm thinking that since this post has been up since 2007, maybe there's something newer and better.

Thanks everyone!!

Comment 34 by Chris Bowyer posted on 9/7/2011 at 5:39 AM

@Justin

I use SlideShowPro - http://slideshowpro.net for just about everything now

Comment 35 by Raymond Camden posted on 9/7/2011 at 5:53 AM

@Justin - Sorry - it's been forever since I used this code.

Comment 36 by Kerrie Parker posted on 8/29/2013 at 9:17 PM

Hello, I'm trying to do something similar, but with captions instead of images. I might even want to try and do images and then have captions populate from database rows. Any ideas. Here is my code:

[EDITED]

Comment 37 by Raymond Camden posted on 9/3/2013 at 12:52 AM

Kerrie, please do not post large amounts of code here (as it states above the contact form). Please use a pastebin or a gist. I've removed the code from your comment but encourage you to post a new comment with the link.