Zoom Image - (Greasemonkey) User Script

Zoom Image is small user script I originally wrote back in 2005 for Greasemonkey and Opera but nowadays Chrome (out of the box) and Safari (through GreaseKit) users could use it too. The basic idea is pretty simple - the script displays a small toolbar with some buttons in the top left corner of any image when you hover it allowing easily to zoom in/out just the image without the need to zoom the whole page.

It may seem a pretty insignificant addition to your browser's features at first sight but, at least for me, it has proven to be a really handy one and I have not stopped using it in my main browser (Opera) since I first wrote it. BTW, the original version of the script was featured in Mark Pilgrim's Greasemonkey Hacks book which means at least one other user found it useful. :)

Anyway, I am now publishing v2.0 which brings some nice improvements over the previous release. Here is a quick introduction video:

What's new in v2.0

  • you can now even easier zoom in/out the image by using the mouse wheel too - just hover the toolbar (any button) and use the mouse wheel (if you have one, that is :P)
  • rewritten OO code allowing easily to add more custom buttons
  • improved look (arguably) of the menu/buttons including light and dark style
  • added optional show fade-in animation - disabled by default as it might become obtrusive over time (at least for me it does)

User Configuration

The script includes the following options which you could tweak to your liking:

zoomFactorClick = 1.5,		// zoom in/out by this factor each time
zoomFactorMouseWheel = 1.2,	// just hover the toolbar (any button) and use the wheel
showTimeout = 1.2,		// seconds
minimalImageWidth = 60,		// minimal width of the images the toolbar is activated for
minimalImageHeight = 50,	// minimal height of the images the toolbar is activated for
opacity = 0.80,			// opacity for the toolbar
fade = false,			// use fade animation when showing the toolbar
darkStyle = false,		// use dark style for the toolbar
zIndexFix = true;		// try to keep the zoomed image on top of other elements on the page

Adding More Custom Buttons

As mentioned, the script is now rewritten and allows more easily adding custom buttons to the toolbar. You can create a custom button like this:

var myButton = new Button(name, className, title, contentHTML, handlers);

And then append it to the toolbar like this:

zoomToolbar.addButton(myButton);

Example: Adding an "open" button

Here is a quick example how to add an "open" button which when clicked, loads the image in a new blank browser window:

var openButton = new Button('openButton', 'text-button', 'Open Image in New Window', 'open', {
	click: function() {
		window.open(image.src);
		zoomToolbar.hide();
	}
});
zoomToolbar.addButton(openButton);

I have added this button at the end of the Zoom Image code as well as another button "size" which when clicked reports the original dimensions of the image in a JavaScript alert popup. These buttons are disabled by default (the code is commented out) but you could enable them if you like.

Download / Install

Here is a direct link to the latest version available in the code repository:

http://github.com/vadikom/zoom-image/raw/master/zoom-image.user.js

The code is hosted on GitHub:

git clone git://github.com/vadikom/zoom-image.git

Liked this post?

Don't wait & subscribe to RSS or email updates now.
Quick Tip: Sharing is also easy with the share menu below. :)

Comments:

  • You can certainly see your enthusiasm in the work you write.
    The arena hopes for even more passionate writers like you who are not afraid to mention how they believe.

    All the time follow your heart.

    #10 by: ทัวร์สิงคโปร์ on July 21, 2014 at 09:44
  • Thanks for every other great post. Where else may anyone
    get that type of info in such an ideal method of writing?

    I have a presentation next week, and I'm on the look for such info.

    #9 by: fifa 14 ultimate team hack on July 16, 2014 at 11:17
  • Have you ever thought about writing an e-book or guest authoring on other
    sites? I have a blog based upon on the same topics you discuss and would really like to have you share some stories/information. I know my readers would enjoy your work.

    If you are even remotely interested, feel free to shoot me an e-mail.

    #8 by: trening na mase i redukcje on July 13, 2014 at 02:47
  • I am really loving the theme/design of your web site.
    Do you ever run into any web browser compatibility issues?
    A few of my blog audience have complained about my website not working correctly in Explorer but looks great in Opera.
    Do you have any solutions to help fix this issue?

    #7 by: Laurene on July 10, 2014 at 10:37
  • Great blog here! Also your site loads up very fast! What web host are you using?
    Can I get your affiliate link to your host? I wish my website loaded up
    as quickly as yours lol

    #6 by: ทัวร์ฮ่องกง on July 10, 2014 at 06:56
  • Woah! I'm really digging the template/theme of this blog.
    It's simple, yet effective. A lot of times it's very difficult to get that "perfect balance" between superb usability
    and visual appearance. I must say you have done a superb job with this.

    Also, the blog loads super quick for me on Firefox.
    Superb Blog!

    #5 by: ชุดไปงานแต่ง on July 9, 2014 at 15:23
  • My developer is trying to persuade me to move to .net from PHP.
    I have always disliked the idea because of the costs.
    But he's tryiong none the less. I've been using WordPress on a variety
    of websites for about a year and am nervous about switching to another platform.
    I have heard very good things about blogengine.net.
    Is there a way I can transfer all my wordpress content into it?
    Any help would be really appreciated!

    #4 by: trenowanie na zewnatrz on July 9, 2014 at 02:34
  • Thhis is my first time pay a visit at here and
    i am truly impressed to read all at single place.

    #3 by: dentist non stop bucuresti sector 3 on July 7, 2014 at 11:50
  • Ні, I log onn tо your new stuhff daily. Your writing style іs witty,
    kee սp thе good wοrk!

    #2 by: dezmembrari vw on June 29, 2014 at 08:31
  • v2.0 is post text: "size" in to comments in http://extendopera.org/ and in many other sites...
    see http://extendopera.org/userjs/content/enhanced-image-sizer - for example ...

    #1 by: RX-3200 on February 23, 2011 at 20:57

Post a Comment: