Question

Okay this is frustrating me to no end. I recently coded a page in JS for a buddy of mine who wants to display wedding pictures to a family to see which ones they’d like to purchase.

I used a for loop to count 1-904:

for (beginnum=1;beginnum<=904;beginnum++) { yada yada...

Then, I used adobe bridge to rename the camera files to be 1-904 and their thumbnails (1-904 + _thumb) and used the loop number to display 904 image spaces, and the correctly numbered picture:

[note:using <) in place of the usual open tag since the site wont display it]

IE…

document.write(beginnum + ":" + "<img src='pictures" + beginnum + "_thumb.jpg' />");

Opera…

document.write("<div>" + beginnum + ":" + "<img src='pictures" + beginnum + "_thumb.jpg' /></div>")

This all works perfectly in IE and Opera (with external CSS modifying the div to not line break).

I then created a function to call up the large version of the picture when clicked on.

The problem is, when I try and nest this function into the JavaScript generated HTML I would need four delimiters. I’ve heard ”’ or “”” or the &+numeric; work in some cases as a third and fourth but I can’t seem to get them to work… where I run into a problem is here…

[note:again using <) for open tag]

document.write("<a href='javascript:void(0); onClick=

Since I’ve already used up ” and ‘ I now have nothing left to use to call the function when a picture is clicked.

I usually don’t ask for any help, but this time I can’t think of anything else that should work… I assume maybe using JS to generate the HTML leaves me with ONLY 2 delimiters that will be recognized by the browser but I am not sure, anyone know for sure? Any fixes anyone can think of?

Thanks,
~Z~

Answer 1

Maybe this will work

for (i=0; i<904;i++)
{
    document.write("<div class=\"DivClassName\"><img src=\"pictures_" + i + "thumb.jpg\" onclick=\"OpenAWindowAndDisplayTheBigPhoto(" + i + ")\"></div>");
}

Another approach: Suppose you put everything inside a <DIV id="mainDIV">

var mainDIV = document.getElementByID("mainDIV");
var div, img, a;
for (i=0; i<904; i++)
{
   div = document.createElement("DIV");
   div.className = "DivClassName";
   a = document.createElement("A");
   a.href = "javascript:void(0)";
   a.onclick = function() {OpenAWindowAndDisplayTheBigPhoto(i);};
   img = document.createElement("IMG");
   img.src = "pictures_" + i + "thumb.jpg";
   mainDIV.appendChild(div);
   div.appendChild(a);
   a.appendChild(img);   
};