[jonathan stick]

Hello!

I need help with something that I can find with Google anywhere..

I'm making a image gallery with thumbnails that need to pop up into full-size images. The full-size versions will vary in size, so I want a script that will resize AND center the pop-up window.

Help me!

[Raman]

There are as many ways to do it as there are people in this forum. Maybe more. Basically, what I'd do is create a function. Then use the onClick event handler for your thumbnail image to pass the name of the picture and the dimensions of the picture to the javascript function.

In the function I would create a new window without any browsing buttons (just the close window button which is there by default on all macintoshes) [I like the way image windows look without the "chrome"]. I would resize the window using the innerwidth and innerheight of the window to the size of the picture and set the top and left margins to zero. Then I would center the new webpage to the users screen by getting their available screen width and height, doing some simple division and subtraction to achieve this. Then write the source of the image into the window.

If you never want more than 1 window to pop up, just make sure you give the window a javascript name.

If you're not a programmer then just ask and I'll write you the code.

[jonathan stick]

Thanks a ton. I'm not a very skilled javascript programmer as of now, but I understand exactlt what you're talking about, I'm just not good enough to execute it.

It would be no less than amazing if you wrote that out for me!

I only need to pop-up one image at a time, never more than one. If it helps at all the verticle images will 500px in height with a varying width and the horizontal ones will be 500px in width with a varying height. Is there a way to do this without creating a page for each image? Is that possible?


Thank you so much!

This will live at:
http://www.thebadgerking.com

We're an indie-prog-pop band from Portland, OR

Our first record comes out next month, we used my G4 and iBook with Pro Tools and Cubase to record almost all of the tracks.

[Raman]

Originally posted by jonathan stick:
<STRONG>Thanks a ton. I'm not a very skilled javascript programmer as of now, but I understand exactlt what you're talking about, I'm just not good enough to execute it.

It would be no less than amazing if you wrote that out for me!

I only need to pop-up one image at a time, never more than one. If it helps at all the verticle images will 500px in height with a varying width and the horizontal ones will be 500px in width with a varying height. Is there a way to do this without creating a page for each image? Is that possible?


Thank you so much!

This will live at:
http://www.thebadgerking.com

We're an indie-prog-pop band from Portland, OR

Our first record comes out next month, we used my G4 and iBook with Pro Tools and Cubase to record almost all of the tracks.</STRONG>

The reason you'd write a function is so that you didn't have to create a web page for each picture. You could have a thousand pictures but only 1 page (of thumbnails) and the javascript would generate the code for that particular page. That's the purpose of the function.

The pain in the butt is you'd have to know the dimensions of the image beforehand. There may be a way to programatically find out the image's dimensions. Or after the image is written to the new browser window we may be able to expand the window to show all the contents. If so then we'd be in the clear about that.

Another caveat is that older browsers don't have innerwidth and innerheight and/or available screen width and height so it might not look good on 4.0 level browsers - or you'd have to fudge it so that it "degrades gracefully" if the user is using a old browser.

I just checked out your "ton" of pictures page. Instead of having a ton of thumbnails (which takes a longer time to load than 1 collage of thumbnails) you should make 1 big thumbnail with an image map. it will load much faster and will be less taxing on the webserver, esp if you're getting large number of hits.

I like the clean look of your site. Did you design it?

-Raman

[jonathan stick]

Originally posted by Raman:
<STRONG>

The reason you'd write a function is so that you didn't have to create a web page for each picture. You could have a thousand pictures but only 1 page (of thumbnails) and the javascript would generate the code for that particular page. That's the purpose of the function.

The pain in the butt is you'd have to know the dimensions of the image beforehand. There may be a way to programatically find out the image's dimensions. Or after the image is written to the new browser window we may be able to expand the window to show all the contents. If so then we'd be in the clear about that.

Another caveat is that older browsers don't have innerwidth and innerheight and/or available screen width and height so it might not look good on 4.0 level browsers - or you'd have to fudge it so that it "degrades gracefully" if the user is using a old browser.

I just checked out your "ton" of pictures page. Instead of having a ton of thumbnails (which takes a longer time to load than 1 collage of thumbnails) you should make 1 big thumbnail with an image map. it will load much faster and will be less taxing on the webserver, esp if you're getting large number of hits.

I like the clean look of your site. Did you design it?

-Raman</STRONG>

Cool, I'm glad you like the site, yes I designed it. That's sort of my day job, I work for a online stock photgraphy agency and I do some freelance web work on the side.

About the ton of pictures, Cabel (the guy that makes the incredible MP3 player known as Audion) made that gallery with a PHP script to save time, so there you have it.

We don't really care about older browsers, we figure most people that download MP3s and look at band web sites are probably using a 4+ browser.

Thanks again!