O'Reilly

MooTools Zoomer Plugin

By on  

MooTools Image Zoom

I love to look around the MooTools Forge. As someone that creates lots of plugins, I get a lot of joy out of seeing what other developers are creating and possibly even how I could improve them. One great plugin I've found is Zoomer by Anton Samoylov. Zoomer provides an elegant method for zooming in on large images.

The HTML

<img src="cricci.jpg" alt="Muse: Christina Ricci" big="cricci-large.jpg" id="ricci" />

Note the big attribute within the image is where the you place the path to the larger image. This is the default usage of the plugin -- you may also provide the path to the larger image within the plugin instance options object.

The MooTools JavaScript

window.addEvent('domready',function() {
	new Zoomer('ricci',{ 
		smooth: 10/*,
		big: 'cricci-large.jpg' */
	});
});

Using Zoomer is as easy as the code above -- simply provide the ID of the image and the custom smooth setting. As mentioned above, you may also define the larger image path within the instance.

Sweet huh? My praise goes out to Anton for his excellent plugin. I love how easy this plugin is to implement. Remember though -- Zoomer is just one of hundreds of quality plugins in the MooTools Forge. Are your plugins in the Forge?

Track.js Error Reporting

Recent Features

  • 5 More HTML5 APIs You DidnâÄôt Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...

  • Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The...

Discussion

  1. doxe

    Great & useful plugin !
    Is there any chance to have an equivalent plugin working with jQuery ?

  2. Thats really neat!

  3. very very neat, nice fade effect when you mouseout. Nice Anton Samoylov and DW, MT FTW!

  4. very nice effect

  5. Awesome indeed!

  6. olivier

    Nice, I like this effect much better than the usual zoom effect with a small zoom box on top the the original image

  7. deef

    smooth effect, though I think you should be adding a CR-category by now…

  8. hamburger

    Hello David,
    thats really gorgeous.
    May be you can show us how this works with your nina ricci slide-show.

  9. way to go…. I must want to include/use it on my photography site

  10. quote doxe, exist plug-in jquery? :)

  11. Hello David,

    Nice script!

    Just a tiny comment on mouse events :)

    From usability point of view, i believe it will be better to disable click and drag when you mouse over to zoom.

    Usually people are not getting into the meaning of new type of cursor, so they click and often click and drag.

    In you script when you mouse over and click, so the thumb appears over the large(zoomed) image.

    Here is a screen-shot http://i.imgur.com/PSjLJ.jpg

    I believe what you have created is greater than what i have written here and it’s maybe not important but it’s definitely usable.

    T4A
    Keep up the good work!

  12. @moro: hi, work with mozilla firefox, don’t work with internet explorer 7 :(

  13. fixed ________________

  14. thanks :) very good work!!

  15. hnal

    Hi there, is there a way to change the big image via javascript ? I’m trying to build a gallery with the picture+zoom capabilities and thumbnails. But I can only change the src picture.

    This is not working :

    function changepics(ref)
    {

    document.getElementById(‘zoom’).src = ref;
    document.getElementById(‘zoom’).setAttribute(‘big’,ref);
    new Zoomer(‘zoom’, {big: ref ,smooth: 10});
    }

    thanks,
    hnal

  16. Samarjit Sen

    Very cool and attactive

  17. Samarjit Sen

    Very cool and effective

  18. luki

    @hnal:

    I have same problem… Have you found solution?

  19. hnal

    @luki:

    Hello, i’m still stuck with that issue. Nom i’m trying to reload the entire page when someone click on a thumbnail..

    And you ?

    • it’s my way. Hope will get help.
      1. keep the reference of the Zoomer instance.

      var imgZoom =  new Zoomer('mainImage');
      

      2.when you want to change the big picture, do this.

      imgZoom.big.set('src','path of your new big picture');
    • hnal

      Thanks for the reply! I tried your solution but I couldn’t make it work! Do you have a full exemple where it is working?

  20. guest

    great plugin!!!
    Could you change a picture for demo?
    It scare me… …

    • Try this:

      var imgZoom = new Zoomer('mainImage');
      imgZoom.big.set('src','path of your new big picture');
  21. Have an problem with this plugin, i work on rails 2.3.8 and this plugin re-submit the current page with id => ” _” … And cause an Active RecordNotFound :-/

  22. I also have similar problem, when using with prettyphoto – jquery lightbox alternative, background set as (_), applied in inline style causing problem, error and zooming doesn’t work at all.

    Pls check at this url:
    http://projects.xcellence-it.com/rahulraj-prettyphoto-zoomer/

    And mouse hover on first/top project box, which will open slider, and click on Location Plan. This open iframe where zoomer is implemented.

    Zooming sometimes work and sometimes not in FF.

    And in IE, it works only for the first time.

    Please help us how to fix this…

    Regards
    Krunal

  23. Just an update that I’m not using Rail. Mine was only pure xhtml project. But this has caused error and hence zoomer doesn’t work when using prettyphoto iframe.

  24. Martin

    very nice. would that also work with image maps in the larger image?

  25. michaela

    Hi!

    Very nice! I like it!

    And so I’ve used it!

    But somehow it’s not working properly:
    In Mozilla Firefox it’s perfect but on IE only when viewed on my PC at home. When I upload it on the server and look at it with IE, the enlarged picture is vertically twisted.

    I have no idea why???

    I’m thankfull for any ideas

  26. Kasimir

    Perhaps worth noting: the Zoomer plugin does not work 100% with the latest MooTools 1.3 release (I’ve tried with Zoomer 1.9.3., which is the newest I could find).
    However, the fix for this is tiny:

    Line 149:
    $clear(this.timer);

    should be:

    clearTimeout(this.timer);

    $clear has been deprecated, causing the stopZoom function to stop working, therefore the picture stayed zoomed.

  27. Alpinyo

    Hy David!
    Is there a way to have multiple images with zoom on one page without to have for every id or every new image a nev zoomer ? Just one class for every image.
    ex.

    new Zoomer('.multipleimg');

    Thanks

    • Alpinyo

      Sorry!
      I am new so I wraped in :) the

    • Alpinyo

      Hy David!

      Is there a way to have multiple images with zoom on one page without to have for every id or every new image a nev zoomer ? Just one class for every image.
      ex.

      new Zoomer(‘.multipleimg’);

      img src=img1.jpg class=multipleimg big=img1big.jpg

      img src=img2.jpg class=brainstorm big=img2big.jpg

      etc…….
      Thanks again

      Sorry, I am posting again. I am new so please forgive my clumsiness. Maybe you could delete my older posts.

  28. ony image – one zoomer, iterate and create new Zoomer for each image.

    • Alpinyo

      Is there a way to iterate the java script code automatically every time a new image is added? (for the sake of easiness)

  29. Zenka

    Hello,

    i’am french, Greatulation for this script.
    I have a question please.

    It’s possible of change “id=”ricci” by the class=”ricci” ?

    i have a error her ==>

    initialize: function(element, options){
    this.setOptions(options);
    this.small = document.id(element);

    document.id .

    Please what the code for a class ?

    Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...