Posted in ColdFusion | Posted on 08-31-2007 | 6,167 views
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.
2<head>
3<script type="text/javascript" src="mootools.js"></script>
4<script type="text/javascript" src="BackgroundSlider.js"></script>
5<script type="text/javascript" src="slideshow.js"></script>
6<link href="slideshow.css" rel="stylesheet" type="text/css" />
7<style>
8 body {
9 font: normal 91%/1.2 Helvetica,Arial,Verdana,Sans-serif;
10 background-color: #fff;
11 color: #999;
12 padding-top: 30px;
13 text-align: center;
14}
15</style>
16
17</head>
18
19<body>
20
21 <div id="thumbnails">
22
23 <cfset folderurl = "images2">
24 <cfset folder = expandPath("./images2/")>
25 <cfdirectory action="list" directory="#folder#" name="images">
26
27 <cfquery name="images" dbtype="query">
28 select name
29 from images
30 where lowerr(name) like '%.jpg'
31 or lower(name) like '%.gif')
32 and lower(name) not like '_thumb_%'
33 </cfquery>
34
35 <cfloop query="images">
36 <cfif not fileExists(folder & "_thumb_" & name)>
37 <cfimage source="#folder##name#" action="read" name="newimage">
38 <cfset imageScaleToFit(newimage, 100, 100)>
39 <cfimage action="write" source="#newimage#" destination="#folder#/_thumb_#name#" overwrite="true">
40 </cfif>
41
42 <cfoutput><a href="#folderurl#/#name#" class="slideshowThumbnail"><img src="#folderurl#/_thumb_#name#" border="0" /></a></cfoutput>
43 </cfloop>
44 <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>
45
46 </div>
47
48 <div id="slideshow" class="slideshow"></div>
49
50 <script type="text/javascript">
51 window.addEvent('domready',function(){
52 var obj = {
53 wait: 3000,
54 effect: 'fade',
55 duration: 1000,
56 loop: true,
57 thumbnails: true,
58 backgroundSlider: true
59 }
60 show = new SlideShow('slideshow','slideshowThumbnail',obj);
61 show.play();
62 });
63 </script>
64
65 </div>
66
67</body>
68</html>
Sexy = truth.
--Dave
I think it is nice and clean looking - great job!
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?
http://www.coldfusionjedi.com/index.cfm/2007/8/8/A...
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. ;)
(My windows/ff worked great)
--Dave
--Dave
Thanks!
Thanks!
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. ;)
Here is one:
http://www.phatfusion.net/slideshow/BackgroundSlider.js
Do you understand the relative URL concept now?
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.
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
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.
I know this is an old post, but just wondering what the significance is of the ./ in <cfset folder = expandPath("./images2/")>
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
I'll give it a shot.
Thanks Ray!
Adam
Thanks everyone!!
I use SlideShowPro - http://slideshowpro.net for just about everything now
[Add Comment] [Subscribe to Comments]