pop-up windows [Archive] - Lissa Explains it All: Web Design Forums

ChrisP

08-22-2003, 08:51 PM

hey.
ive started a new site, and i just wanted to kno if it is possible to have different links on a page opening into different popup windows. that isnt very well-worded and makes me sound stupid. but what i mean is that, i have a gallery on the site- and i want each thumnail to open into a popup containing the fullsize image. my site is located *here* (http://nodesha.port5.com) and you'd go to Media --> Official Pics --> and then you get to this thumbnail gallery. i want each one to open up into a pop up window. i know i could just make them open in a 'new window', but i dont really wonna do that. sorry for being so long, and thick-sounding, and confusing. thanks to anybody who thinks they can help. :-)

chris

Stormx

08-22-2003, 09:02 PM

Yup, It can be done.

This in head:

<script language="JavaScript">
function popup(url)
newwin = window.open(url, "Image", "status=0, toolbar=0, directories=0, menubar=0, scrollbars=0, resizable=0, width=your width, height=your height");
</script>

Now, put your links like this:

<a href="#" onClick="popup('url to image page')">Link Text</a>

ChrisP

08-22-2003, 09:26 PM

thanks! :-)

just curious: is it possible to set different widths and heights for each pop-up ?

chris

ChrisP

08-23-2003, 11:42 AM

that didnt really work...

it looks like this now:

http://nodesha.port5.com/media/gallery001.html

so its kindof halfway there. i want the popup that opens up, to have the link that opens in the main page when you click the thumbnail. at the moments- its opening a link and a popup.

// :-s

Stormx

08-23-2003, 12:22 PM

LOL, No, You got it wrong....

<a href="#" onClick="popup('url to image page')">Link Text</a>

Leave the "#" in, only replace the "url to image page" bit. Thats why its in bold!

ChrisP

08-23-2003, 01:18 PM

Well now at least it is only opening the popup, but its not opening up the right pages in them.

http://nodesha.port5.com/media/gallery01/gallery001.html is what its looking like now.

here's the source :

<HTML>
<HEAD>
<BODY STYLE="background-color:transparent">



<script language="javascript">
//
</script>



<style type="text/css">

body
{ font-family: verdana;
color: #FFFFFF ;
letter-spacing: 1pt;
font-size: 8pt;

scrollbar-face-color : #00FF33;
scrollbar-highlight-color : #00FF33;
scrollbar-3dlight-color : #00FF33;
scrollbar-shadow-color : #00FF33;
scrollbar-darkshadow-color : #00FF33;
scrollbar-track-color : #00FF33;
scrollbar-arrow-color : #FFFFFF; }

</style>

</HEAD>
<BODY>

<div style="position:absolute; top:0; left:0; width:220; height:334; padding:0px;">

<b>Official Photos</b><br>

<a href="#" onClick="popup('http://nodesha.port5.com/media/gallery01/001.html')"><img src="/media/gallery01/thumbs/tn_001.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="#" onClick="popup('http://nodesha.port5.com/media/gallery01/002.html')"><img src="/media/gallery01/thumbs/tn_002.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="#" onClick="popup('http://nodesha.port5.com/media/gallery01/003.html')"><img src="/media/gallery01/thumbs/tn_003.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="#" onClick="popup('http://nodesha.port5.com/media/gallery01/004.html')"><img src="/media/gallery01/thumbs/tn_004.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="#" onClick="popup('http://nodesha.port5.com/media/gallery01/005.html')"><img src="/media/gallery01/thumbs/tn_005.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="#" onClick="popup('http://nodesha.port5.com/media/gallery01/006.html')"><img src="/media/gallery01/thumbs/tn_006.jpg" border="1" Vspace="5" Hspace="5"></a>

</div>

</BODY>
</HTML>

The URLs in blue are the pages I want to open in each popup window when you click your chosen thumbnail.

Thanks for bearing with me Stormx lol

Stormx

08-23-2003, 01:20 PM

NONO! DONT CHANGE ANYTHING BUT THE BITS IN BOLD!

<script language="JavaScript">
function popup(url)
newwin = window.open(url, "Image", "status=0, toolbar=0, directories=0, menubar=0, scrollbars=0, resizable=0, width=your width, height=your height");
</script>

ONLY CHANGE THE WIDTH AND HIGHT BITS! Any instance of "url" in the code above should be left as it is

ChrisP

08-23-2003, 01:34 PM

http://nodesha.port5.com/media/gallery01/gallery001.html

thats what it looks like now, ive done exactly what you've said, and it isnt even opening a popup window - just doing nothing. and it also says theres an 'error on page. i realize your trying to help- but could it be that you're giving me a code for opening popups via a text link, not via image links? thanks once again...

MaGiCSuN

08-23-2003, 01:47 PM

try this:

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

and then for the links:

<a href="javascript:P('http://nodesha.port5.com/media/gallery01/001.html',430,430)"><img src="/media/gallery01/thumbs/tn_001.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="javascript:P('http://nodesha.port5.com/media/gallery01/002.html',430,430)"><img src="/media/gallery01/thumbs/tn_002.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="javascript:P('http://nodesha.port5.com/media/gallery01/003.html',430,430)"><img src="/media/gallery01/thumbs/tn_003.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="javascript:P('http://nodesha.port5.com/media/gallery01/004.html',430,430)"><img src="/media/gallery01/thumbs/tn_004.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="javascript:P('http://nodesha.port5.com/media/gallery01/005.html',430,430)"><img src="/media/gallery01/thumbs/tn_005.jpg" border="1" Vspace="5" Hspace="5"></a>
<a href="javascript:P('http://nodesha.port5.com/media/gallery01/006.html',430,430)"><img src="/media/gallery01/thumbs/tn_006.jpg" border="1" Vspace="5" Hspace="5"></a>

first number is height second is width (in the link)

Love,
Mirna

ChrisP

08-23-2003, 01:58 PM

hey thankyou--- but no. lol

http://nodesha.port5.com/media/gallery01/gallery001.html - what its looking like now...

and ... no. hehe

unless im doing *your* code wrong aswell - seems i cant do anything right lol.

ChrisP

08-23-2003, 01:59 PM

omg its working! u genius !!! lol

thankyou so much :-D

*claps !!!*

MaGiCSuN

08-23-2003, 02:00 PM

you're welcome :)

Stormx

08-23-2003, 06:55 PM

Nice one magic sun, although my code was right all along... Oops, it wasn't. Heh.

Magicsun: The problem with that code is that each popup the person presses, a new window opens, rather than loading the page in the current popup window if there is one...

EDIT: Only use this if you want to. Its a very slightly modified version of magicsun's code: This in head:

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

john8518

08-24-2003, 05:52 AM

I can NOT get this to work either! I've been pulling my hair out for 2 hours now. What am I doing wrong?

http://www.geocities.com/theshipyards/1.htm

[don't worry the only thing on there is the link]

Stormx

08-24-2003, 02:18 PM

john8518

08-24-2003, 05:58 PM

Nope still didn't do a thing. This isn't some stupid geocities thing is it?

pink_fishies

08-24-2003, 06:49 PM

Could be. I remember that code didn't work for me either when I was on geocities.

john8518

08-24-2003, 07:24 PM

Bah! I can't get the hover image switch thingie to work either. It did ONCE! But for the popup windows the code for the button works, but I don't want an ugly button on it.

<input type="button" Value="yournamehere" style="font-family:yourfontname" style="background:#yourcolorcode" ONCLICK="window.open('yoururlhere.html', 'Sample', 'toolbar=no,location=no,directories=no,status=no,m enubar=no,scrollbars=no,resizable=no,copyhistory=y es,width=500,height=500')">

Oh I'm using CSS too if that has anything to do with it.

Please use the Edit button instead of replying within 5 minutes of posting.
-Moderator