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.

About these ads

About Soumyadip

Soumyadip Choudhury aka Somu aka Chaiwallah is an internet addict. His wife and family suspect that he is secretly married to his laptop. The electric shock that he got while trying to fix a neighbour's TV set as a kid, perhaps ignited his interest in everything tech. A do-it-yourself guy, he doesn't believe in hiring electricians, plumbers or carpenters. But often ends paying the professionals more to fix his botched jobs. Somu secretly wishes he knew how to code and also grumbles a lot.
This entry was posted in Uncategorized. Bookmark the permalink.

17 Responses to Blogger Hack: Make Original Images Open in Popup Window

  1. Siavash says:

    just what I needed man thx

  2. Soumyadip says:

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

  3. northpine says:

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

  4. Anonymous says:

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

  5. rjl says:

    This is perfect! Thank you!

  6. mdg says:

    perfect! thank ya much :D

  7. Marie Digby Vlog says:

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

  8. Marie Digby Vlog says:

    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!

  9. Soumyadip says:

    <>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

  10. Anonymous says:

    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.

  11. Anonymous says:

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

  12. Pam says:

    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?

  13. Soumyadip says:

    <>@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.

  14. surya says:

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

  15. vic says:

    thanks for this! implementing it on my site now! :D

  16. Anonymous says:

    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!

  17. Aboveoeuf says:

    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/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s