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.

JoshStauffer.com runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Become a StudioPress affiliate

Comments

  1. Dringuesser says:

    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. Josh Stauffer says:

    Ah yes, there is now a link to the file. Thanks for the reminder.

  3. Jill Barnes says:

    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?

Speak Your Mind

*