"Wentink" <in**@wentinkmodelbouw.nl> wrote in message
news:JP**********************@amsnews03.chello.com ...
Does anybody have a simple script that let's me popup a picture from a
thumbnail?
The ones i found are all very very complicated and messy in the source...
Thanks,
Tintin
Try this out (NOTE - you should probably store the javascript in a *.js file
so you can reuse it). I tested this on IE6 and Mozilla 1.4.
All you need to do is pass the src to the image to the imagePopup()
function. Then you just need to call that function either in an <a> tag or
using an onclick handler in a button or image or whatever you want. The
script will dynamically determine the height and width of the image so you
don't even need to include those (i find that makes setting the scripting up
a lot easier in a page!).
<html>
<head>
<title>Popup Image Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
// Variable to store a reference to the popup window
var popupWindow
/*
Function: imagePopup()
Description:
Function to open an image in a popup window
Function Parameters:
ImageSource - REQUIRED - the src of the image to open in the popup window
ImageWidth - OPTIONAL - the width of the image
ImageHeight - OPTIONAL - the height of the image
ImageTitle - OPTIONAL - the title for the image - used in the <title>
attribute in the popup window
PopupTitle - OPTIONAL - the window.name property for the popup window
*/
function imagePopup( ImageSource, ImageWidth, ImageHeight, ImageTitle,
PopupTitle ) {
/*
1. PROCESS THE PASSED FUNCTION VALUES
*/
// Set default values if none were passed
PopupTitle = ( PopupTitle == '' ) ? 'imgPopup' : PopupTitle; // Note - this
must not contain any spaces
ImageTitle = ( ImageTitle == '' ) ? ImageSource : ImageTitle; // Use the
image src as the default title if none was passed
// See if we need to dynamically grab the Image width dimensions if none
were passed in the function
if ( ImageWidth == '' || typeof( ImageWidth ) == "undefined" ) {
// If no image width was passed - preload the image then grab the width
value from the preloaded image
theImage = new Image();
theImage.src = ImageSource;
ImageWidth = theImage.width;
}
// See if we need to dynamically grab the Image width dimensions if none
were passed in the function
if ( ImageHeight == '' || typeof( ImageHeight ) == "undefined" ) {
ImageHeight = theImage.height;
}
/*
2. CALCULATE CENTERING VALUES FOR THE POPUP WINDOW
*/
// I think this works in NS6+ & Mozilla )!
if (document.all) {
var xMax = screen.width;
var yMax = screen.height;
}
else {
if (document.layers) {
var xMax = window.outerWidth;
var yMax = window.outerHeight;
}
else {
var xMax = 640;
var yMax = 480;
}
}
xOffset = (xMax - ImageWidth) / 2;
yOffset = (yMax - ImageHeight) / 2;
/*
3. SETUP POPUP WINDOW VALUES
*/
/* Set the various features for the preview window - width, height,
titlebar etc. */
var popupFeatures =
'width=' + ImageWidth +
',height=' + ImageHeight +
',screenX=' + xOffset +
',screenY=' + yOffset +
',top=' + yOffset +
',left=' + xOffset
/*
4. CREATE AND OPEN THE POPUP WINDOW
*/
popupWindow = window.open('', PopupTitle,popupFeatures);
// Set the window opener
if ( popupWindow.opener == null ) {
popupWindow.opener = self;
}
popupWindow.focus();
/*
5. WRITE THE ACTUAL IMAGE TO THE POPUP WINDOW
*/
// Create the default HTML content for the popup window
var popupContent = ""
popupContent += "\n<html><head><title>" + ImageTitle + "</title><meta
http-equiv='Content-Type' content='text/html; charset=iso-8859-1'></head>"
popupContent += "\n<body style='margin: 0px; padding: 0px;'>" // Need to
make sure the <body> has no padding or margin or the image will be
off-kilter
popupContent += "\n<div align='center'>"
popupContent += "<img id='popupimage'>" // This is the <img> that we
replace the src, width & height (see below)
popupContent += "</div>"
popupContent += "\n</body>"
popupContent += "\n</html>"
popupWindow.document.write( popupContent )
popupWindow.document.close()
// Now write the data for the image (src, width & height)
oPopupImg = popupWindow.document.getElementById('popupimage'); // Create
an object reference to the <img> in the popup window
oPopupImg.src = ImageSource; // Replace the source
oPopupImg.width = ImageWidth;
oPopupImg.height = ImageHeight;
}
</script>
</head>
<body>
<h1>Image Popup Test</h1>
<input type="button" name="view" value="view" onclick="imagePopup(
'http://www.mystudios.com/art/impress/monet/monet-wheat-field-1881.jpg' )"/>
</body>
</html>
