Forum Moderators: open

Message Too Old, No Replies

Help with: Auto-Sizing Image Popup Window Script

         

amazing2061

4:22 pm on Feb 14, 2004 (gmt 0)



This may be easy for most but I can't get this thing to work. (Yes I am new at this). I believe I followed all the instructions but when I click on the link no window opens just the default IE page cannot display. Here is exactly what I entered in the link dialog:

<a href="javascript:popImage('http://www.sambuccibros.com/carseat.jpg','New Car Seat')">

Is this my problem? Please help.

P.S. I am using Dreamweaver MX 2004

BELOW IS THE INSTRUCTIONS AND EXACTLY WHAT I COPIED AND PASTED BETWEEN THE HEAD TAGS AS PER THE INSTRUCTIONS:
==============================================================
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='+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(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.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

<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]=============================

birdbrain

4:04 pm on Feb 15, 2004 (gmt 0)



Hi there amazing2061,

well, it worked fine for me...
except that I had to add this to
the end of your link ...


carseat</a>

In I.E. 6.0 it worked as you wanted.
In Mozilla 1.5, Netscape 7.0 and Opera 7.0
it resized Ok but still had scrollbars.
To remove them I added this to the script...


writeln('<html><head><title>Loading...</title><style>body{margin:0px;overflow:hidden;}</style>');writeln('<sc'+'ript>');

birdbrain