MooTools Zoomer Plugin

Discussion

1. doxe

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

   Thats really neat!
3. Fábio M. Costa

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

   very nice effect
5. Boris

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

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

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

    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

    jQuery port http://github.com/creaven/zoomer-jq/
13. francesco

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

    fixed ________________
15. francesco

    thanks :) very good work!!
16. 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
17. Samarjit Sen

    Very cool and attactive
18. Samarjit Sen

    Very cool and effective
19. luki

    @hnal:

    I have same problem… Have you found solution?
20. 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 ?
• kliffv

  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?
21. guest

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

  Try this:

  var imgZoom = new Zoomer('mainImage');
  imgZoom.big.set('src','path of your new big picture');
22. Zaphod BEEBLEBROX

    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 :-/
23. Xcellence-IT

    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
24. Xcellence-IT

    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.
25. Martin

    very nice. would that also work with image maps in the larger image?
26. 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
• michaela

  Sorry!

  Here the address of the problem:

  http://members.aon.at/rhomy/Homepage_ADEG_Kurt_Muellner/default.htm

  Thanks,
  michaela
27. 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.
28. 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.
29. moro

    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)
30. 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