DD Script: Image Thumbnail Viewer II


3rd Party Merged Script: Auto-Sizing Image Popup Window Script from CodeLifter.com


What this does:

For design & layout purposes, I needed to offer visitors a larger version of the image that my thumbnail opened to. I could have just linked to the larger image with the built in linking functionality using the target attribute, but this was a bit more ugly than what I wanted. Instead, I wanted a popup window that fit to the dimensions of the image I was linking to.

I was able to accomplish this by merging the Image Thumbnail Viewer Script with the Auto-Sizing Image Popup Window Script from CodeLifter.com.

I take no credit for either script...I'm just showing how to make them work together in case someone else is trying to do something similar.

I'm new to javascript...so for all I know, there could be more efficient way to do this - but I wasn't able to find one when I needed it...so here you go:


Step 1:
Install Image Thumbnail Viewer II script as shown on the script's details page. Verify that you have it working.

Step 2:
Insert the following code for the auto-resizing popup window between the opening and closing <head> tags of your page (as instructed on the codelifter.com website):

Code:
<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 3:
Modify the following two sections of Thumbnail Image Viewer II Script as follows. I only showed the parts of the script that needed to be modified.

Modification 1: Changing Image locations and adding a 3rd array value
  1. Replace mediumphoto1.jpg in the code below with the location of your medium photo to display
  2. Replace originalphoto1.jpg in the code below with the location of the biggest photo that will popup in a new window
  3. Replace YourTitle1, YourTitle2, etc with your own window titles


Code:
var dynimages=new Array()
dynimages[0]=["mediumphoto1.jpg", "originalphoto1.jpg", "YourTitle1"]
dynimages[1]=["mediumphoto2.jpg", "originalphoto2.jpg", "YourTitle2"]
dynimages[2]=["mediumphoto3.jpg", "originalphoto3.jpg", "YourTitle3"]

Modification 4: Modify the function that writes out the linking code for the image as follows:

Code:
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="javascript:popImage(\''+theimg[1]+'\',\''+theimg[2]+'\')">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" />'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
That's about it. Now you should have a popup window that automatically resizes to the dimensions of the photo you were linking to.

I'd show you my working example...but I did it for an adult website...so I didn't think it would be wise to link to it here.