Article | Make Original Images Open in Popup Window

This is just an additional little feature that looks and feels a little better than the existing. All you bloggers on blogspot would have surely noticed that when you upload any image to Blogger, it gives you three size options to display the image in - large, medium and small - and at the same time the original sized image is accessible to users when they click on the image displayed on a post. But then it opens in the same window and thereby navigates your reader away from your blog. And easy way would be to use the attribute target="_blank" within the anchor tag, so that when clicked the image would open in a new window. But why not add a little frill and make the image open in a popup window. I'm doing this on this blog, for the want of a better alternative (tried using Lightbox but the results were not satisfactory on slow connections). Here's how:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gJIh74gJUCSLR2QWDY42YcGTpBzuNII4OCN_4QYtMGGHkQXblIG43f2G7bueKKrq5MSwxIjpty2eXEdJHlbPLZHXNWi0IecSvAgXRvcaiDfM1J6ndBmt9lHmtw4YDDkRW3vHADZeEuno/s1600-h/blogger_logo_huge.gif"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gJIh74gJUCSLR2QWDY42YcGTpBzuNII4OCN_4QYtMGGHkQXblIG43f2G7bueKKrq5MSwxIjpty2eXEdJHlbPLZHXNWi0IecSvAgXRvcaiDfM1J6ndBmt9lHmtw4YDDkRW3vHADZeEuno/s320/blogger_logo_huge.gif" border="0" alt="" id="BLOGGER_PHOTO_ID_5170939976712216034" /></a>

This blob of HTML might look a little different if you're using Internet Explorer. But that doesn't make any difference to our process. All you need to do is insert this bit of script:

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. The result will look something like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gJIh74gJUCSLR2QWDY42YcGTpBzuNII4OCN_4QYtMGGHkQXblIG43f2G7bueKKrq5MSwxIjpty2eXEdJHlbPLZHXNWi0IecSvAgXRvcaiDfM1J6ndBmt9lHmtw4YDDkRW3vHADZeEuno/s1600-h/blogger_logo_huge.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 style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gJIh74gJUCSLR2QWDY42YcGTpBzuNII4OCN_4QYtMGGHkQXblIG43f2G7bueKKrq5MSwxIjpty2eXEdJHlbPLZHXNWi0IecSvAgXRvcaiDfM1J6ndBmt9lHmtw4YDDkRW3vHADZeEuno/s320/blogger_logo_huge.gif" border="0" alt="" id="BLOGGER_PHOTO_ID_5170939976712216034" /></a>

Now let me explain the elements: the target="_blank" makes the link open in a new window width=520, height=520 defines the size of the pop-up window. Ideally you should keep this greater (by 10 to 20 pixels) than the original image dimensions so that it displays properly across browsers. 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 and fancies. For a demo click on the accompanying Blogger logo. For others who might need yet more cusromisation, 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. The numerical value can be changed to suit individual requirements. Since I'm a novice when it comes to these things and would like more able members of the blogging community to further develop the idea.

Loading...