Fixing a few JavaScript slideshow loose ends
As pointed out by Jeremy, my linkable slideshow (v2) needed some work to fix the load order of the page without altering the ‘unobtrusiveness’ of its behaviour.
I opted for Jeremy’s second method; not waiting for the page to load, instead hiding the images and sorting things out later on. Since the slideshow already relied on importing the CSS with JavaScript I simply moved this outside of the function called onload.
To ensure nothing untoward happens with crazy partial loaded DOM editing I encased the addition of the CSS into a try / catch. On fail of inserting the link rel into the page, the function then simply just calls itself again.
So in the root of the JavaScript file:
...
function setCSS(css) {
try {
// append stylesheet to alter
document.getElementsByTagName("head")[0].appendChild(css);
} catch (e) {
setTimeout(function(){setCSS(css)}, 100);
}
}
// on load
addEvent(window, 'load', setupPage);
// create CSS element to set up the page
var css = document.createElement("link");
css.setAttribute("href","style3.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
// attempt to add the css and then keep trying till we do
setCSS(css);
The CSS then sets all the images except the first one (over-ridden in the JS) to have ‘visibility: hidden;’ and to be positioned absolute in the right place.
Other changes to this version include vague attempts to improve performance through clearing the setInterval() during the fade and resetting after, also through using ‘display: none’ as well as the visibility. This seamed to improve it slightly but nothing revolutionary, it always slows down after 7 or so images regardless of how long you leave between page load and moving to an image.
Image maps work right enough with the slideshow too now which is good, since this was part of the original specification. I also stopped the jumping due to the id’s of the image, I am not too pleased with the solution to this as it involves using a different hash fragment to the image id’s.
The jumping was due to the browser automatically moving to the top of the image with the id, using non-existent id’s stopped this problem but does sort of spoil the seamless effect. For example if i bookmark an image then turn off JavaScript that bookmark will no longer work. The only other solution I can think of to this issue is playing with z-indexes of the other page elements and having the image positioned absolute at the top of the page with padding down to the appropriate height.
This new version is available for your interest here:
I think perhaps you meant the Demo to be this:
http://code.natbat.co.uk/javascript/slideshow/index4.html
The current link is 404.
As far as the fake ID to avoid the jumping, if the pics are all the same size, the one (initial) jump is no bother. I was just referring to albums where you had to chase the nav links from picture to picture.
What’s the license on the code? Can I steal it?
Jeremy Dunck - February 23rd, 2006 at 2:28 amThanks Jeremy, I have updated the link now. I know that if the link is always in the same place the first jump isn’t a huge usability issue, at the moment I positioned the links absolute so regardless of the image size they are currently in the same place.
What I was worried about was the aesthetics of it jumping, it is quite nice to click the next previous links and for it not to jump down
As for the licensing, if it were completely up to me the code would be under an open source license, most likely one from the creative commons batch. Though considering we may use it at work, I don’t know if this complicates matters … ill have to get back to you on that one :)
natbat - February 23rd, 2006 at 3:08 pmVery nice!
One thing that occurs to me is that it’s not immediately obvious where you are in the slideshow; some text saying ‘1 of 9′ might help.
Also noticed a small bug - something seems to go wrong if you press next/previous, and then press the opposite direction while the transition is playing.
radiac - February 23rd, 2006 at 4:02 pmErk! you are right, that is quite a bug! maybe I could queue up the next requested image and not try fading until the last transition is over … hmm. Neat idea on the number idea, I hadn’t thought of that. :)
natbat - February 23rd, 2006 at 7:31 pm[...] This evening I have had some fun playing with performance, which incidentally seams to work fine now, there appeared to be a problem with the images stacking on top of each other with ‘visibility: hidden’ and a not-quite-opaque opacity. Using ‘display: none’ in addition seams to sort things out just fine. I also sorted out the weird forward / back problem pointed out by Richard by not letting the fade start unless it is not already running, unfortunately another global variable but unavoidable in this case I think. [...]
Natalie Downe » Nearly there with the ‘permalink-slideshow’ - February 24th, 2006 at 2:34 amThis is brilliant, I especially love the fact that I can still use the back button. I know “this is gr8!” comments aren’t very useful, but it’s nice to know your hard work’s appreciated, right? :)
Phil Wilson - March 8th, 2006 at 12:41 pmThanks Phil! it is always nice to get a “this is gr8!” comment! :) glad you like it!
natbat - March 8th, 2006 at 2:17 pm