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:

  • I alwaays used to study ppost in news papers but now
    as I aam a user of net thedrefore from now I am
    using net for articles, thanks too web.

    #15 by: dentist non stop bucuresti sector 6 on August 16, 2014 at 08:17
  • Compare and contrast your choices to decide what will work best for
    your room and budget. The style of a well used movie theater can be carried out using the structural arranging as part of your room.
    Wine and beer is served on Saturdays and Sundays beginning when the Cinema opens its doors, which
    is generally at 11:30 a.

    Feel free to visit my web page - La Mort aux trousses sous-titres fr

    #14 by: La Mort aux trousses sous-titres fr on August 13, 2014 at 20:47
  • New Play Control Mario Power Tennis is a lot more fun to play and come back to time after
    time than Wii Sports Tennis, the control scheme works a lot better
    once you get a handle on how to make the shots, but it does have a
    higher learning curve for the finer shots, so some gamers may be turned off.
    But it all comes down to your racquet speed in the end.

    Read up on some tennis drills so that you can spend your time productively
    when on court.

    #13 by: game on August 13, 2014 at 03:50
  • Fantastic post however , I was wanting to know if
    you could write a litte more on this topic? I'd be very grateful if yyou could elaborate
    a lttle bbit more. Thanks!

    #12 by: Www.Iualora.Com on August 12, 2014 at 00:54
  • whoah this blog is fantastic i like studying your articles.
    Keep up the good work! You realize, lots of persons are looking
    round for this info, you could aid them greatly.

    #11 by: Fredric on August 10, 2014 at 19:11
  • 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