Ian Bicking: the old part of his blog

Javascript Slideshow

As a lesson in Javascript for myself, I wrote a slideshow application. After fiddling with it quite a bit, I think it's actually a good bit of code, not just "working". Most Javascript seems like it's just "working". Anyway, it uses the document as its data source (instead of Javascript literals), is object-oriented (you can have more than one slideshow on a page), and can be customized. If viewcvs doesn't break (stupid permission issues) you can view it at svn://colorstudy.com/home/ianb/slideshow; an open issue is how to have permalinks within the slideshow. Javascript doesn't, I think, have access to GET variables or anything, and I'm trying to avoid a server-side component. Maybe the fragment identifier, somehow?

Anyway, here's my first slideshow: my sister and I painted my my girlfriend Emily's car.

The before picture. Apparently this year and model had a bad paint job.
Its last time in its native environment. Though Chicago has a large number of candidates for art cars -- i.e., crappy, ugly, and with no resale value -- there aren't that many. They were a lot more popular in Minneapolis.
This is my sister. No pictures of me, because there's never pictures of me, because I'm the one who takes the pictures.

We're planning on doing Monica's car too, by doing decoupage with newspaper. It should be spiffy. I just hope it doesn't start on fire.

Here's the handsome car.
And again, in front of our apartment.
Notice the fine detail ;) The fuzzy edges from the spraypaint have grown on us. We still have to fix up a few scratches and apply a clear layer, and probably some car polish, then it'll be real pretty.
Created 04 Aug '04
Modified 14 Dec '04


JavaScript actually does have access to GET variables:


The location object has two properties which might interest you:

location.search is the part of the current URL beginning with a question mark. Should be easy to parse

location.hash is the part of the current URL beginning with a hash mark (#), which denotes an anchor name in the document
# Will McCutchen

In my build of Mozilla 1.6, the prev/next buttons are floating all the way to the sides of the browser window -- the next button to the right of your blogroll, the prev button sticking out a bit to the left of the red border around your main blog div.

# Jacob

Yeah, that button... it worked fine when the slideshow has its own window, but with the sidebar it's causing problems. I have the CSS set to position: absolute; right: 5px;. I'm not sure how to indicate that it should hang out on the right side of its container. float: right, maybe, but I've had bad luck with floats and consistent rendering on different browsers.
# Ian Bicking

IE doubles side margins on floats. Generally, if you float, say, a div, you should set display to 'inline':

div#bar {
float: right;
display: inline;

...which will fix the right margin for IE without changing Moz, Opera, et al.

# Robert Brewer

In IE 6 (or 6.0.2800.1106.xpsp2.030422-1633, to be precise), I only get a list of hyperlinks to JPEG images (and a bunch of javascript errors). Is that what you meant with "not just working" ? ;-)
# Fredrik

On osx, using either Safari or OmniWeb (both use webkit), there is no slide show, just some descriptive text links to jpeg files.
# Andrew

Damn you IE! It was working, and then I just tweaked it a little bit, and it broke. Part of this is Mozilla's fault, as it seems much more lenient on syntax and some other rules, so it works where IE breaks. But after fixing that, the stupid buttons aren't working. Stupid IE! I hate you IE!

I also am finding the event model to be a pain in the ass. Javascript doesn't have bound methods, so you can't register a method as a callback for an event. Well, you can, but then this suddenly becomes the window. So I have to create a string that represents the object (an object which otherwise could have been anonymous). But IE doesn't like it either way. Arr! I was feeling fairly happy with Javascript for a while there.
# Ian Bicking

Floats don't seem to work correctly on Mozilla (haven't tested IE). The prev button stacks ontop of the next button. All that after struggling to apply the float style, because you can't do obj.style.float = 'right'; instead you have to do someOtherObject.innerHTML = '[a style="float: right"][/a]' (this comment system tends to mess up angle brackets, so I replaced those with square brackets). Floats seem really unreliable to me. And I still have to work on the events.
# Ian Bicking

float is a reserved word in JavaScript. -> use CSSfloat instead.

# SnowCrash

float is a reserved word in JavaScript. -> use CSSfloat instead.
# SnowCrash

to bad I can't edit my posting:

It's style.cssFloat

sorry for double posting.

# SnowCrash

Neat paint job! I have a car of similar age and appearance. If you and your sister happen to be in Sydney with a spare day on your hands... ;)
# Alan Green

I'm currently painting my bathroom .. maybe i don't choose the same design / colors :)

Bye Bye Ian
# Jkx

I think you need run svnadmin recover:

[email protected]:~$ svn co svn://colorstudy.com/home/ianb/slideshow slideshow
svn: Berkeley DB error while opening environment for filesystem /var/lib/subversion/repository/db:
DB_RUNRECOVERY: Fatal error, run database recovery
# Faried Nawaz

On Firefox 0.9.2 and Mozilla 1.7.1, the "prev" button reloads the page, in addition to cycling the image. I'm not sure why it would do that, but I suspect that it's because you're using the a tag's onclick property over an href javascript link. Try href="javascript:" link instead, even though onclick is abstractly more elegant. Another option might be to use the button tag, although that has issues in IE.

Sweet paint job.
# Previous Button Reloads Page

Yeah, I tried the href="javascript:..." thing too. But I couldn't return false (some stupid error about not being able to return false in that context), so it kept loading the return value of the function into the window (even if it's false). I'm so fucking pissed at Javascript over this crap.
# Ian Bicking