PDA

Click to See Complete Forum and Search --> : Pup Up Image Script

Stratusxp
04-28-2004, 10:49 AM
Hi everyone. I had a question on a script im working on. I have my web page set up at home a personal family site with picture indexes. I am running a javascript code that when a picture is clicked it opens a new window automatically resized to the pictures full size. But what im looking to do is Have each window have its own title on the top bar and have a very small close window option in the bottom right corner. Heres the script im using.

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function CaricaFoto(img){
foto1= new Image();
foto1.src=(img);
Controlla(img);
}
function Controlla(img){
if((foto1.width!=0)&&(foto1.height!=0)){
viewFoto(img);
}
else{
funzione="Controlla('"+img+"')";
intervallo=setTimeout(funzione,20);
}
}
function viewFoto(img){
largh=foto1.width+20;
altez=foto1.height+20;
stringa="width="+largh+",height="+altez;
finestra=window.open(img,"",stringa);
}
// End -->
</script>

And the link appears as this

<A HREF="javascript:CaricaFoto('/whateveryourdirectoryorimagefileis.jpg')" BORDER="0">

An example od what i need can be found here Example (http://airtran.hpidirect.net/Content/ContentCT.asp?P=19&ProductID=90&shopid=2)

Where under the image it says Enlarge [+] it brings up a new window with title resizes to picture and close window.

An example of the sciript im using can be found here Example (http://www.ryannandjim.com/babyjustin.html)

Thank you Very much in advance :)
Stratusxp
04-28-2004, 11:23 AM
Well I think i found the right scirpt for me. If anyones interested heres the script i found that works very well for my purpose.

<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='+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 + 20));');
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=FFFFFF scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' border=0><div align="right"><a href="javascript: window.close();" STYLE="font-size:12;color:#555555;">Close window</a></div></body></html>');
close();
}}

</SCRIPT>

And the link would be


<a href="Javascript: popImage('http://www.ryannandjim.com/topleftairlinepiclarge.jpg', 'My Travel Airlines Boeing 757-200')">Enlarge this Image</a>

My example can be found
Here (http://www.ryannandjim.com/examples/popupimage.html)

Thank you all anyway. If you have anything better than what i have here please let me know. Contact me if you would. Or if you have any opinion on the site.
David Harrison
04-28-2004, 11:43 AM
Holy crap that's a lot of code, KISS. Here is a code that does everything you could ever want, well not really I'm lying, but it does what you asked for.

I deliberately didn't make the pop-up the same size as the image because sometimes it will open a window that is too big for the user's resolution. However I did make sure that the script gave the image dimentions with the width and height attributes.
It also allows you to specify an alt attribute, an image description, the title for the page and I've slapped a DOCTYPE on it so that you can check your code against the W3C validator (http://validator.w3.org/).
Stratusxp
04-28-2004, 11:50 AM
ooops Didnt mean to post that twice. Thanks for the info above im going to go check that out right now.
David Harrison
04-28-2004, 11:58 AM
Some good repetition from Stratusxp. ;) Try putting your code between some [code] tags in future.

I really do think that it would be better if you were to use the code I posted. It's valid, simple to use, works for browsers with JavaScript disabled, accessible and easily implemented with the code already removed to a separate file.

The code you have chosen to use uses various "fixes" for different browsers which it just doesn't need. It kind of looks like it was generated by FrontPage Express then someone stuck a copywrite on it, (that's not a good thing by the way).
Stratusxp
04-28-2004, 12:13 PM
I have downlaoded your scipt and am reviewing it now. Im going to test it out. Yeah the source code i had found is a code generator program found on codelifter.com. Its not company copyrighted. You can generate the code to your liking. If there is a way to make your script have just the pop up the size of the pic only. I dont need the picture description below the picture. I want to make the pop up as small as possible to fit the image and the close window and thats all. Thank you.
David Harrison
04-28-2004, 12:31 PM
If your images get too big the window may become huge and go off the side of the screen. Here is a slightly different version with the descriptions removed and the window size defined by the image.
kiwibrit
07-30-2006, 05:48 AM
That is very clever, indeed.

But, in Firefox (as opposed to, Opera IE 6 and 7) the text alignment around a photo was affected unless I take out the meta tags relating to javascript. But in IE 6, that chopped the bottom of the picture level with the bottom of the text when the new window was closed - though IE7 was OK. So I have left the meta tags in for now.

I may introduce the metatags by conditional statement for IE only - would there be any problems in doing that?

On my laptop's local server, all this works quite well. But I have noticed that with a clear cache, the new window does not have the larger image. Closing the window, and re-selecting then gets the new window with image.

Worse, on one of my computers, the large image cannot be made to appear in Firefox (both computers have Firefox, with 1.5.05) on the web, even with pop-ups unblocked though it comes up fine in Opera and IE - and was fine for all browsers, including IE, on my other computer

Any ideas on what is causing these strange effects?

Here is the affected web page (http://localhost/Castle-Hill-Club-Archives.htm). The click-to-enlarge link is the last on the page.
kiwibrit
07-30-2006, 08:37 AM
This link (http://localhost/Castle-Hill-Club-Archives-temp.htm) shows the effect of an alternative approach, which gets rid of having to open a window twice, and also the anomaly on one of the computer's Firefox.

But it does not get rid of the weird effect of the metagas relating to javascript on the layout in Firefox.

Is this a well-known problem? Throwing the meta taggs into a conditional statement does not work for IE.
kiwibrit
07-30-2006, 10:21 AM
Sorted (http://www.castlehillclub.com/Castle-Hill-Club-Archives.htm). The image chopping was an IE6 bug. Got rid of with a clearing div. Meta tags removed. Page now OK in all browsers I have tested with.
kiwibrit
07-30-2006, 01:16 PM
Tried out David Harrison's original script again (http://www.castlehillclub.com/Castle-Hill-Club-Archives-temp4.htm). Great in IE. In FF needed the meta tags on the main page, which again screwed the layout in FF. More than that, the new window had the image with one computer (only of my 2) using FF. Reluctantly (because I thought the concept was brilliant) abandoning that script, and sticking to the one used in the link of the message above.