473,327 Members | 2,112 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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

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.
Jul 20 '05 #1
5 6491
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
Jul 20 '05 #2
On Wed, 13 Aug 2003 12:06:54 +0900, "TK" <tk*******@hotmail.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.onscroll 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
Jul 20 '05 #3
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

Jul 20 '05 #4
On Wed, 13 Aug 2003 19:55:41 +0900, "TK" <tk*******@hotmail.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
Jul 20 '05 #5
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'yahoo.co.uk

obviously change the 'at' bit
"Joseph Ellis" <ja*******@hotmail.com> wrote in message
news:am********************************@4ax.com...
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.

Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Nick | last post by:
I am building a photo album webpage and am not sure exactly how I should organize the database. Here's where Im at so far... I have one table called 'images' which contains the columns 'albumID',...
5
by: fraser | last post by:
Hi, I have a photo gallery with cat photos here http://mouserspage.cjb.net From the beginning, I have been making each page of thumbnails, with a separate page for each photo, entirely in...
5
by: TrvlOrm | last post by:
HI There, I have been struggling with JavaScript code for days now, and this is my last resort! Please help... I am trying to create a JavaScript slide show with links for Next Slide,...
8
by: Robertico | last post by:
Hi, I found a tutorial to create an oline photo album (php and mySQL). Great, but i'd like to add some user management and that's not in the tutorial :-)) So i'am looking for an example,...
13
by: Viken Karaguesian | last post by:
Hello everyone, Can anyone recommend a good online site to learn PHP? The W3Schools website is quite lacking - leaves much to be desired. I'm sure there are many places, but which ones are good?...
1
by: eldridge.brian | last post by:
I am very new to php, but eagerly picking it up. Thanks in advance for any assistance. I have a site I am working on that uses "PHP frames" - url is like http://www.xyz.com/home.php?page=photo ...
22
by: bevoldjling | last post by:
Hi ! I need some help in putting together a website for our family gathering. Although I'm still pretty "green", I don't think what I need requires terribly advanced skills ...except for one...
2
by: David Griffiths | last post by:
Hi All Using VB 2005 I have been tasked with creating simple Photo Album page on our local intranet server that can display Thumbnails and then the full picture once the thumbnail is clicked...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.