Turn Thumbnail Pictures Into Popups

When you are blogging it helps to break up your text with a thumbnail picture or two. You don’t want to use full size pictures as most blog home pages displays 10 posts and you will end up slowing down your home page load.

Here is an easy way to make your thumbnail picture clickable into popups that won’t take the reader off the page.

Add the following javascript code at the top of your blog post.

<script type=”text/javascript” language=”javascript”>
function OpenPopup (c) {
window.open(c,’window’,'width=500,height=500,scrollbars=yes,status=yes’);
}
</script>

Then add onclick=”OpenPopup(this.href); return false” to the img tag.

Here is example code for a popup thumbnail picture.

<a href=”http://morechristlike.com/blog/wp-content/uploads/2011/03/pop-up.jpg” onclick=”OpenPopup(this.href); return false”><img src=”http://morechristlike.com/blog/wp-content/uploads/2011/03/pop-up-150×150.jpg” alt=”Pop-Up” title=”Pop-Up” width=”150″ height=”150″ /></a>

Here is example of a popup thumbnail picture. Click on the picture and see how it pops up in a new window.