First, greetings to everyone :)
I'm doing a university seminar & I've encountered a problem. I have a
gallery with thumbnails linked on pictures. What I want is popup to be
opened with dimensions of linked picture after clicking on a thumbnail.
I found javascript which is compatible with IE, Firefox & Opera but I
can't get it to work.
All I get is this http://www.justfonts.com/tini/problem.html (thumbnail
dissapeared).
I dont't know where I'm wrong. Please help!
Original script is (http://www.howtocreate.co.uk/perfectPopups.html):
//really not important (the first two should be small for Opera's sake)
PositionX = 10;
PositionY = 10;
defaultWidth = 600;
defaultHeight = 400;
//kinda important
var AutoClose = true;
//don't touch
function popImage(imageURL,imageTitle){
var imgWin =
window.open('','_blank','scrollbars=no,resizable=1 ,width='+defaultWidth+',height='+defaultHeight+',l eft='+PositionX+',top='+PositionY);
if( !imgWin ) { return true; } //popup blockers should not cause errors
imgWin.document.write('<html><head><title>'+imageT itle+'<\/title><script
type="text\/javascript">\n'+
'function resizeWinTo() {\n'+
'if( !document.images.length ) { document.images[0] =
document.layers[0].images[0]; }'+
'var oH = document.images[0].height, oW = document.images[0].width;\n'+
'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are
disabled
'window.doneAlready = true;\n'+ //for Safari and Opera
'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
'var myW = 0, myH = 0, d = x.document.documentElement, b =
x.document.body;\n'+
'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
'else if( d && d.clientWidth ) { myW = d.clientWidth; myH =
d.clientHeight; }\n'+
'else if( b && b.clientWidth ) { myW = b.clientWidth; myH =
b.clientHeight; }\n'+
'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 )
- myH ) );\n'+
'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
'if( !window.opera ) {
x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
'}\n'+
'<\/script>'+
'<\/head><body onload="resizeWinTo();"'+(AutoClose?'
onblur="self.close();"':'')+'>'+
(document.layers?('<layer left="0" top="0">'):('<div
style="position:absolute;left:0px;top:0px;display: table;">'))+
'<img src='+imageURL+' alt="Loading image ..." title=""
onload="resizeWinTo();">'+
(document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
imgWin.document.close();
if( imgWin.focus ) { imgWin.focus(); }
return false;
}
My html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Untitled Document</title>
<script language="javascript">
function openPopup (imageURL, caption) {
/*
This routine creates a pop-up window, and ensures that it takes focus.
It is
intended to be called from an anchor tag. The new window will resize
itself to
the optimum size, so we make it as large as the largest required window to
overcome bugs in various manifestations of various browsers.
Author: John Gardner
Written: 8th November 2003
Updated: 27th January 2004
Calling sequence: <a href="a.jpg" onClick="return
openLargeImage('a.jpg','Caption');">
The first parameter is the URL of the image to be opened, and the second
parameter is the caption for the image which is displayed in the window
title
and in the alt property of the image tag.
Note that the calling sequence will simply open the image in the main
window if
JavaScript isn't enabled.
*/
// Constants - change these to suit your requirements Note that the
defaultWidth
// and defaultHeight variables should be set to more than your
largest image to
// overcome a bug in Mozilla (at least up to Firefox 0.9).
var windowTop = 100; // Top position of popup
var windowLeft = 100 // Left position of popup
var defaultWidth = 730; // Default width (for browsers
that cannot resize)
var defaultHeight = 532; // Default height (for browsers
that cannot resize)
var onLoseFocusExit = true; // Set if window to exit when it
loses focus
var undefined;
// Set up the window open options
var Options = "width=" + defaultWidth + ",height=" + defaultHeight +
",top=" + windowTop + ",left=" + windowLeft + ",resizable"
// Now write the HTML markup to the new window, ensuring that we
insert the
// parameter URL of the image and the parameter description of the
image in
// the right place.
var myScript = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01
Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n" +
"<html>\n" +
"<head>\n" +
"<title>" + caption + "\</title>\n" +
"<meta http-equiv=\"Content-Type\" content=\"text/html;
charset=ISO-8859-1\">\n" +
"<meta http-equiv=\"Content-Language\" content=\"en-gb\">\n" +
"<script language=\"JavaScript\" type=\"text/javascript\">\n" +
"function resizewindow () {\n" +
" var width = document.myimage.width;\n" +
" var height = document.myimage.height;\n";
// Netscape
if (navigator.appName.indexOf("Netscape") != -1) {
myScript = myScript + " window.innerHeight = height;\n
window.innerWidth = width;\n"
}
// Opera
else if (navigator.appName.indexOf("Opera") != -1) {
myScript = myScript + " window.resizeTo (width+12, height+31);\n"
}
// Microsoft
else if (navigator.appName.indexOf("Microsoft") != -1) {
myScript = myScript + " window.resizeTo (width+12, height+31);\n"
}
// Assume a frig factor for any other browsers
else {
myScript = myScript + " window.resizeTo (width+14, height+34);\n"
}
myScript = myScript + "}\n" + "window.onload = resizewindow;\n" +
"</script>\n</head>\n" + "<body ;
// If the window is required to close when it loses focus.
if (onLoseFocusExit) {myScript = myScript + onblur=\"self.close()\" ;}
myScript = myScript + style=\"margin: 0px; padding: 0px;\>\n" +
"<img src=\"" + imageURL + \ alt=\"" + caption + \ title=\"" +
caption + \ name=\"myimage\">\n" +
"</body>\n" + "</html>\n";
// Diagnostic - uncomment the next line if you wish to see the script
generated.
alert (myScript);
// Create the popup window
var imageWindow = window.open ("","imageWin",Options);
imageWindow.document.write (myScript)
imageWindow.document.close ();
if (window.focus) imageWindow.focus();
return false;
}
</script>
</head>
<body>
<div align="center">
<p> </p>
<p> </p>
<p> </p>
<p><a href="people-arkon.jpg" onClick="return
openLargeImage('people-arkon.jpg','Caption');"><img
src="gumb-b&w-At-night.jpg" width="42" height="42" border="0"></a></p>
<p> </p>
</div>
</body>
</html>
