Neat Pop-up Windows for Images

I have often considered myself to be a perfectionist since I spend much of my time fixing unnoticeable imperfections. Until recently I was using the javascript function window.open for some of my pop up images and had to guess at what the height and width arguments should be so that no white would show in the pop-up window. This quickly became very aggravating as I was adjusting these values by a few pixels each time then checking to see how it looked in IE6 and FireFox. Then I started using the window.resize function which automatically resizes the window after it has loaded to what ever values you specify. Well I have given up on those methods and I will share with you how you can too.

I swiped a javascript file one day while surfing the web and I use this script to create neat pop-up windows for images.

Place the code below into the head section of your page.

<script type="text/javascript" src="mosthumb.js"></script>

Then, use the following code in the body section to contruct your thumbnail links.

<a href="javascript:thumbWindow( ‘YourLargeImageHere’, ‘Pop-up Windows Title Goes Here’, 600, 400, 0, 1 );"><img src="YourSmallImageHere" width="150" height="100" alt="Picture Description" border="0" /></a>

Click on the thumbnail below for an example of this script in action.

Please note, I have slightly modified the original javascript file but do not take any credit for the creation of this script. You can download the javascript file here.