Menu
Hi
I’m trying to create a pop-up dom 1 compliant script based heavily on an example in “Dom Scripting” by Jeremy Keith. The Javascript is in an external file. There are thumbnails on a main page that call the javascript function and pass the image url and some text to the Javascript file. I’d like the script to open a new window containing the larger image and the image title. The script was originaly written to display the larger image in the same page as the thumbnails but I’d like the larger image to open in a new window. When I test the script the new window opens but it doesn’t insert the target image. However, the target image replaces the page that triggers the script. I know this is something very basic I’m missing…. please help!!! – I’m pretty new to Javascript!
Here’s the full Javascript file’s code (fully commented):
[CODE]/* Checks that the browser understands the DOM commands – stops it from going any further if it doesn’t*/
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(“thumbs”)) return false;
/* create variable names to make writing the script simpler later on*/
var gallery = document.getElementById(“thumbs”);
var links = gallery.getElementsByTagName(“a”);
/* loops through all the a hrefs within the table that has “thumbs” as its ID */
/* this for loop will continue for as long as the value of i is less than the total of links */
for ( var i=0; i < links.length; i++){
/* Change the way the onclick behaviour works */
links[i].onclick = function(){
showPic(this);
}
}
}
/* opens the new window and inserts the image and descriptive text */
function showPic(whichpic){
var newWin = window.open(‘photos.htm’,’largePhotos’,’width=520,height=400′);
/* declare variable names to make the script easier to write later on */
/* obtain path to the image from the link */
var source = whichpic.getAttribute(“href”);
/* get to the destination image (in the new window) */
var placeholder = largePhotos.getElementById(“placeholder”);
/* set the new image source */
placeholder.setAttribute(“src”,source);
/* obtain descriptive text from the thumbnail link */
var text = whichpic.getAttribute(“title”);
var description = document.getElementById(“description”);
description.firstChild.nodeValue = text;
/* this line tells the browser to act as if the link wasn’t clicked */
return false;
}
/* ensures that the code will only operate when the page is fully loaded */
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);