A while I back I pointed to the JavaScript-driven photo fade-in effect on Scott Upton’s Couloir, and explained an accessible cross-browser version of the code. Since then Scott has taken things to the next level with a resizing, fading slideshow. He’s produced two demos to compare and contrast:
The JavaScript demo has been written entirely in object oriented code (must get to grips with that), using Travis Beckham’s API to detect when the next photo has arrived in the browser. Impressive stuff.
Now then, I appreciate that what Scott has created is a demo, but that said I’m going to be pick nits as the JS slideshow can be improved still further. As it stands the JS demo mirrors the Flash demo almost exactly, including the inherent problems with accessibility and bookmarking. So here are some ideas for reintroducing those qualities back to the JS version.
First off it should be stressed that the slide show is contained in a single HTML document, using JavaScript to load in images when required. The point here is that images are only loaded when they are required, replicating the on-demand streaming of the Flash movie, so the temptation to use a show-hide script with a list of hidden images needs to be avoided.
Bookmarking of individual images is prevented because the link to the next image is through a direct JavaScript call:
<a href='javascript:nextPhoto()'>This could be changed to:
<a href='#2' onclick='nextPhoto()'>Where ‘2’ is dynamically incremented by the script as the slide show is traversed. Because the link is to a local anchor (albeit a non-existent one) the page won’t reload but the URL in the browser address bar will still update and hence can be bookmarked. The script would obviously have to base its choice of image by parsing the URL for the number. See this crude demo.
All reference to photos in the slideshow demo is held in a JavaScript array. Thus if you have JavaScript turned off you will not be able to view or navigate to any photos.
Some options are still open, all of which are crude compared with the JavaScript enhancements, but the bottom line is they work.
A list of links to all the images could be added, hidden inside a <noscript> element – this would be enough for a user to view any image. This experience could be enhanced slightly if images are opened into an iframe, sized with the maximum dimensions of all photos and again hidden inside a <noscript>. We could be clever and dynamically create the JavaScript array from the list, although the list would have to be outside a noscript (presumably hidden with CSS) in order for it to be accessible through the DOM.
Accessibility · DOM | JavaScript
Richard@Home wrote:
The Javascript version is very slick, but I get a flash of the (resized) old image before the new image is displayed.
I wrote a quick how to on detecting when images are loaded here: http://richardathome.no-ip.com/index.php?article_id=311 .
(Down in the comments)
Samrod Sheanssa wrote:
http://samrod.com/photos
I’ve been using my own JS fading effect in my gallery for almost 2 years now. The ramps are “threaded” to handle multiple fades at once, and also used to dissolve between images in each album. Feel free to play with the trailing effect on the thumbnails! Check out an album and see the transitions between slides. I have not yet included the standard KHTML opacity handling, but I’ll add it as soon as I have some free time.
My slideshow preloads the next image while displaying the current one and indicates in the status bar when it’s ready to display. The dissolves can be disabled with the icon on the far right. My opacity ramps use a sinewave curve for a smoother fade (especially helpful on slower systems).
NOTE: Opacity ramping is a relatively processor intensive process since it uses the rendering engine’s compositing object (in Gecko). Those of you with slower browsers and processors, you’ve been warned.
Comments are appreciated.
Ryan wrote:
Looking good. Your example doesn’t seem to work at all.http://www.clagnut.com/sandbox/slideshow.html
Dustin Diaz wrote:
I’m still lovin’ the first one you showed us.
However, I didn’t load all mine with JS ‘cause everything was stored in a DB and I really didn’t want to rely on having to load a ton of images at once.
It’s lookin’ great though.
Scott Upton wrote:
Just a note to say that I’ve tweaked the loading script a bit, hopefully for the better… And incorporated the bookmarking feature mentioned at the top of this page.
Have a look here…
xxx wrote:
There is a nice error in the JS script (at couloir.org), visible in Firefox 1.0. When you start clicking fast on the images (without waiting for them to be loaded), you migh get into a “loop” with image loading and then infinitely flickering the “loading message”.
Scott Upton wrote:
Regarding the error in Firefox when you click rapidly, the only way I can reproduce it is to click wildly, frankly not something watching the slideshow is likely to do intentionally. I’ll certainly try to figure out what that’s happening (likely because the tween hasn’t finished and the listener gets fooled into thinking the tween never will finish), but this doesn’t seem like it would be a common occurance.
Jason Beaird wrote:
I really like where all this is going. I implimented the original photo fade in on my artwork page but with the slickness Scott has been adding, I can see how this could become a great tool for thumbnail-based image galleries. The ability to link directly to each image via the querystring would be a must though.
Shaun Inman wrote:
Excellent work, both of you. One issue though, the current bookmarking fix breaks the back button. The anchor changes but image does not.
Easy way to fix that would be to use setInterval() to check the location to see if the number after the hash has changed and then trigger the appropriate action. That will probably change the entire logic of the script (clicking the image would just change the anchor and the listener set with setInterval() would handle swapping) but should address both the bookmarking and history issues.
Scott Upton wrote:
Interesting idea, Shaun. I’ll look into implementing something along those lines.
matt wrote:
this is such an awesome script. i ‘ve got a project in mind for it already. i’m thinking of using a forward and back button though instead of the click on image to move forward thing. it seems like i can just move the onclick property to my next link. im not really versed in js… i imagine that it’s simple to make a back button, but i don’t know how… what would i have to add to make that work?
Chris wrote:
I love this script and have already started using it for one of my projects!
Like Matt who posted before me, I am not well versed in Javascript, but required there to be next and back buttons instead of simply clicking the image to progress. i asked around on Sitepoint and someone was able to help me out.
You can find the thread here:
http://www.sitepoint.com/forums/showthread.php?t=217452
Now if there could only be a way to make the resizing AND fading work for IE I would be over the moon! (Currently the resizing works but no fade).
Tom wrote:
“A list of links to all the images could be added, hidden inside a <noscript> element this would be enough for a user to view any image”
What about <link> elements in the head? This would also improve naviation for Mozilla/Opera with the next/previous “site navigation” buttons/toolbar whatever.
Still its an impressive demo, very slick.
Patrick Haney wrote:
I found Scott’s example a week ago and was quite intrigued by it to say the least. I love Flash, when used correctly, but I’d rather offer up something that would degrade nicely for older browsers (and those without plugins).
My biggest complaint with this script is the need to click the image to go to the next photo and not having a way to go back unless you loop all the way through. I suppose it wouldn’t be that difficult to add a previousPhoto() function and insert “Next” and “Previous” buttons below the image though. Perhaps if I get a chance I’ll dabble in that.
Great work though, both of you. I hope to see more people extend this system even more.
STEVO wrote:
could be improved with something like:
<a href=’url_of_next_image’ onclick=’nextPhoto(); location.href=”#2”; return false;’>
this way, the javascript-challenged would get a normal experience.
Scott Upton wrote:
To all of you who have written in, it’s relatively easy to add a previous/next link… I wanted to limit the functionality of this demo on purpose – gives you room to play around and gives me some latitude to build from it on personal projects as well.
Look for more updates to Couloir.org itself in the coming months.
Alex wrote:
Slayeroffice published something like this back in September based on Mr. Beckhams flash version on podlob.com, seen here:
http://slayeroffice.com/code/slide_show4/
Daniel Bulli wrote:
Wow , just found this resizing stuff… very cool, and pics at Couloir are astounding. I used things from first version to make it work on my site..
Wow very cool .. you guys are smart!
c_om wrote:
In Opera 7 on Mac eg the couloir.org fading slideshow
does not show images when clickin on next photo
I tried this:
nextPhoto = function(){
API.PhotoContainer.setOpacity(0);
document.getElementById(‘PhotoContainer’).style.visibility = “hidden”;
works in Opera
before the temp container was hidden with
// Function to load subsequent photos in gallery
nextPhoto = function(){
// Hide photo container temporarily
API.PhotoContainer.hide();
API.PhotoContainer.setOpacity(0);
Opera failed with
API.PhotoContainer.hide();
c_om wrote:
API.PhotoContainer.setStyle(visibility,hidden);
works too??
Zach wrote:
I feel that the script (if possible) should have the ability to have Back and Next as oppsoed to only going straight through the gallery. Not sure if that can be done, but it would be useful in larger galleries.
Or possibly if there was a way to do a text link listing of all of the images in the gallery, 01 . 02 . 03 etc. and you can have the ability to click on a number and it would jump you to that photo. Is that possible?
Amazing scripting either way, thank you very much to the creators.
eric wrote:
This script really kick ass.
I will put in on my page :)
Bobby Wallace wrote:
This is a great script but it didn’t work on IE6 until I adjusted the style for the PhotoContainer:
#PhotoContainer { visibility: hidden; width:1px}
I recall somewhere on the Microsoft site that IE required the object to have some explicity width (or something like that) set in order for the filters to work.
With the style change, it works on IE6, but I wonder why no one else reported this?
Travholt wrote:
I can’t get images to show in Mozilla for Mac. Not in Firefox for Mac either. They show in Safari, though …
_com wrote:
The photos don’t show up in Opera due to the
following line:
API.PhotoContainer.hide();
The above line causes Opera to not show = keep the photo hidden
This is a workaround to make it work in Opera just put this:
nextPhoto = function(){
// Hide photo container temporarily
if (/opera/i.test(navigator.userAgent)) {
API.PhotoContainer.setOpacity(0);
}
else if (!/opera/i.test(navigator.userAgent)){
API.PhotoContainer.hide();
API.PhotoContainer.setOpacity(0);
}
_com wrote:
For low bandwith users it might be usefull to add an image preloader to cache the photos
imagePreloader = function() {
{ myimages[i] = new Image(photoWidthArray[i], photoHeightArray[i]); myimages[i].src = photoDir + photoArray[i]; myimages[i].id = “cacheimage” + i; myimages[myimages[i].id] = myimages[i];for (var i = 0; i < photoNum; i+=1)
}
}
_com wrote:
Add this function to the script to make a show previous photo function
prevPhoto = function(){
if(photoId == 1) {
return;
} else if (photoId == 0) {
photoId = photoArray.length – 2;
} else {
photoId -= 2;
}
// Hide photo container temporarily
if (/opera/i.test(navigator.userAgent)) {
API.PhotoContainer.setOpacity(0);
}
else if (!/opera/i.test(navigator.userAgent)){
API.PhotoContainer.hide();
API.PhotoContainer.setOpacity(0);
}
// Get dimensions of photo
var wNew = photoWidthArray[photoId];
var hNew = photoHeightArray[photoId];
// Start tween on a delay
setTimeout(‘API.Container.tweenTo(easeInQuad, [API.Container.getWidth()-borderSize, API.Container.getHeight()-borderSize], [‘+wNew+’,’+hNew+’], 7)’,700);
// Set source, width, and height of new photo
document.getElementById(‘Photo’).src = photoDir + photoArray[photoId];
document.getElementById(‘Photo’).width = wNew;
document.getElementById(‘Photo’).height = hNew;
document.getElementById(‘NextLink’).href = “#” + (photoId+1);
document.getElementById(‘PrevLink’).href = “#” + (photoId+1);
document.getElementById(‘Caption’).innerHTML = (captionArray[photoId])+’ ‘;
document.getElementById(‘Counter’).innerHTML = ’ picture ’ +(photoId+1)+’ | ‘+photoNum;
// Advance counter to next photo
advancePhoto();
}
Also add this line to the NextPhoto function
document.getElementById(PrevLink).href = # + (photoId+1);
In your html code do this
<a id=”PrevLink” href=”#” onclick=”prevPhoto();” onfocus=”this.blur();” title=”← previous image”>previous image</a>
<a href=”#” id=”NextLink” onclick=”nextPhoto();” onfocus=”this.blur();” title=”next image →”>next image</a>
kg sambrano wrote:
Lots of beautiful shots of the west!
I shoot black and white landscapes
please visit me www.kgsambrano.com
shoot me an e-mail, tell me what you think!
Stephen wrote:
I second the person who thought an auto-advance through the slides would be a good thing to have (rather than forced clicking to advance the images)... if someone gets something like this working, please let me know!
Ben Kass wrote:
Many thanks for such an innovative script. I am using your slideshow on my web home. Still, There are things to fix in there.
If you go to my site and try to view photos you will see that IE get sometimes (rather too often) stuck loading an image and not showing anything but a white square.
Could the problem be caused by the loading procedure? the API?
Mozilla, as always, does a better job then IE, still most users (that come to my site) use IE.
I will certainly check back to see if there are any updates.
Once again,
Thanks
Rob wrote:
Does anyone know of any examples that use indiviual links to change photos rather than the previous and next links. For example i have links (1–7) and when i click on 7, as an example, i want whatever image its on to fade into 7, make sense? Anybody have any suggestions?
Thanks for such an awesome script.
Scott Upton wrote:
Just a note to say that I’ve updated the slideshow script and posted it at the same location The mouseover next/previous links overlayed on the image now work in IE/Win and there were many other small cleanups made.
As to the question above about linking directly to a specific image, stay tuned. You can get a small preview here
Justin Bitely wrote:
Scott, wonderful work – can’t wait to see the new version you did for the Levensaler site. Any chance the php wrapper/backend is going to be released with the script?
Ignacio wrote:
i have a problem with JavaSript in this line:
var wNew = photoArray[photoId][1];
var hNew = photoArray[photoId][2];
i think “photoId” have problems… i dotn’t know why, i need help with this please.
my browser say:
error photoArray[...].2 is null or not object
my array:
var photoArray = new Array(
// Source, Width, Height, Caption
new Array(“125_fotog.jpg”, “450”, “321”, “Taking flight from the summit”),
new Array(“126_fotog.jpg”, “450”, “321”, “Mt. Toll as seen from the slopes of Mt. Audubon”),
new Array(“127_fotog.jpg”, “450”, “321”, “Cruising across the talus”),
new Array(“128_fotog.jpg”, “450”, “321”, “The Mohling Traverse lies in the distance”)
);
mmmmhhh, i need really help!
Rich wrote:
Looks to me like you’ve missed a closing bracket ) from this line:
var photoArray = new Array(Ignacio wrote:
i do in PHP
var photoArray = new Array(
WHERE $tablaFotos.id_inmueble = “. $_GET[‘id’].” AND $tablaInmuebles.id = $tablaFotos.id_inmueble” ) or error( mysql_error() ); ?><?php
$tablaFotos = “inmoby_conf_fotos”;
$tablaInmuebles = “inmoby_inmuebles”;
$consulta2 = mysql_query( “SELECT $tablaFotos.id FROM $tablaFotos,$tablaInmuebles
<?php
$i = 0;
$total = mysql_num_rows($consulta2);
while ( $renglon2 = mysql_fetch_array ($consulta2) ) {
if($total – 1 != $i) {
echo “new Array(“”.$renglon2[id].”_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”),”;
}else{
echo “new Array(“”.$renglon2[id].”_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”)”;
}
$i++;
}
?>
);
this code make all arrays:
// Define each photo’s name, height, width, and caption
var photoArray = new Array(
new Array(“154_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”),
new Array(“137_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”),
new Array(“138_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”),
new Array(“140_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”),
new Array(“142_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”),
new Array(“143_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”),
new Array(“144_fotog.jpg”, “450”, “321”, “Visite Inmoby.com”)
);
bye bye
Scott Upton wrote:
Scott, wonderful work cant wait to see the new version you did for the Levensaler site. Any chance the php wrapper/backend is going to be released with the script?
Thanks… I don’t have any plans on releasing the PHP code that runs the backend just now. Perhaps in the future.
Rob wrote:
Great job guys, this is a beautiful script. I’ve implemented it and was wondering if there’s an easy way to make the slideshow automatic as well as manual. And also, is it easy to add a click through onto an image?
Here’s the site i’m referencing.
I’ve also run into a big snag with z-index issues in IE, of course. I’ve tried most everything and am stumped and I need supersmart people to help. If you look at the above page in IE you’ll notice the navigation slides underneath the photos… any help would be MUCH appreciated.
Thank you!
Ben wrote:
Just viseted a nice photography site:
http://www.burnett.com.br/
They do something nice with thier photo slide – fading in twice, once into a blurry image and then into focus. It’s a wonderful effect. I was wandering whether you could add this feature to your javascript version. is it possible at all?
Greets