Blogger Hack: Make Original Images Open in Popup Window

Blogger Logo HugeThis 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:

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.

  • Siavash

    just what I needed man thx

  • Soumyadip

    <>Siavash<>: Glad to be of some help.

  • northpine

    Thanks so much, this really helped me out. Youre the best!!!

  • Anonymous

    Thank you SOOOOO much!!!I searched so much, and your work finally helped me out!Thank you again!

  • rjl

    This is perfect! Thank you!

  • mdg

    perfect! thank ya much 😀

  • Marie Digby Vlog

    this what I am looking for, dude! you rock! ^^

  • Marie Digby Vlog

    oh, btw.. how can I alter the code to make a popup windows that will show a text and a link (ex: aaaaaaaaaaaaa, click here – url ); instead of a picture?thanks!

  • Soumyadip

    <>Marie Digby Vlog<>: Yes, that’s possible. You can see an example of that on the ‘Disclaimer & Privacy’ link at the bottom of the blog.All that you need to do is insert the code: target=”_blank” onclick=”window.open(this.href, ‘popupwindow’, ‘width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no’); return false;” within the opening a tag of the hyperlinked text.Example:This is Google

  • Anonymous

    Hello,Thank you for taking the time to explain this trick. Works fine and it’s easy to understand.Next step would be to “close on click” the pop up. I’m sure I’m not the only one that would like that. Any idea would sure be appreciated.

  • Anonymous

    Cant say enough how grateful i am for this post – been googling like crazy for a simple solution! Thank you!

  • Pam

    This is a fantastic code – my question is, how can I make it a default?? Will I have to type it in every single time I put in an image? There’s got to be a way to have this automatic. Is it in the template?

  • Soumyadip

    <>@Pam<>: I wish I knew how to do it. It would have been so much easier. But I think it is possible, let me play around a little. If successful will post about it.

  • surya

    Thank you very much…. The comments also in pop up… GOOD

  • vic

    thanks for this! implementing it on my site now! 😀

  • Anonymous

    This is very useful. But how can i center the image in the new window? I use this “target=”_blank” onclick=”window.open(this.href, ‘popupwindow’, ‘width=1024, height=900, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no, top=20, left=20,’); return false;”.
    Sorry for my english!
    Thanks for the help!

  • Aboveoeuf

    I solved it in this way:
    Delete -h in the href code 1600-h and this is the result on my blog:
    http://aboveoeuf.blogspot.com/