We’re currently working on a project using quite a lot of AJAX, which is great fun. We decided to go with the prototype and scriptaculous javascript framework for a number of reasons, but that did bring some difficulties.
One of the requirements of the project was a simple image gallery to show a number of images related to a particular record from the database. Obviously, since the site was predominantly AJAX’ed, we wanted a nice image gallery that would pup up on a mouseover from a dynamic URL that was called using AJAX.
However there were no simple “already built” javascript image galleries out there that use scriptaculous & prototype. Most of the more basic ones were developed on the MooTools framework and this caused a conflict with our other code.
So I set out to create a simple image gallery that we could use for the site.
I’m sure other people have had this problem, so I thought it would be a good idea to give it out to you all to play with yourself.
This isn’t the final version to be used as it’s been a while since I coded and I’m sure I haven’t done a very good job. But it works none the less and you can of course clean it yourself if you need to!
in terms of design I’ve also left it quite messy so that you can style it yourself. It’s very easy to template.
I don’t think I’ll bother boring you with the details of the script, I personally never read them and just download the code. Here’s the script to download – have fun!
Oh and here’s a demo example of it in action!
UPDATE:
Dave from ISOTOPE Communications has improved the script – you can get his version here:
http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/
#1 by Peter K at October 28th, 2008
| Quote
Did you check this one out?
http://smoothgallery.jondesign.net/
#2 by Tom Doyle at October 28th, 2008
| Quote
Hi Peter
Yes I did, the problem was it’s on the MooTools framework which meant we couldn’t use it!
The gallery was too advanced for our client too – as we tried sw gallery from http://www.wappler.eu/swgallery/ – which is a scritaculous and prototype version of JonDesigns smooth gallery.
Tom
#3 by David at October 29th, 2008
| Quote
Hi Tom,
I tried getting this to work on my local server by copying the source code and the 3 js files but it’s not working. Am I missing something? By the way this is one of the few slideshows I’ve found that has start/stop controls
#4 by Tom Doyle at October 30th, 2008
| Quote
Hi David
Are you using IE? If so, run it through a web server (or change security settings). Alternatively use FF.
Tom
#5 by Tom Doyle at October 30th, 2008
| Quote
Oh and make sure you have the latest scriptaculous and prototype files.
#6 by Jeremy at December 3rd, 2008
| Quote
Great contribution, I plan on taking the code and adding some tweaks to it. Right now I don’t want it to autostart, but the prev/next buttons don’t work if the slideshow isn’t active.
PS: Whats this code released under?
#7 by Tom Doyle at December 4th, 2008
| Quote
Hi Jeremy,
Thanks for stopping by. It’s free free free, no licenses. If you want to put a link back in the script – please do
but no pressure.
Should be pretty easy to get it to work without autoplaying. We have it on a new site soon that uses AJAX to load a div on mouseover.
Tom
#8 by Jim Morrison at December 18th, 2008
| Quote
Hi Tom,
Thanks for a great little script!
Have done a little re-write to make it an a little OO rather than functional:
http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/
Cheers,
Jimbo
#9 by Tom Doyle at December 18th, 2008
| Quote
Hahaha this is class! I’m finally famous!
I love the note on the js file (plagerising!)!
I don’t code all day anymore, stopped doing that a long time ago as my code probably shows! So it’s great to see someone take it and improve it.
Thanks for the menion Jimbo – I’m honoured!
#10 by Tom Doyle at December 18th, 2008
| Quote
Oh BTW!
If you are still playing around with it, someone asked me recently to create PNG support for it. But to be honest I simply haven’t got the time to do it right now. Anyone up for the challenge?
#11 by Jim Morrison at December 18th, 2008
| Quote
Sure – what do you mean by PNG support!?
Anything along these lines:
http://www.icommunicate.co.uk/articles/all/definitive_ie_png_fix_21/
Jimbo
#12 by Jeremy at December 18th, 2008
| Quote
PNG? I’m already using PNGs whats the problem?
#13 by Tom Doyle at December 18th, 2008
| Quote
That’s the one!
#14 by Tom Doyle at December 18th, 2008
| Quote
It’s PNG support in IE6 – sorry about that!
#15 by Jose at June 3rd, 2009
| Quote
You can use the $$( ) for prototype to load all images from classed-”fade-box” divs:
// set the starting image.
var i = 0;
// The array of div names which will hold the images.
var image_slide;
// The number of images in the array.
var NumOfImages = 0;
// The time to wait before moving to the next image. Set to 3 seconds by default.
var wait = 3000;
// The Fade Function
function SwapImage(x,y) {
$(image_slide[x]).appear({ duration: 1.0 });
$(image_slide[y]).fade({duration: 1.0});
}
// the onload event handler that starts the fading.
function StartSlideShow() {
var fadeboxes = $$(“.fade-box”);
NumOfImages = fadeboxes.length;
image_slide = new Array(fadeboxes.length);
for (var j=0; j < fadeboxes.length; j++) {
image_slide[j] = fadeboxes[j].id;
}
play = setInterval(‘Play()’,wait);
$(‘PlayButton’).hide();
$(‘PauseButton’).appear({ duration: 0});
}
#16 by Smashing Themes at August 14th, 2009
| Quote
Hi Tom, I too have found myself in the same situation many times. You need something really simple but you can’t find. I also ended up writing my own scripts.