Cutting the Chai has moved to a new domain: cuttingthechai.com.
You can get in touch with Soumyadip at www.soumyadip.com.

Monday, February 25, 2008

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.

18 Comments:

Siavash said...

just what I needed man thx

Soumyadip said...

Siavash: Glad to be of some help.

northpine said...

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

Anonymous said...

Thank you SOOOOO much!!!

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

rjl said...

This is perfect! Thank you!

mdg said...

perfect! thank ya much :D

Marie Digby Vlog said...

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

Marie Digby Vlog said...

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

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:

<a href="http://google.com" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;">This is Google</a>

Anonymous said...

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

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

Pam said...

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

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

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

kixvix said...

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

Anonymous said...

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

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/

Anonymous said...

ty it helped