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:
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.
just what I needed man thx
ReplyDeleteSiavash: Glad to be of some help.
ReplyDeleteThanks so much, this really helped me out. Youre the best!!!
ReplyDeleteThank you SOOOOO much!!!
ReplyDeleteI searched so much, and your work finally helped me out!
Thank you again!
This is perfect! Thank you!
ReplyDeleteperfect! thank ya much :D
ReplyDeletethis what I am looking for, dude! you rock! ^^
ReplyDeleteoh, 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?
ReplyDeletethanks!
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.
ReplyDeleteAll 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>
Hello,
ReplyDeleteThank 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.
Cant say enough how grateful i am for this post - been googling like crazy for a simple solution! Thank you!
ReplyDeleteThis 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?
ReplyDelete@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.
ReplyDeleteThank you very much.... The comments also in pop up... GOOD
ReplyDeletethanks for this! implementing it on my site now! :D
ReplyDeleteThis 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;".
ReplyDeleteSorry for my english!
Thanks for the help!
I solved it in this way:
ReplyDeleteDelete -h in the href code 1600-h and this is the result on my blog:
http://aboveoeuf.blogspot.com/
ty it helped
ReplyDelete