Free WordPress Plugin: Dynamicwp Image Zoomer

16th Mar 2010 | Posted by Eko S. | 114 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, 3,038 hits)

[starrater tpl=10]

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.

We provide complete collection of testking 640-822 questions, testking 642-813 dumps and testking 642-832 practice test so you will complete your certification on time.

97 Comments to “Free WordPress Plugin: Dynamicwp Image Zoomer”

Add Comments (+)

Coralitus says:

January 9, 2012 at 07:50

its working in WP 3.3.1, but not seems bug for scrolling zoom…

Reply
- g3no says:
  
  January 18, 2012 at 04:16
  
  doesn’t work for me don’t know why….
  
  Reply
Camren Cheline says:

January 16, 2012 at 14:44

HI,

Was wondering if there was a way or something in the works to make the zoom box a circle instead? Not sure if that was something that was being worked on. Thanks so much.

Reply
lindsey says:

March 9, 2012 at 13:13

zoom appears to be working correctly though the zoomed box appears below the original image…any ideas?

Reply
- lindsey says:
  
  March 9, 2012 at 14:10
  
  **update – i saw an older comment with the same issue. I tweeked the z-index (had to go up to 999) and the zoom displays nicely…..though in Chrome the zoom location is WAY off.. when the cursor is in the bottom 1/3 of the image the zoom displays the top 1/3. when the cursor is anywhere else on the image, the zoom won’t display at all.
  
  Reply
michael W says:

March 14, 2012 at 19:40

how did you get it to work in wordpress 3.3.1????

Reply
lindsey says:

March 15, 2012 at 09:41

Hello again-

the location of the zoom widow doesn’t correspond with the location of the cursor, it seems to be a browser compatibility issue as the issue is worse in Chrome than any other browser.

I’ve been looking in zoomer.php to find a way to change the coordinates of the zoom window and being a javascript novice i wasn’t able to find it. if anyone has any clues or ideas i’d really appreciate it!

thanks

Reply
Jules says:

March 15, 2012 at 16:13

Great plug-in!
I’d like to know if I can stop the zoom increase and decrease when I scroll the mouse wheel!

thanks

Reply
- Greg says:
  
  March 22, 2012 at 11:31
  
  Hi and congratulation for this app,
  I have a problem, it just zoom in but not zoom out. Any idea to change that?
  Example here: http://www.antic-deco-art-normandie.com/?p=115
  Best!
  
  Reply
- Greg says:
  
  March 22, 2012 at 11:44
  
  Your solution is to erase that bloc from the php code:
  
  magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function(e){ //bind mousewheel event to magnifier
  
  if (ddpowerzoomer.activeimage){
  
  var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
  
  if (delta<=-120){ //zoom out
  
  ddpowerzoomer.movemagnifier(e, false, \"out\")
  
  }
  
  else{ //zoom in
  
  ddpowerzoomer.movemagnifier(e, false, \"in\")
  
  }
  
  e.preventDefault()
  
  }
  
  })
  
  Reply
david says:

April 14, 2012 at 12:19

The website is still under construction, I’m using the image zoomer in the “Drawing and Acrylic” gallery
The problem is when I load a painting by clicking on the thumbnail I have to refresh/reload the page before the Image Zoomer will work.
Any ideas? Thanks for any help

David

Reply
Peter says:

May 1, 2012 at 11:58

to your plugin Image Zoomer I need mousedown version – example Grab from: http://www.jacklmoore.com/zoom

or version for iPod

thanks

Reply
davidjm says:

June 8, 2012 at 16:03

Hi, nice plugin, small problem.
Works ok in IE8, but in FireFox need to refresh before it’ll work.
Any ideas?
Thanks
David

Reply
Filt says:

August 11, 2012 at 02:16

Hello, thanks for your work. One little detail I don’t seem to be grasping:

The idea of zooming in (or magnifying) is to display a thumbnail or small image on the page, and a high-resolution one in the zoomed-in window (ie: two separate images). If the only thing done is just zooming in on the displayed image, as it is shown on this page, what you get to see in close-up are the ugly artifacts of the jpeg. How does this work out? Is there a way to display a low-res image, and use the zoom to see the detail on another, hi-res one?

Reply
davidjm says:

August 12, 2012 at 03:25

Hi Filt, Is <a target=”_blank” href=”rivka-aderet.com>this what you mean</a>?
Click one of the thumbnails to see a high resolution version with the zoomer plugin.

Reply
Filt says:

August 16, 2012 at 23:46

The goal, as I understand it, is to show more detail in the magnifying box, not a close-up of the pixels in the same image. Therefore, the “lens” should show detail of another, high-res image instead. The original Power Zoomer can receive and use a parameter, like this:

http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm#largeimage

Is there a way to do it with this plug-in?

Reply
davidjm says:

August 17, 2012 at 09:13

Maybe it’s the opposite, if you have a high res image you don’t see the details with normal res but when you use the zoomer plugin you can see more detail, it’s the same image just different resolution.

Reply
Filt says:

August 18, 2012 at 01:00

David, are you saying that the way is to just use ONE high resolution image image but force a thumbnail of it via “width / height” and let zoomer do the zooming? Most magnifiers (the original Powerzoomer also allows this) use two images, one for the thumbnail, and another, hi-res, to show on the magnified window.

Reply
steveathome says:

February 11, 2013 at 10:17

hi all,

am i missing something here?

im trying this out and it works great the only problem im having is that the images i want to enlarge also have links attached to them and this plug-in disables the link,

is there a way of keeping the link in the image or is this not possible?

thanks,

Reply