View Full Version : Pop Up Windows


efil4bobegnops
03-18-2003, 08:54 PM
I have thumbnails of some pictures on my site. I want it to when you click on the thumbnail, a window pops up with the full picture. I have tried the code on this site...but I don't think I did it right so I took it off my site. If anyone can help me with this please let me know!

This is the site I am working with... (here (http://www21.brinkster.com/knome/v5/pics/picture-pages/gbd.html))

If it is possible, I don't want the pop up to be resizeable, and I don't want any scroll bars or tool bars or anything extra like that.

Please, if you know how to help me or know a place I can find out, please let me know.

°Doug

epolady
03-18-2003, 08:59 PM
Have you tried http://www.lissaexplains.com/java4.shtml ?
If this is the coding that you used before and you said it wasn't working, perhaps you can share the coding that you were using so we can fix any errors.

Alcy
03-18-2003, 11:55 PM
http://regretless.com/dodo/newworld/tutorials/javascripts/nomargin.php

frederick
03-19-2003, 02:58 AM
ok
i took this from another of my responses, to another thread:

make sure you have written the html for each page that the full sized images are to appear in. .... i'll reply again if you cannot do this.... or go to the html threads.

be sure that the bold parts are different for each and every pop up window you want.

<script language="javascript">
//<!--
function whatever1 ()
{ window.open ("http://your popup address.html","popup01 "," width=## ,height=## ,location=0,menubar=0,resizable=0,scrollbars=0,sta tus=0,titlebar=1,toolbar=0") }
-->
</script>

<script language="javascript">
//<!--
function something-else2 ()
{ window.open ("http://your next popup address.html","popup02 "," width=## ,height=## ,location=0,menubar=0,resizable=0,scrollbars=0,sta tus=0,titlebar=1,toolbar=0") }
-->
</script>


understand?

and also remember to have the words where i wrote "whatever1" and "something-else2" in the other code that goes in the body. ok?

<a href="java script:whatever1 ()"><img src="name-of-your-thumbnail.gif" border="1" width="##" height="##">
</a>

<a href="java script:something-else2 ()"><img src="name-of-your-next-thumbnail.gif" border="1" width="##" height="##"></a>

J E P P O
03-20-2003, 06:00 AM
Here try this <p>

================================================== ============
Script: Auto-Sizing Image Popup Window

Functions: Use this script to launch a popup window that
automatically loads an image and resizes itself
to fit neatly around that image. The script also
places a title you set in the titlebar of the
popup window. Any number of images can be launched
from a single instance of the script.

Browsers: NS6-7 & IE4 and later
[Degrades functionally in NS4]

Author: etLux
================================================== ============



STEP 1.
Inserting the JavaScript <script> In Your Page

Insert the following script in the <head>...</head> part
of your page. Take special care not to break any of the lines;
they must be exactly as shown.

Set the variables as per the instructions in the script.



<script>

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// SETUPS:
// ===============================

// Set the horizontal and vertical position for the popup

PositionX = 100;
PositionY = 100;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth = 500;
defaultHeight = 500;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height ='+defaultHeight+',left='+PositionX+',top='+Positi onY;
var optIE='scrollbars=no,width=150,height=100,left='+P ositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN); }
if (isIE){imgWin=window.open('about:blank','',optIE); }
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln ('if (isNN){');
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.ima ges["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}}

</script>



================================================== ============



STEP 2.
Calling the Image Popup from Links in Your Page

This is the form of the function:

imagePop("url_of_image","title_of_image")

Use the relative or absolute path of the image where we show
url_of_image. This is the url of the image you wish to show
in the auto-sizing popup window.

Use any text you wish where we show title_of_image. This is
the title that will appear in the titlebar of the popup. (Note:
do not use single- or double-quotes within a title.)

Caution: Be careful to place both values within quotes.
See the samples below.


Example 1: Launching from a text link

<a href="javascript:popImage('http://SomeSite.com/SomeImage.gif','Some Title')">
Click Here
</a>


Example 2: Launching from an image link

<a href="javascript:popImage('http://SomeSite.com/SomeImage.gif','Some Title')">
<img src="YourImage.gif" border="0">
</a>


Example 3: Launching from a form button

<form>
<input type="button" value="Click Here" onClick="popImage('SomeImage.gif','Some Title')">
</form>



============================[end]=============================
<p>
Cheers