Make Images open in a popup window

All you bloggers on blogspot ,you must have noticed that when you upload any image to blogger,blogger gives you three sizes (small ,medium ,large)and the original sized image is accessible to uses when they click on the image but the image opens in same window thus navigates your readers away from your blog.


One Nice way to avoid this is to use target="_blank" within your images anchor tag so that your images open in new window.But why not add a little frill and make the image open in a popup window.

Here,s an Example HTML code for any image

<a href="http://4.bp.blogspot.com/_nqp-0VCwy0c/S8rLH4xYSsI/AAAAAAAABEU/HjOWMTr_Y0Y/s1600/blogger_logo.gif""><img alt="Blogger Logo Grey" border="0" src="http://4.bp.blogspot.com/_nqp-0VCwy0c/S8rLH4xYSsI/AAAAAAAABEU/HjOWMTr_Y0Y/s320/blogger_logo.gif" title="Blogger Logo Grey " /></a>
What you have to do is ADD :

target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;

after the closing double quotes enclosing the url of the original image, but before the > tag.So that result will be like this-

<a href="http://4.bp.blogspot.com/_nqp-0VCwy0c/S8rLH4xYSsI/AAAAAAAABEU/HjOWMTr_Y0Y/s1600/blogger_logo.gif target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"><img alt="Blogger Logo Grey" border="0" src="http://4.bp.blogspot.com/_nqp-0VCwy0c/S8rLH4xYSsI/AAAAAAAABEU/HjOWMTr_Y0Y/s320/blogger_logo.gif" title="Blogger Logo Grey " /></a>

Let me Explain all the elements one by one.

width=520, height=520 Defines the size of the popup window

resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no are optional attributes, you can change their values to yes or no according to your needs

For demo click on the grey blogger logo (above) accompanying this post.

the target="_blank"  makes the link open in a new window

you can add the attributes top= and left= to define the position of the pop-up window

Here's an example:

    target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no, top=20, left=20,'); return false;"

This would make the window open with a displacement of 20 pixels from the top and left of the screen.
Values can be adjusted according to the requirement and will.

Like this article -you can view more of my posts on Images 

Previous post- Use Jquery to style your external Links
                        Image hovering by changing opacity