Image Zoomer Plugin

16th Mar 2010 | Posted by Eko S. | 42 Comments

Hi, today we glad to release a new plugin “Image Zoomer”. Image zoomer is jQuery zoom tool. The plugin gives any image on your page the ability to be magnified when the mouse rolls over it. The square effect uses a “magnifying glass” that appears over the image lets the user zoom in to show close-up detail of the image.

Image-Zoomer-Plugin-cover

Features

Easy – Just upload and activate the plugin.
Customize – The default zoom level (ie: 2x) and The default size of the “magnifier” (ie: 75×75) can be changed.
When the user scrolls the mouse wheel while over the image, the zoom level decreases or increases based on the scroll direction. The range of zoom can be changed (ie: 1x to 10x).

Demo

Please hover this image and try to scoll up or down.

Download

zoomer.zip (3.7 KiB, 506 hits)

Rating: 7.8/10 (9 votes cast)

Installation Guide

Download the plugin (see “Download” link above).
Decompress the .zip archive and put the “zoomer.php” file into your plugins directory (/wp-content/plugins/).
Or the other way, with your wordpress admin page > Plugins > Add New then choose upload on the top. Next choose File (.zip) then Install Now
Activate the plugin in the WordPress Plugins admin page.

Question and Answer

imagezoomer-panel

How to change the default zoom level?
In your wordpress admin page > Settings > Image Zoomer, fill the form “Zoomer default power” with an integer greater or equal to 1.
How to change the size of the “magnifier”?
In your wordpress admin page > Settings > Image Zoomer, fill the form “Zoomer dimensions” with an integer, the default is 75 means 75×75.
I want only certain images can be enlarged while others don’t, how?
The default settings is your image will be zoomer all, but if you only want some of your image can be zoomer you can do it.
First go to image zoomer settings panel “Settings > Image Zoomer”, check with “no” in Option “Zoom all image”. Then open a post that have image you want to zoom.
In HTML editor find an image you want to zoome, than add “dwzoom” (without the quotes) to the class of image.
For practical example :
Before… (click for enlarge)

After adding “dwzoom” class (click for enlarge)

Version History and Changelog

1.0 (2010-03-16)
Initial Release

Credits

The plugin is based Image Power Zoomer by Dynamic Drive.

29 Comments to “Image Zoomer Plugin”

Add Comments (+)

Melvis Leon says:

March 16, 2010 at 23:44

Great plugin, I was looking for this feature. Do you add i18n to the plugin?

Reply
David Lee Y S says:

March 17, 2010 at 07:37

Great plugin but it doesn’t seem to work on my blog…how?

Reply
- reza says:
  
  March 17, 2010 at 09:06
  
  I see your site has alot javascript.
  
  Maybe the plugin javascript conflicts with other script
  
  Sorry, We can’t help You
  
  Reply
Mark says:

March 17, 2010 at 10:07

Hey guys. I tested this plug-in out and I have to say that it’s really limited. The hover parameters don’t cover a lot of area.

Reply
- Eko S. says:
  
  March 17, 2010 at 22:07
  
  Emm…if you mean the size of magnifier area? You can change the size in plugin options panel…the size is in pixels, and it’s size is unlimited.
  
  regards
  
  Reply
mgamboa says:

March 17, 2010 at 16:05

It´s don´t work in my website. My wp version is 2.9.2 portuguese, Brasil. Do you help me? Sorry for my bad english!

Reply
- reza says:
  
  March 17, 2010 at 22:11
  
  Similar to David Lee Y S above, seems that because conflict with other js.
  
  Sorry, We can’t help you
  
  Reply
V.C says:

March 21, 2010 at 22:09

Your plugin seems to be very useful for those who want to build photo gallery sites. One cannot deny is it’s so tiny and easy to use.

Reply
trees says:

March 29, 2010 at 21:51

Heya from Norway! I have found your post on google. Amazing content! Angela S. King x

Reply
cna training says:

March 30, 2010 at 04:15

Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!

Reply
raiderhost says:

April 6, 2010 at 11:38

siap dicoba gan !

great plugin magnifier

Reply
Pavan Somu says:

April 22, 2010 at 01:42

Nice plugin for those who maintain photo gallery.

Reply
azaxs says:

May 3, 2010 at 21:41

great job! I like it!
4 thumbs for U!

Reply
JohannesPeris says:

May 15, 2010 at 11:46

Hey,
i love your plugin. Great work.

BUT i have two questions:
1. Can i disable the cursor in the zoomframe?
2. I don`t want an quadrat zoom frame. Can i change the relation from width to height?!

Reply
- reza says:
  
  May 15, 2010 at 23:17
  
  hi there
  
  glad you like it
  
  1. yup, open zoomer.php file, find this line
  
  powerrange:[1,10]
  
  change it to powerrange:[2,2]
  
  if you want to zooming power fix at 2times
  
  2. find this line
  
  magnifiersize:[$newzoomersize, $newzoomersize]
  
  change it to magnifiersize:[200,100]
  
  if you want a 100x200px zoom frame
  
  hope this helps
  
  Reply
  - JohannesPeris says:
    
    May 16, 2010 at 05:00
    
    Hey,
    thanks for ou fast reply.
    
    But your first change “powerrange” only controls the zoom. I wanr do disable the cursor! The little arrow.
    
    http://n79.org/wp-content/uploads/2008/03/cursor-white.png
    
    BIG THANKS!
  - reza says:
    
    May 16, 2010 at 18:11
    
    uhm, seemed i missunderstood your post
    
    in zoom.php
    
    find this:
    
    var magnifier=$(‘<div style=\”position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;\” />’)
    
    add a class to that div
    
    for example,
    
    var magnifier=$(‘<div class=”dwzoomdiv” style=\”position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;\” />’)
    
    and then add this to your theme style.css,
    
    div.dwzoomdiv {cursor: none;}
JohannesPeris says:

May 16, 2010 at 21:56

Hey,
it doesn’t work,

i added “class=”dwzoomdiv” in the zoomer.php.

And added the lines in my them syle.css

#dwzoomdiv {
cursor: none;
}

…. *SAD*…please help me one more time!

Reply
- reza says:
  
  May 16, 2010 at 23:58
  
  re-write class=”dwzoomdiv” in zoomer.php
  
  dont copy-paste it
  
  Reply
  - JohannesPeris says:
    
    May 17, 2010 at 07:29
    
    Sorry if i bistub you.
    
    I added this in my style.css:
    #dwzoomdiv {
    cursor: crosshair;
    }
    
    and wrote this in my zoomer.php: (Line 141)
    var magnifier=$(”)
    
    And the this come:
    Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /homepages/22/d277562000/htdocs/johannesperis/wp-content/plugins/zoomer.php on line 141
  - JohannesPeris says:
    
    May 17, 2010 at 07:31
    
    Srooy:
    Line 141
    
    var magnifier=$(”)
  - JohannesPeris says:
    
    May 17, 2010 at 07:32
    
    Can´t add the whole line 141!
    
    var magnifier=$(‘<div class="dwzoomdiv"
  - reza says:
    
    May 17, 2010 at 12:35
    
    uninstall and the re-install the plugin i send to your email
    
    this is what you should add to style.css
    div.dwzoomdiv{cursor: none;}
JohannesPeris says:

May 17, 2010 at 12:50

YEEEHA!

Great big mega THANKS!

Reply
Lalo Marquez says:

June 1, 2010 at 01:05

In my theme the magnifying square appears under the image, instead of over the image, does anybody else has this problem too? Thank you! Ed.

Reply
- reza says:
  
  June 1, 2010 at 02:12
  
  there’s problem with your css file
  
  but all could be fixed
  
  open zoomer.php file of the plugin:
  
  find this:
  
  var magnifier=$ ( ‘< div style=”position: absolute; ….bla bla bla
  
  add z-index to that style:
  
  var magnifier=$ ( ‘< div style=” z-index: 12; position:absolute;
  
  save the change
  
  hope this help
  
  Best Regards
  
  Reply
  - Lalo Marquez says:
    
    June 1, 2010 at 02:21
    
    Reza, you’re the man! It’s working perfectly now, thank you!!
James says:

June 26, 2010 at 03:50

Hey there,
What a great plugin – I love it! I was wondering if there was a way to use the zoom on top of images displayed with Shadowbox or a lightbox type javascript rather than just images within the post?
Cheers,
J

Reply
dNoxs says:

July 12, 2010 at 15:57

Woww Great Plugin, I will try this plugin

Reply