JavaScript photo album for my website...pleas e point me in the right direction.

[Joseph Ellis]

Hello all.

I have a family website that I have been maintaining for the past year
and a half or so. It includes a photo album that has grown quite
large. So far I've displayed the photo album using frames, with
thumbnails on the left side of the screen and full-size images
displayed on the right.

But now I'm sick of frames and I'd like to use javascript to make the
whole shebang cleaner and tighter. I'd like to use a table, basically
with a cell containing a "column" of thumbnails on the left, then a
cell to display the full-size photos on the right, similar in
appearance and functionality to the frames version. So far I've
gotten to the point that I can click on any thumbnail and display the
corresponding image in the cell on the right by changing the src
attribute.

The problem is that the thumbnail cell is often longer than the screen
is tall, and so must be scrolled. This, of course scrolls the
full-sized image as well.

Here's the problematic page:
http://www.texasellis.com/albumjs.htm

How can I display the full size image so that it stays vertically
centered in the window, regardless of the window being scrolled up or
down by the user?

I'd prefer not to use a popup window. I'd like the image to just sort
of 'float' on the screen at the desired position. I imagine this
being similar to those obnoxious advertisements I've seen on other
websites that float up and down as you scroll the web page up and
down, always staying in view.

Thanks for any help. I'm willing to do the research and learning on
my own...I just don't know where to look. Any suggestions or nudges
would be greatly appreciated.

Joseph

P.S. I'm moderately familiar with Perl. I intend to eventually use
Perl to generate the thumbnail pages on the fly. I just need to work
out the javascript bit first.

[TK]

Hi Joseph,

While you'll be sticking only up to simple table structure, you won't be
able to solve your problem, because TD tags cannot have own scroll bars.
Rather there are some options for you.

1. Go back to the frame version.
2. Minimize the number of thumbnail on a page. Then put "Next 10 photos"
button on somewhere on the left pane.
3. Make full-size photo area be a "floating box". Meaning that dynamically
re-position right-side photo-box with custom event handler for
window.onscroll and appropreate stylesheet setting.

I think the first option is the simplest way if you will generate your page
by server side application. However, if you never want to have frames, the
second option will be an acceptable detour. The third option, your page
might be more complicated than the frame version.

Well, what's going on the frame version? If you show me, I might be able to
speak more futher.

TK

[Joseph Ellis]

On Wed, 13 Aug 2003 12:06:54 +0900, "TK" <tk*******@hotm ail.com>
wrote:

Hi Joseph,

While you'll be sticking only up to simple table structure, you won't be
able to solve your problem, because TD tags cannot have own scroll bars.
Rather there are some options for you.

1. Go back to the frame version.
2. Minimize the number of thumbnail on a page. Then put "Next 10 photos"
button on somewhere on the left pane.
3. Make full-size photo area be a "floating box". Meaning that dynamically
re-position right-side photo-box with custom event handler for
window.onscrol l and appropreate stylesheet setting.
Thank you for your input! I'll consider those options - #3 seems to
be exactly what I was thinking of doing. I'd like to do the
javascript thing just for the sake of learning more about javascript,
really. I like complexity, in a simplistic sort of way. I've also
been wanting to learn more about CSS positioning (I assume that's what
you're referring to in option #3 above - ?). I have a book about it,
but haven't delved too deeply into it as of yet.
I think the first option is the simplest way if you will generate your page
by server side application. However, if you never want to have frames, the
second option will be an acceptable detour. The third option, your page
might be more complicated than the frame version.

Well, what's going on the frame version? If you show me, I might be able to
speak more futher.

TK

There's nothing necessarily wrong with the frames version, other than
the fact that I'm itching for a change and I don't much like frames
anyway. If you'd like to have a look, though, it's accessible from my
website at:

http://www.texasellis.com
(click on Photo Albums)

Or just go there directly:
http://www.texasellis.com/album.htm

Again, thank you so much for your input. I'll read up on
window.onscroll and related methods, and start reading more about CSS.
Can you suggest any other topics to research?

Thanks so much.
Joseph

[TK]

> http://www.texasellis.com

(click on Photo Albums)

Or just go there directly:
http://www.texasellis.com/album.htm
What a cool job you done! Well odered, unique design and small data. I like
it very much.

Again, thank you so much for your input. I'll read up on
window.onscroll and related methods, and start reading more about CSS.
Can you suggest any other topics to research?

Scripting with Stylesheet technique is kinda easy things for you. I do bet
it.
Also if you'd have any specific difficulties with them, I'll happy to help
you in this NG. It's my pleasure to help every nice daddy like you.

Good luck.
TK

[Joseph Ellis]

On Wed, 13 Aug 2003 19:55:41 +0900, "TK" <tk*******@hotm ail.com>
wrote:

http://www.texasellis.com
(click on Photo Albums)

Or just go there directly:
http://www.texasellis.com/album.htm
What a cool job you done! Well odered, unique design and small data. I like
it very much.

Again, thank you so much for your input. I'll read up on
window.onscroll and related methods, and start reading more about CSS.
Can you suggest any other topics to research?

Scripting with Stylesheet technique is kinda easy things for you. I do bet
it.
Also if you'd have any specific difficulties with them, I'll happy to help
you in this NG. It's my pleasure to help every nice daddy like you.

Hehe. Thanks so much. It's good to find a truly nice person in
usenet.

Good luck.
TK

I'll read up on those topics over the next few days, and if I do run
into any trouble, I'll send up the flag, so to speak.

Thanks again for your suggestions.

Have good days.
Joseph

[Nick]

Have a look at my site

www.continue.to/pics

I have just finished tweaking my javascript web album

you are welcom to copy the format

let me know if you need any assistance with setting yours up
email me nicklambuk'at'y ahoo.co.uk

obviously change the 'at' bit
"Joseph Ellis" <ja*******@hotm ail.com> wrote in message
news:am******** *************** *********@4ax.c om...

Hello all.

I have a family website that I have been maintaining for the past year
and a half or so. It includes a photo album that has grown quite
large. So far I've displayed the photo album using frames, with
thumbnails on the left side of the screen and full-size images
displayed on the right.

But now I'm sick of frames and I'd like to use javascript to make the
whole shebang cleaner and tighter. I'd like to use a table, basically
with a cell containing a "column" of thumbnails on the left, then a
cell to display the full-size photos on the right, similar in
appearance and functionality to the frames version. So far I've
gotten to the point that I can click on any thumbnail and display the
corresponding image in the cell on the right by changing the src
attribute.

The problem is that the thumbnail cell is often longer than the screen
is tall, and so must be scrolled. This, of course scrolls the
full-sized image as well.

Here's the problematic page:
http://www.texasellis.com/albumjs.htm

How can I display the full size image so that it stays vertically
centered in the window, regardless of the window being scrolled up or
down by the user?

I'd prefer not to use a popup window. I'd like the image to just sort
of 'float' on the screen at the desired position. I imagine this
being similar to those obnoxious advertisements I've seen on other
websites that float up and down as you scroll the web page up and
down, always staying in view.

Thanks for any help. I'm willing to do the research and learning on
my own...I just don't know where to look. Any suggestions or nudges
would be greatly appreciated.

Joseph

P.S. I'm moderately familiar with Perl. I intend to eventually use
Perl to generate the thumbnail pages on the fly. I just need to work
out the javascript bit first.