CodeLifter.com - JavaScript Auto-Sizing Image Popup Window Script

........Try the Test Links
Text Links	Button Links	Image Links
Click Here Click Here Click Here
Note: Modified Version With Timed Closure A number of people have requested I write a version of this script where the image popup window can be set to close after a specific number of seconds. A download kit with the script modified for that functionality, including instructions and sample html, is available here. - etLux

Click here to select the code in the window below.
Use Ctrl+C to copy it to your clipboard.

==============================================================
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 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='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',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(300,300);');
writeln('width=300-(document.body.clientWidth-document.images[0].width);');
writeln('height=300-(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.images["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:

popImage("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

Example 3:  Launching from a form button

============================[end]=============================

Get The Code!

CodeLifter is a CodeBrain.com Sister Site
�1995-2010 OEC Corp & CodeLifter.com
CodeLifter� & CodeBrain�
Legal Notices

CodeBrain InterNET Group
BrainCode.com	CodeFoot.com	CodeBelly.com
D3Q.com	etLux.com	FFFast.com
IEFix.com	PopUpWorks.com	MicroTicker.com
DavidSosnowski.com	OECCorp.com	MailToProtector.com
	CodeBrain.com

Free MUSIC!

Contemporary classical music, completely free.

Who do WE
Use for Hosting?

We judge hosts harshly. Uptime. Lightning-fast support. Servers that sing. And prices that please. Anything less, and you're history. Our clients won't accept anything but the best. Will you? From demanding music sites like DavidSosnowski to CodeBelly.com to dozens more, we use... HostNine.com