Discuss: JavaScript Image Gallery

by Jeremy Keith

21 thanks

Really nice website and even comments are great and helpful !

posted at 03:44 am on February 9, 2004 by B:o:b

nicely written, but where php would be a better choice (for galleries for example) i would not use js (actually i quit using it all together i have enough cross browser hacks for my css alone!). But, nice site (adacio)Jeremy and good article.

posted at 08:23 am on February 9, 2004 by s26

23 To all the haters....

To all the haters out there (read: Dante-Cubed and APA), please lighten up. This may not be the most complex/extendable script ever written, but it will be very useful to a large portion of ALA’s readership. Remember that these articles are written “For people who make websites,” not just advanced JavaScript programmers who make websites. If you can’t learn anything from this particular article, bite your tongue and move on to a different site. There is plenty of great stuff on O’Reilly Net and SitePoint.

Nice article Jeremy. Cheers.

posted at 11:38 am on February 9, 2004 by James Craig

24 Show me some love

That’s right Dante-Cubed and APA…

Here is a simple solution to help you get over that I’m-mad-at-the-world-and-I’m-going-to-take-it-out-on-(insert forum name here).

If you don’t like it, don’t read it. Resist the urge to type in that URL. Delete your bookmark. Take a deep breath. It’s not worth it. No one’s going to read past that first flame-esque initial angry line you wrote.

posted at 12:42 pm on February 9, 2004 by paperwings

25 Re: Alternative?

Vaire, your script works well. They only difference between yours and mine is the matter of backwards compatibility.

By having the “onlcick” event handler within hyperlink (rather than on the image) and having JavaScript cancel the act of following the link, the list will work for people without JavaScript. So you might want to adjust your script rather than replace it entirely.

On the other hand, your script shows how this idea can be applied to thumbnails, not just text links. This is pretty much exactly what Manuel was talking about here:

http://www.alistapart.com/discuss/imagegallery/1/#c6528

William, I can’t seem to reproduce the error you’re having with IE5.5. Is anybody else seeing the problem described here?
http://www.alistapart.com/discuss/imagegallery/2/#c6576

s26, I agree that a server-side solution is nearly always the way to go for things like this but, as is made clear at the start of the article, this intended as a kind of “5 minute meal” for when you’ve got some pictures you’ve just got to get online quickly.

posted at 05:00 pm on February 9, 2004 by Jeremy Keith

26 Forward/Next

This would probably involve considerable work, but what would relally make this script even better would be the addition of simple last picture/next picture buttons. Unfortunately, this would probably involve feeding all of these URLs into an array. Anyone know any easier way to do it without modifying the code as much?

posted at 09:10 pm on February 9, 2004 by Leo

27 JS vs PHP

While I agree that usually a server-side script might be better for something like this, it can help a lot to use JS if you are with one of those cheap hosting companies that will suspend your account if you exceed some unspecified level of resource use. In a case like that, the more you can put off onto the client the better.

BTW, I love this site, ever since I ran across it about six months ago when I decided to bit the bullet and start working with CSS. A link from www.glish.com led me here. Google led me to glish. I printed out several articles that I use for my evening bedtime reading. Great stuff!

posted at 03:08 am on February 10, 2004 by Sottwell

28 I'm getting tired of this...

Normally I’m very polite and reserved when it comes to differing opinions but recently the posts we’ve had on ALA discussions have got me pi**ed off.

In a nutshell: STOP MOANING IF YOU DON’T LIKE AN ARTICLE!!

Everybody who frequents this site are at different levels of expertise in our profession so it’s bloody obvious that an article is going to have different merit to different people. If it wasn’t useful to you, then fine but I’m sure it was to other people. STOP BITCHING!!

So OK, a JS-driven Image Gallery isn’t exactly cutting-edge web content, but the concepts and approach used is a good demonstration of crisp, clean DOM scripting and THAT is where I found the article to be useful.

So instead of moaning “oh, this article is shit because the title says ‘image gallery’” try to realise that it’s the techniques that some people find useful, not the end result.

</rant>

Oh and if you really think ALA is going down hill because of “kiddie JS articles” or “CSS hack worship” then why not politely contact ALA with article suggestions (you never know, they may write one or know of somebody who can provide) or not heaven-forbid put your money where your mouth is and write an article of your own.

posted at 05:28 am on February 10, 2004 by Shakey

29 Does everyone want this to create a cat gallery? :

johnboat: I wanted to do something very similar to what you’re describing a couple of years ago. While my solution is not really the most elegant, it does work:
http://www.hooloovoo.net/cats/
Feel free to re-use the code, (but not the images/content mkay?) The js file can be found here:
http://www.hooloovoo.net/js/catwindow.js

sorry it’s not well commented.

Basically I used JS to write the html code to display the page on the fly as opposed to using a placeholder image.

posted at 02:03 pm on February 10, 2004 by Hooloovoo