Make Images open in a new 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://1.bp.blogspot.com/_aVNcsyOiljE/TM5_vMwRj5I/AAAAAAAAAqs/zj41EI6eGPM/s1600/2.JPG"><img alt="Krishnaa Zone Logo" border="0" src="http://1.bp.blogspot.com/_aVNcsyOiljE/TM5_vMwRj5I/AAAAAAAAAqs/zj41EI6eGPM/s1600/2.JPG" title="Krishnaa Zone Logo" /></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://1.bp.blogspot.com/_aVNcsyOiljE/TM5_vMwRj5I/AAAAAAAAAqs/zj41EI6eGPM/s1600/2.JPG" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;" target="_blank"><img alt="Krishnaa Zone Logo" border="0" src="http://1.bp.blogspot.com/_aVNcsyOiljE/TM5_vMwRj5I/AAAAAAAAAqs/zj41EI6eGPM/s1600/2.JPG" title="Krishnaa Zone Logo" /></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 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;"

Previous Post Next Post