[skyhigh007]

I forgot to mention, would it work if you put those 1,2,3 under the thumbnail list instead of at the top and center it in the middle of the page with out the word "page" ?

[tomdkat]

Of course!

EDIT: I suppose you actually wanna see that too...

Peace...

[skyhigh007]

Yea, SHOW ME!

[tomdkat]

Tomorrow.

It's actually quite simple to code up and the hiding/unhiding of the DIVs is easy enough to almost be considered trivial. The way I coded the page I posted screenshots of above, it will literally be trivial for me to move the navigation and center it, as you requested.

You won't believe how simple the HTML and CSS is.
You won't believe how simple the page is.
You just won't believe it!

Peace...

[skyhigh007]

If its so simple then why I can't get it done ? Hm....

[tomdkat]

I don't know what you're struggling with regarding the new gallery but the one you worked on previously was doing some fairly sophisticated stuff.

Peace...

[skyhigh007]

yea, it was a bit difficult for me. but now I just want my gallery to be the same as the demo link i send (hide and show DIVs) Maybe I still dont get the concept of that show and hide divs

[tomdkat]

Ok, I moved the gallery "navigation" section, as you requested, and added a color coding for the page of the gallery being viewed.

Peace...

[skyhigh007]

Wow! NICE! You use unoder list within unorder list?

[tomdkat]

Nope. I did use unordered lists, however. I did something similar to the other gallery you sent the link to. I have each set of thumbnails in an unordered list and all THREE are defined in the same HTML file. Then, I hide/unhide them as you click the gallery "page" numbers. When you first view the gallery, the first "page" is unhidden, of course.

Nested unordered lists aren't needed given the hide/unhide technique being used.

Peace...

[skyhigh007]

Ok, so the thumnails are in a div which are the unorder lists, the place for display a larger image is in a div, and the page(1,2,3) are in a div. Now, Im stuck onClick for the thumbnails.

[tomdkat]

Originally Posted by skyhigh007

Now, Im stuck onClick for the thumbnails.

How so? That code shouldn't change from before. Why not? Because you're changing the location of the large image and that element can be changed regardless of where it's located and regardless of it being in a DIV or a table cell, etc.

The same goes for the border around the thumbnails (or however else you're identifying the selected thumbnail). You're operating on the thumbnail elements individually so none of that logic should change either. What will be new is how to hide/unhide the thumbnails as they change logical gallery pages.

Peace...

[skyhigh007]

It works for page 1 and 2, but it does not work for page 3 when you click on the thumbnail and the larger image wont come up

[tomdkat]

Then, you must have broken something.

I don't have the page I coded in front of me but I believe this is the JavaScript I used and it works on all three of my pages:

var oldThumb=null;

function swapImg(newImg,thumbnail) {
document.getElementById('large-img').src=newImg;

if (oldThumb != null) {
   oldThumb.style.border='none';
}

thumbnail.style.border='1px solid red';
oldThumb=thumbnail;
}

That code should look familiar since I believe I posted it on previous pages of this thread.

If you coded your new gallery correctly, the JavaScript you previously wrote should still work.

Peace...

[skyhigh007]

Nevermind, I found the error. Two of the 3 lists had same id name thats why one of them doesn't come up. I guess I past it too fast.LOL