Dreamweaver - Popup window blues

Author

Popup window blues

Jenna Monnington

2005-08-30, 7:36 pm

I have a photo gallery with many different sized images and I have used the
behavior open browser window to open them up when the user clicks them. However
I am running into a problem with their size. If I make the window the same size
as the image it cuts off the image. So I have been making the windows bigger
then the actual image. What?s got me confused is some of the windows aren't
sizing properly with the image so when I change their size to correct it, its
not fixing it, it is making it worse by shrinking the image or putting the
white space in a different corner. i.e., if I had too much white space on the
side and I try to correct this it moves the white space to the bottom!? It
wasn't doing this with the first set of pictures I put in but the second set
its messing up. If you know what?s happening and how to fit it that?s great and
I would great appreciate your help, however I first ask for a better way. I
really don't want any white space around my images. Is there a way to tell the
window to "fit to image" or is it a playing around game? If so is there a way
to specify where the image is too? It doesn?t put the white around the image
equally.

Thanks for your help!
Jenna

E Michael Brandt

2005-08-30, 7:36 pm

you might want to check my solution for this:

http://valleywebdesigns.com/vwd_jspw3.asp

Jenna Monnington wrote:
> I have a photo gallery with many different sized images and I have used the
> behavior open browser window to open them up when the user clicks them. However
> I am running into a problem with their size. If I make the window the same size
> as the image it cuts off the image. So I have been making the windows bigger
> then the actual image. What?s got me confused is some of the windows aren't
> sizing properly with the image so when I change their size to correct it, its
> not fixing it, it is making it worse by shrinking the image or putting the
> white space in a different corner. i.e., if I had too much white space on the
> side and I try to correct this it moves the white space to the bottom!? It
> wasn't doing this with the first set of pictures I put in but the second set
> its messing up. If you know what?s happening and how to fit it that?s great and
> I would great appreciate your help, however I first ask for a better way. I
> really don't want any white space around my images. Is there a way to tell the
> window to "fit to image" or is it a playing around game? If so is there a way
> to specify where the image is too? It doesn?t put the white around the image
> equally.
>
> Thanks for your help!
> Jenna
>

(_seb_)

2005-08-30, 7:36 pm

E Michael Brandt wrote:[color=darkred]
> you might want to check my solution for this:
>
> http://valleywebdesigns.com/vwd_jspw3.asp
>
> Jenna Monnington wrote:
>

for a free alterantive, you could try this:

popup window (important: no doctype!):

<html>
<head>
<style type="text/css">

</style>
</head>
<body onload="window.resizeTo(document.images[0].width+20,
document.images[0].height+40);">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr><td align="center" valign="middle">
<img src="your_image_here" width="774" height="568">
</td></tr></table>
</body>
</html>

This works pretty well as far as I have tested. You'd still need to use
the open browser window behavior, uncheck all windows attributes, and
set an arbitrary width and height.

Then, you can adjust the margins around the image in the java script:

width+20,
and
height+40

adjust them to whatever you want, but remember the top margin must be
bigger than what you think because in all browsers you have a top Bar
even if there is no toolbbar.

Then, if you want to have only one file for all your popups, that's also
possible, but you'd have to use a server side language, or some more
javascript...

--
seb@REMOVE_THISwebtrans1.com
http://www.webtrans1.com
high-end web design

(_seb_)

2005-08-30, 7:38 pm

(_seb_) wrote:
> E Michael Brandt wrote:
>
>
> for a free alterantive, you could try this:
>
> popup window (important: no doctype!):
>
> <html>
> <head>
> <style type="text/css">
> 
> </style>
> </head>
> <body onload="window.resizeTo(document.images[0].width+20,
> document.images[0].height+40);">
> <table width="100%" height="100%" cellpadding="0" cellspacing="0">
> <tr><td align="center" valign="middle">
> <img src="your_image_here" width="774" height="568">
> </td></tr></table>
> </body>
> </html>
>
> This works pretty well as far as I have tested. You'd still need to use
> the open browser window behavior, uncheck all windows attributes, and
> set an arbitrary width and height.
>
> Then, you can adjust the margins around the image in the java script:
>
> width+20,
> and
> height+40
>
> adjust them to whatever you want, but remember the top margin must be
> bigger than what you think because in all browsers you have a top Bar
> even if there is no toolbbar.
>
> Then, if you want to have only one file for all your popups, that's also
> possible, but you'd have to use a server side language, or some more
> javascript...
>
PS:

I experimented a little bit and found a much better solution than my
previous code:

This should be your link on the thumbnail, that opens the popup (it's a
long link, I know):

<a href="java script:;"
onclick="java script:myWindow=window.open('','','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=200,height=200');myWindow.document.write('<html><head><title>-<\/title><style
type='text\/css'>body{margin:0;padding:0;}<\/style><\/head><body
onload='window.resizeTo(document.images[0].width+20,
document.images[0].height+40);'><table width=100% height=100%
cellpadding=0 cellspacing=0><tr><td align=center valign=middle><img
src='image1.jpg' width=774
height=568><\/td><\/tr><\/table><\/body><\/html>');
myWindow.document.close(); return false">YOUR LINK</a>

On each thumbnail, you should have the same link, you just need to
change the path to the image and its size (image1.jpg and width=774
height=568).
The good thing about this, is that you don't need to create any file at
all for the popup window. The link creates the popup window page on the
fly. So you ONLY need to make the links in your main page. You don't
need any javascript in the head of your document, nor do you need to use
Dreamweaver open window behavior. Just copy and paste the link.

--
seb@REMOVE_THISwebtrans1.com
http://www.webtrans1.com
high-end web design

Jenna Monnington

2005-08-30, 7:38 pm

I'm going to give your code a whirl but I'm not deep in html and have never used javascript. How do I use it ^_^U

(_seb_)

2005-08-30, 7:38 pm

Jenna Monnington wrote:
> I'm going to give your code a whirl but I'm not deep in html and have never used javascript. How do I use it ^_^U

ok ok I kept working and here's even better (much simpler for you):

paste this between your head tags:

<script language="JavaScript" type="text/JavaScript">

</script>

Then all you need to do for each one of your links to open the popup is:

<a href="java script:;"
onclick="fly_popup('image.jpg',774,568,20,40,'#FF0000');">YOUR LINK</a>

and fill-in the values between the parenthesis, in this order: 'the path
to your big image', big image width, big image height, horizontal
margin, vertical margin, 'background color'. Be careful not to take out
any punctuation signs, comas or single quotes. From one link to the
next, I guess you'll keep the same background color and margins, so all
you'll have to change is each image path and its width and height.
Should be easy.

--
seb@REMOVE_THISwebtrans1.com
http://www.webtrans1.com
high-end web design

E Michael Brandt

2005-08-30, 7:38 pm

I've not tested, but think this code is a) not Safari compatible, b)
will spawn a million new windows or use the old window at what may be
the wrong dimensions for the new image, and leave the popup in the
background for subsequent function calls.

That is why JustSo PictureWindow3 exists.

emichael brandt

seb_) wrote:
> Jenna Monnington wrote:
>
>
>
> ok ok I kept working and here's even better (much simpler for you):
>
> paste this between your head tags:
>
> <script language="JavaScript" type="text/JavaScript">
> 
> </script>
>
> Then all you need to do for each one of your links to open the popup is:
>
> <a href="java script:;"
> onclick="fly_popup('image.jpg',774,568,20,40,'#FF0000');">YOUR LINK</a>
>
> and fill-in the values between the parenthesis, in this order: 'the path
> to your big image', big image width, big image height, horizontal
> margin, vertical margin, 'background color'. Be careful not to take out
> any punctuation signs, comas or single quotes. From one link to the
> next, I guess you'll keep the same background color and margins, so all
> you'll have to change is each image path and its width and height.
> Should be easy.
>

E Michael Brandt

2005-08-31, 4:33 am

>some of the 'real world' web sites references do not work with Safari
indeed.

Really? which ones? Perhaps some of their pages are still using the old
jspw*1* which was NOT Safari-compatible, because jspw*3* really is
totally happy in Safari.

emichael brandt

(_seb_) wrote:
> E Michael Brandt wrote:
>
>
>
> hum it does work with Safari. It does open a new popup window (with the
> correct, new size) each time a new link is clicked on, but then who
> doesn't close their popups before they focus again on their main page?
> and if they don't, they'll see a bunch of popups when they close their
> browser. No big deal.
> I'm pretty happy with my experiment, thanks.
> I also went to the justsopicture web site and noticed that some of the
> 'real world' web sites references do not work with Safari indeed.
>
> But there is no question that their extension is more sophisticated and
> practical than my bit of code, especially the new vversion that works
> with Safari.
> I'm just having fun and keeping it simple (and free)
>
>
>

Jenna Monnington

2005-08-31, 7:35 pm

_Seb_ - Thank you so much for sharing your code with me!

E Michael Brandt - Thank you for suggesting justpictureit, I will keep its
link, and if I get into doing more gallerys that need this kind of thing, I
will purchase it.

Thank you both very much!
Jenna

Originally posted by: Newsgroup User
Jenna Monnington wrote:
> I'm going to give your code a whirl but I'm not deep in html and have never
used javascript. How do I use it ^_^U

ok ok I kept working and here's even better (much simpler for you):

paste this between your head tags:

<script language="JavaScript" type="text/JavaScript">

</script>

Then all you need to do for each one of your links to open the popup is:

<a href="java script:;"
onclick="fly_popup('image.jpg',774,568,20,40,'#FF0000');">YOUR LINK</a>

and fill-in the values between the parenthesis, in this order: 'the path
to your big image', big image width, big image height, horizontal
margin, vertical margin, 'background color'. Be careful not to take out
any punctuation signs, comas or single quotes. From one link to the
next, I guess you'll keep the same background color and margins, so all
you'll have to change is each image path and its width and height.
Should be easy.

--
seb@REMOVE_THISwebtrans1.com
http://www.webtrans1.com
high-end web design