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.

Thumbnail

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.

4 thoughts on “Neat Pop-up Windows for Images”

  1. Hey Josh,

    I have a question for you. I read this and couldn’t find the Javascript file, could you please help me out?!

    Thanks! Your site is awesome!

  2. Hi Josh, thanks for publishing this, it is very useful for the site I am currently designing.

    I have seen some neat popup windows with a soft white surround, rounded corners and a Close X at the bottom right hand corner.

    Do you know where I might find the code for this type of window?

Leave a Reply

Your email address will not be published. Required fields are marked *