Discuss: JavaScript Image Gallery

by Jeremy Keith

11 nice article, one question

This is great article but I was just wondering if it is possible to target another page that contains the placeholder image. There are times for one reason or another I want the image to appear on a separate page, but do not want to create a page for every image (and also want something nicer than just viewing the image on the server). I am not experienced with Javascript so I may be asking for something that is not possible. Thanks for the great articles ALA.

posted at 09:59 am on February 7, 2004 by johnboat

12 thanks

As someone who isn’t particularly interested in being a javascript expert (or snob, as some people seem to be), I appreciate when others provide quick and useful solutions to my design needs. I know I’ll be using this script and am grateful for the time I’ve saved not having to dig through thousands of scripts that may or may not work or ones I need to modify with my limited knowledge. Besides getting a handy script, I also learned a little bit about javascript so thanks for the gift!

posted at 02:06 pm on February 7, 2004 by Lauri Mueller

13 Targeting another window

You’re welcome, Lauri. I hope the script will come in useful.

Johnboat, I believe it’s entirely possible to have the placeholder image in another page as long as that page has a name that we can refer to. So if it’s a window that has been popped up using JavaScript, the important thing is to use a variable when you create the window.

Let’s say you popped up your new window like this:

window.open(‘picturebox.html’,‘mywin’, ‘toolbar=no, scrollbars=no, resizable=no, menubar=no, status=no, directories=no, location=no, width=360, height=280’);

What you need to do is use a variable. Let’s call it “mynewwindow”:

mynewindow = window.open(‘picturebox.html’,‘mywin’, ‘toolbar=no, scrollbars=no, resizable=no, menubar=no, status=no, directories=no, location=no, width=360, height=280’);

Now all we need to do is adjust our original script slightly.
Where it used to say:

document.getElementById(‘placeholder’).src = whichpic.href;

…we could now say:

mynewwindow.document.getElementById(‘placeholder’).src = whichpic.href;

and where it used to say:

document.getElementById(‘desc’).childNodes⁰.nodeValue = whichpic.title;

…now we say:

mynewwindow.document.getElementById(‘desc’).childNodes⁰.nodeValue = whichpic.title;

Hope that helps.

posted at 02:34 pm on February 7, 2004 by Jeremy Keith

14 Thanks Jeremy

Thanks for the great article & the help. I will give your suggestion a try. Take care.

posted at 02:40 pm on February 7, 2004 by johnboat

15 Dante's DOM API

Hey kids! Tired of incompatible DOMs? I saw a post earlier that used a make-shift prototype for IE4:
document.getElementById = document.all
That’s incorrect. I can help.
Here’s my DOM API that you can use:
//Powered by DCScript
function DOMCall(name) {
if (document.layers)
return document.layers[name];
else if (document.all)
return document.all[name];
else if (document.getElementById)
return document.getElementById(name);
}
Call it like so:
DOMCall(“object”).style.color=“blue”;
Where “object” is the object’s id.
Feel free to use it.
—Dante-Cubed

posted at 04:38 pm on February 7, 2004 by Dante-Cubed

16 Maybe not use lists for UI?

While the deprecation into older browsers is a very nice aspect of this piece, it seems to still lack something, being just a bit too basic. Also, after you build up more than a few items, the list as a way to navigate the photos is simply not going to work.

I would suggest packaging up this technique, and using the techniques from CSS Sliding Doors, retool the list into a more slideshow or photoblog presentation. Then add the “Next” and “Prev” style actions and THEN you’d have a juicy article around making a standards compliant photo browser that also deprecates into media that can’t deal with the style sheets.

Just my two cents.

posted at 08:29 pm on February 7, 2004 by Andrei Herasimchuk

17 javascript error

This javascript slideshow doesn’t work properly in IE 5.5: (1)On link click get error message null or void. (2)When the image displays, the links disappear!

posted at 11:52 pm on February 7, 2004 by William Moake

18 RE: Targeting another window

This is probably a dumb question but in regards to the variable “mynewwindow” from Jeremy’s “Targeting another window” post, where do I place it? I assumed (and this is probably my mistake) I would place it at the begining of the javascript. I also assumed the function would still be called in the same manner as the article describes. I tried this to no avail.

As I mentioned in an earlier post, I am not familar with javascript so I apologize for what is probably an elementary question. Thanks again for the article.

posted at 10:54 am on February 8, 2004 by johnboat