Journal
Slideshow Alternative
10 September 2006 › 27 comments
First off, let me say that I did not write this bit of JavaScript, and that full credit goes to Steven G. Chipman for his excellent Cross Fade Redux. That being said, you can check out the demo that I have made here…
This came about as a result of talking with Jesse Anderson a few months ago, and more recently Matthew Smith, on how to do rotating images with links on a church site. For instance, check out the way The City Church does theirs using SlideShowPro. It’s pretty cool, because it gets your attention, and then you can click on the image to go to the corresponding page to read more. I think that SSP is a great product, and use it myself for my portfolio.
Yet, to administer SSP takes owning either Flash 8 or MX 2004, $20.00, and a bit of XML savvy. Additionally, you can also buy Director, a PHP and MySQL based Ajax admin that will handle all the XML heavy lifting for you. Both of these are worth well more than what Todd Dominey charges for them. So, please do not mis-interpret this post as a slam against SlideShowPro.
All I am saying is that if you just want to simply rotate images with some accompanying links, and you want to do it on the cheap, this is a possible alternative. It sure beats using animated GIF images, like the ones seen on the Billy Graham website. The trouble with GIFs is limited color depth, choppy transitions, and ability to only put one link despite multiple frames, not to mention having to re-create the file if you want to splice in new images.
So, what I have done in this example is follow Steven’s lead, but have diverged for how things are handled with JS off. In his example, you get the truely accessible alternative of seeing all the images laid out. This is nice, but also breaks the layout of a site. What I have done is made it so only the initial image is viewable with JS off, so the user doesn’t see a problem.
So, for what it’s worth, there you have it. It’s not revolutionary, but will get the job done if you need rotating images that are also linked. Oh, and don’t forget to set the correct path to your CSS file in the JavaScript.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Brian Zollinhofer
Looks pretty nice and clean. Hopefully I’ll be able to use it on my new church site I’ll be releasing in the next month or so… I just have to talk a few people into the fact that rotating pictures can look nice…
#2 Jon
I really like how this effect came out, and as usual I’m psyched to see that the result gracefully degrades. This is actually great timing because I think I should be able to use this on a project that has just come up. Nice work, Nathan.
#3 Chris Vannoy
For work, I had rigged up something similar using AHAH and a slew of javascript libraries. I still have the initial example up here, but later added a little more semantic richness and made it so you can switch between panes, stop the rotation and show the initial one with javascript off (that last part might still need some work).
The other nice thing is it does a complete div replacement/fade, so you get images, text, whatever fading in and out.
I never got around to extensively testing it, but might have to dig the souped-up version up again after seeing your excellent example here.
#4 Michael Montgomery
Excellent! This comes up all the time.
I’ve used the Cross-Fade Redux a few times,
and it’s great to have an improved version.
#5 trovster
I’ve used a similar technique on a recent college website
#6 Jesse Anderson
Weird you and I had this same conversation too a couple months when I was scheming stuff for my church, the links were always a little buggy with whatever JS we were using before so I ended up just going with SSP for the church’s new website (www.goldcreek.org). Plus with SSP Director it makes it easy for other people to be involved with updating. =)
#7 graste
Nice effect. I think the example could be improved, by using CSS to arrange the slideshow images. Javascript should then hide them when the page loads. The result would be, that users with javascript turned off would just see a nice gallery instead of a slideshow.
#8 Jason Beaird
This looks handy Nathan. Thanks for bringing light to it. I’ve used a few different crossfading image scripts before but I’m sure this one is a bit more semantically correct. :)
#9 Jaisen Mathai
Really nice effect. I might replace the script I use with this one.
I’ve been playing around with this for the past few months now. I wanted to pull images from Photagious and put them on my personal page and blog. Since all of my photos (about 2000 of them) are on Photagious. Being a developer at Photagious we decided to look into writing a JavaScript wrapper for our (currently undocumented) API. The JavaScript wrapper is fully documented and let me pull in media from my existing library onto my blog. I was able to show 5 photos in my sidebar, add a search box (utilizing the scriptaculous autocomplete), add a next/previous button and use the lightbox JavaScript to show a preview of the photo.
All in about 25 lines of simple JavaScript. I have pulled the photos into JavaScript slideshow scripts as well. You can also take advantage of our flash slideshows as well.
If you wanted to give it a try let me know. The JavaScript documentation is at http://www.photagious.com/api/documentation/javascript/. There are some copy/paste samples that you can use to get started right away. I’d love to get some feedback.
http://blog.jmathai.com/
#10 Peter Flaschner
Nice work Nathan! I’ve used SSP and Director on a couple of projects and am generally quite fond of it. It’s a great tool, but a very heavy one. I can see many circumstances where using your solution will provide the same functionality as SSP, but without all the heavy lifting.
Thanks so much for sharing!
#11 mark
Nice work! But it will be great, if there is an ajax feature that reloads the radom images from a database continusly. I use photpost pro and there is an random image feature. Now i want to mix the crossfade feature with the random images of my gallery and put it on my website.
Some idea?
#12 Wayne Sutton
Great feature, just used it on church site: http://www.elevationbaptist.org/index.htm
Thanks for sharing!
Wayne
#13 Lance Willett
Nathan,
Very nice technique. I remember a recent project where this would have been perfect. I haven’t used SSP, mainly because I don’t own any Flash products, but it’s nice to be able to replicate some of its elegance with simple scripting. Thanks!
#14 James Cooper
Thank Nathan, this is just what I was needing for a site I’m working on. God has great timing!
#15 Nathan Smith
Hey, I’m glad that everyone found this little solution helpful. The real credit of course belongs to Mr. Chipman, who wrote the JavaScript animation in the first place. He’s a smart guy, Software Engineer for AOL and all that.
#16 James Saunders
Thanks for putting this together. It also works for rotating whole divs (with minor edits), so I can include some rotating descriptions. Simple enough for me (someone with no Javascript experience) to figure out and customize.
#17 Peter Stubbs
Nice script, now how about being able to stop it with a mouseover and restart it on a mouseout and /or with stop and start links beneath?
#18 Geoff
As always a fantastic and quick article on many alternetives to solve a common need/problem.
Thank you!
#19 Raghavendra
It is wonderful. I am new to these concept. I want to know is it possible to display slideshow with the excat size of images as I have images with different sizes. If it could be done pl guide me how I can do this.
Thanks
#20 Nathan Smith
Raghavendra: You will need to edit the width and height of the images in the slideshow1.css file. I cannot really explain better than that, as it would take too long. If you want to learn more about CSS, then check out the book CSS Mastery – cssmastery.com.
#21 Jonathan
I’ve also found this one: www.monoslideshow.com. It requires Flash though, but does have support for captions.
#22 nibus
not just looking nice – it produces not a lot of invalid code!
#23 mpmchugh
Great script.
Does anyone know if there’s a way to get the first image to fade in?
It seems odd in some instances to start with the image already there.
Thanks.
-mpm
#24 Steve
Great job—a very nice improvement on a slideshow that was already pretty darn cool.
I’m wondering if this code could be modified so that the images wouldn’t have to all be preloaded ahead of time. That is, build in some kind of ‘download in the background’ feature and pause the slideshow until the next image has been downloaded.
I’ve seen slideshows that allow for background downloading, but the ones I’ve seen don’t have smooth fade effects like this one. Is it possible to make a slideshow with smooth fading and no preloading?
#25 Nathan Smith
Steve: For what you are describing, I think a good solution might be Robert Nyman’s JaS – JavaScript Slides. It’s a nicely done slideshow for use in a personal site, and features different skins, animations and navigation – the whole schpeel. You can read more about it over at Robert’s site…
http://robertnyman.com/jas/
#26 Steven Garcia
Hey Nathan. Thanks for posting this up. I was using a bulky prototype script before and it was killing the validation on my pages. This one is much cleaner and easier to tweak.
One caveat I should mention is that with styling turned off, this script does some weird things with images, shifting them around, appearing and disappearing…making it almost impossible to browse the page.
Caveat aside, I think this is the best option I’ve come across and only have one question before I implement:
How can I remove the linking feature? I got rid of the onClick lines in the img tags so now nothing happens when you click, but I still get the mouse changing to linky finger as I pass over image.
Any ideas?
#27 Steven Garcia
Agh..never mind I simply deleted this:
css = d.createElement(‘link’);
from Line 18 and it works perfectly.
Thanks again!