Discuss: JavaScript Image Gallery
by Jeremy Keith
- Editorial Comments
2 Web developers do it unobtrusively
Surely it would be easier to just include an “image gallery” JavaScript link in the header and that’s it? Add a line like “[removed][removed]” to the header, and then put this in jsimggal.js:
function showimg(e) {
if (window.event)
l = window.event.srcElement;
else
l = e.target;
document.getElementById(‘desc’).firstChild.nodeValue =
l.getAttribute(‘title’);
document.getElementById(‘placeholder’).src = l.href;
if (window.event) {
window.event.cancelBubble = true;
} else {
e.stopPropagation();
}
return false;
}
function make_img_gal() {
if (!document.getElementById || !document.getElementsByTagName)
return;
var lnks = document.getElementsByTagName(‘a’);
for (var i=0;i<lnks.length;i++) {
// strip the extension off the link and see if it’s an image
// this is cheating, really.
ext = lnks[i].href.substr(lnks[i].href.lastIndexOf(’.’)+1).toLowerCase();
if (ext 'jpg' || ext ‘png’ || ext == ‘gif’) { // fill inothers
lnks[i]
posted at 05:55 am on February 6, 2004 by sil
3 Slow connections and resized images?
Hi Jeremy,
Goed clear article, especially with the degrading trick.
I’ve done somewhat the same, but I’ve stumbled upon a not-so-good-looking asset of this method. What if you’ve got a it larger picture, but with different dimensions then it’s predecessor. At some point the image would have to be resized, and preferable when the image is totally loaded, so no images are distorted.
Have you looked into checking when an image is totally loaded?
Maybe this is too farfetched for an album with smaller images that load fast and all have the same dimensions.
My method is MSIE5+ only unfortunately, but if you use this browser you can check out what I mean at:
http://www.trustphotosite.com/robert/TackFoerMaten/ (wait for the thumbnails to be loaded before you can see the effect in action)
Thank you for you explanation anyway.
Robert
posted at 06:04 am on February 6, 2004 by Robert
4 Listen to your elders
PPK told ALA to stop publishing JS articles. I disagree. I think they should stop publishing articles all together.
posted at 09:12 am on February 6, 2004 by Dante-Cubed
5 Thumbnails, event capturing and image sizes
Manuel, I agree that thumbnails would be nice. There’s nothing to stop you using thumbnail images instead of text in the links though. The script relies on the “href” and “title” attributes to work – what goes between the opening and closing <a> tags shouldn’t make any difference.
Sil, you’re quite right: using an external file combined with event capturing would be the most unobtrusive way to get the same effect. Unfortunately, a side-effect would be that it would act on every linked image on the page, not just the ones in the list.
Robert, you’re right about the varying sizes of the images. This script works best with images that are roughly within the same range of sizes. If the images vary wildly in size, there can be unintended layout consequences.
posted at 09:53 am on February 6, 2004 by Jeremy Keith
6 within a named div?
Without knowing much about Javascript, would it be possible to use Sil’s code with a modifier that specifies all links within a named div?
I do appreciate the contingency design in the ALA code tho. It’s a great solution with thoughtful attention to structure, well done.
posted at 10:04 am on February 6, 2004 by dave rau
7 IE4 support
1. Add this:
if (document.all) {
document.getElementById = document.all;
}
and the thing will work in IE4 too.
2. It is possible to find out where is the link on click event. Using obj.parentElement / obj[removed]
Or you can check the href (whetet contains the gallery string and it is .gif or .jpg)
posted at 11:29 am on February 6, 2004 by Janos Horvath
8 ALA ? more like APA.
or ‘Another Pointless Artical’
So kiddy script DOM tricks are the new black?
I have been writing code like this and that described in http://www.alistapart.com/articles/footers for three years and consistent browser support is still bad for DOM and now I’m bored of it.
Articals like this make me think that we have come back to cross browser hacks to make things work. Have we really moved on from NS4 ? Seems not.
How about an artical in writing a ticker tape message scoll within a browser status bar – that would be really cool.
posted at 05:07 am on February 7, 2004 by APA
9 Just right for me...
While it (apparently) may not be as full of a solution as some people would like, and (apparently) doesn’t do every feature that others would like, real life examples of simple JavaScript use like this are exactly what I need to pick up a bit of coding skills (and, probably, investigate further when I need to tweak it a bit).
There are probably quite a few (similar, but quieter folk) out there like me that just got inspired to dig a bit deeper into the scripting world.
posted at 06:52 am on February 7, 2004 by Dave Bug
10 re: APA
>I have been writing code like this and that described in http://www.alistapart.com/articles/footers for three years and consistent browser support is still bad for DOM and now I’m bored of it.
May we see the articles you’ve written?
posted at 07:11 am on February 7, 2004 by sanchez
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
1 thumbnails
Thanks for sharing, Jeremy. A simple and smooth technique, useful for quickposting pictures.
One thing though. Honestly, I’d expect an “image gallery” to have… thumbnails.
posted at 05:44 am on February 6, 2004 by manuel razzari