Nearly there with the ‘permalink-slideshow’
Well at the risk of too many entries on this permalink-slideshow, here goes another. I have always wanted (since i lost my fear of JavaScript) something that i can cut my teeth on so to speak. A medium-ly complex project to do in JavaScript that I can have fun playing around with, and more importantly to learn from. I think I may have found it.
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.
The images now start at 1 not 0 because it made more sense when reading it, I also put in 'page x of x' at the bottom of the image and changed the document.title so that the back history remains understandable, quick fixes but quite a nice effect.
With regards to the image id's not matching the location.hash to avoid jumping, it really was quite a problem so I changed to my initial idea of 'position:absolute; top:0;' with the padding on the image to position it instead, though depending on how it will be used eventually the jump may be unavoidable. Oh well.
I still need to implement the funky image pre-loading trick as it hangs while you wait for the images to load, but other than that - and the hideous browser incompatibilities - I'm relatively happy with it. Tomorrow I show it to the people at work for real, if they don't like it that doesn't really matter as I have had a lot of fun making it!
Current working version:
UPDATE [4th Apr 06]: new demo (see comments for list of changes)
Nat,
Jeremy Dunck - February 24th, 2006 at 6:10 amQuite an impressive “beginner” showing. I’m glad you’re over your fear, and look forward to more geeky goodness in the future.
If there’s a site you use and don’t like, I encourage you to check out Greasemonkey. I’ll help get you started. ;)
Aww that’s really sweet, thanks Jeremy :) I definately plan on looking into Greasemonkey soon!
natbat - February 24th, 2006 at 5:29 pmKeeps getting better, this.
sil - February 24th, 2006 at 7:43 pmOne thing: there are quite a few images, and the page just doesn’t say anything while they’re all loading. Perhaps a “loading slideshow” bit of text, added by script at the beginning of the page load (when you hide the images) and removed by the onload handler that starts up the slideshow, would make it clearer that something is actually happening?
Thats a good idea, I had planned to do something with an attempt to preload the images, I’ll see what I can do the next time I work on it, parents down this weekend though so no updates for a bit :)
natbat - February 25th, 2006 at 6:31 pmI think it would be a shame to lose the ability to look at the pictures before they have all loaded. As long as you don’t set the image size in the html, you can put something that says ‘Loading’ behind where they will be displayed. If the user tries to view an image which hasn’t loaded, they will only see the ‘Loading’ message, until the image loads and obscures it.
If you display the images in a parent element, you could get a ‘Loading’ background image for it (might be a pain to get it to load first), or you could probably get a text-only div behind it with a z-index.
One other small thing that’s probably on your list anyway; have the javascript add the navLinks paragraph, so it makes sense for people with js disabled.
You could also get javascript to add a little scrolling thumbnail browser at the bottom, that would be nice :)
radiac - February 25th, 2006 at 7:08 pmThanks Richard, adding the links by javascript is on my todo list, currently the stylesheet that is already there puts ‘display:none’ on the links and is over-ridden by the stylesheet called by javascript, but it would be neater to have them load with the javascript.
With regards to the image loading thing, I was hoping that I could pre-load them somehow and display the requested one instantly, though if that doesnt work I might have a ‘loading image’ as a backup.
natbat - February 26th, 2006 at 10:35 amI found that Firefox seems to throw an error on the fade out when you attempt to set a value of opacity lower than 0.1.
A quick fix was to add another boundary test at the begining of setOpacity():
opacity = (opacity
Drew - March 26th, 2006 at 5:56 pmErp .. that didn’t come out right at all.
Drew - March 26th, 2006 at 5:58 pmopacity = (opacity < 0.1) ? 0 : opacity;Updated and fixed quite a bit now ….
Demo v0.30 The HTML is unchanged from last time.
Javascript see list of changes below.
Initial Stylesheet is unchanged.
Imported stylesheet is unchanged.
Updates include:
Added ability for different links per image.
natbat - April 4th, 2006 at 9:53 pmFixed the major bug in Safari.
Fixed memory leak in IE and old FF versions.
Automated the document title and made other starts to making less app specific, such as testing for pages and links needed.
Stoped the jump to element by dynamically changing id's.
Now works with more than one image (when the other image is not part of the slideshow) on the page.
The links to code.natbat.net seem to be broken?
Michael - August 30th, 2006 at 8:41 pmYep, sorry about that, my old hosting company went out of business, im trying to fix it :/
natbat - September 5th, 2006 at 3:40 pm