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).
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:
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.