aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Eric, need help modifying the image gallery in your Visual book Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Soft Skills this week in the Jobs Discussion forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Eric, need help modifying the image gallery in your Visual book" Watch "Eric, need help modifying the image gallery in your Visual book" New topic
Author

Eric, need help modifying the image gallery in your Visual book

John Walbaum
Greenhorn

Joined: Dec 19, 2005
Posts: 7
You have two nested loops above (i and j) that, using document.write, display the images assigned by the Javascript function below, which reads:

var currentImg = -1;
function changeImages(dir){
if(dir==-1) {
currentImg-=numDisplay*2;
if(currentImg<0 && dir)currentImg = theImg.length + currentImg;
}
for(i=0;i<numDisplay;i++){
currentImg++;
if(currentImg >= theImg.length)currentImg=0;
document.getElementById("Img" + i).src = theImg[currentImg][0];
document.getElementById("Img" + i).alt = theImg[currentImg][1];
document.getElementById("Img_text" + i).innerHTML = theImg[currentImg][1];


}
}


In the section above this code (where the images are displayed), I would like to determine the number of each image. The variable 'count' only counts for the rows & cols, then resets for the next image grouping. How can I either (a) assign a number to each image in the array, or (b) pass the number 'currentImg' to the for i/for j loops above, such that clicking the direction updates this number automatically?

This is very vexing. Thanks!
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I am not sure what you are asking. You would like to display a number on the page that links to the image index in the array? Where is this number supossed to be changed?

Eric
John Walbaum
Greenhorn

Joined: Dec 19, 2005
Posts: 7
My thumbnail gallery is linked to new html pages, so when the user clicks on the thumbnail, the new page opens up. I have earlier defined these pages by number (page 1, page 2, page 3).

Here is the code in my page that opens the new window:

function newWindow(itemNo) {

explWindow =
window.open("page"+itemNo+".html","Name","width=820,height=750,toolbar=no,location=yes,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes")

explWindow.focus()

}

So what I want to do is pass the number of the item in the array (which I have numbered Item 1, Item 2, etc.) to function newWindow().

The trouble I am having is that in the array, the count never exceeds the number of rows time the number of columns. My array obviously has more than one page worth of images. Here is your code, just to refresh your memory. (I have added the table tags and the href.):

count = 0;
var image_num = 0;
for(i=0;i<numRows;i++){
document.write("<table style='position:relative; top:25px; left:100px;'><div> <tr>");
for(j=0;j<numCols;j++){
document.write("<td><span style='display:inline; width:" + (imgW+ 5) + "px; background:#D0D0D0; text-align:center;'>");
image_num = count +1;
document.write('<span><a href="javascript:newWindow('+ image_num + ')"><img id="Img' + count + '" width="'+ imgW +'" height="'+imgH +'" alt="'+ count + ' </td>"></a></span><br>');
document.write('<span id="Img_text' + count + '">asdf</span>');
document.write("</span></td>");
count++;
}
document.write("</tr></div>");
document.write("</table><br/>");

}

I try to use image_num to call the function, but after the first time the user flips forward or back, the count is irrelevant; it still just counts to six. I know that the number of the array is found in the document object somewhere, but I can't figure out how to reference it globally.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
With a quick glance, we can remove the links and instead add an event handler to the image:

document.getElementById("Img" + i).onclick = new Function("newWindow(" + currentImg + ")";

You can add a css style to the images to get the pointer (cursor:p ointer;) so the user knows they can click on it.

I think that would solve your problem.

Eric
[ December 19, 2005: Message edited by: Eric Pascarello ]
John Walbaum
Greenhorn

Joined: Dec 19, 2005
Posts: 7
Eric,

Many thanks. I am on the right track. I added the following line in the function changeimage: (It is the last line of the function.)

document.getElementById("Img" + i).onKlick = newWindow(currentImg);

This, unfortunately, has the effect of making the back and next buttons "hot" and the images are still "cold," i.e. unclickable.

Where should I insert the line to tweak this?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
I am rather busy today, I will try to work on it this afternoon.

Eric
John Walbaum
Greenhorn

Joined: Dec 19, 2005
Posts: 7
Thanks!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Eric, need help modifying the image gallery in your Visual book