Zoom Plugin

Not downloadable

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

You can download the older version with included jQuery pre-Angua-Version (Anteater, Rincewind) here: pre-Angua-Version

This plugin makes images zoomable. As soon as the mouse is over the image, the zooming will start. The plugin uses jQuery and cloud zoom.

See the plugin in action Demo.

The usage is similar to the image syntax, just prefix your image with zoom> and give the size of the wanted thumbnail. E.g.:

{{zoom>demo.jpg?500x200}}

You can align the image using spaces and '*' (no align is default).

Right align without word-wrapping:

{{zoom> demo.jpg?500x200}}

Left align without word-wrapping:

{{zoom>demo.jpg?500x200 }}

Center align without word-wrapping:

{{zoom> demo.jpg?500x200 }}  

Left align with word-wrapping:

{{zoom>demo.jpg?500x200*}}  

Right align with word-wrapping:

{{zoom>*demo.jpg?500x200}} 

It's possible to only specify the width or height of the image. The missing size will be calculated automatically considering the ratio:

Only width:

{{zoom>demo.jpg?500}}

Only height:

{{zoom>demo.jpg?x300}}

The zoomed image can be dragged with the mouse.

Additional parameters can be used. Those are simply attached after the size-information using '&'. E.g:

{{zoom>komfortmodul300.jpg?300x100&position:'right',tint:'#cccccc'}}

Used to define the position of the zoomed windows. The following values can be used (please don't forget to use '…' !)

• 'left'
• 'right'
• 'top'
• 'bottom'
• 'inside' (default)

Defines the width of the zoomed window. Default: auto (=width of the thumb)

Defines the height of the zoomed window. Default: auto (=height of the thumb)

Defines the position offset of the zoomed windows. Pos. and negative values are allowed

Defines the position offset of the zoomed windows. Pos. and negative values are allowed

Defines the color to cover the thumbnail with. Please use HEX-format (please don't forget to use '…' !). E.g.:

{{zoom>:komfortmodul300.jpg?300&position:'right',tint:'#CCCCCC' }}

Defines the opacity of the color which covers the thumbnail. Allowed values: from 0 (full opacity) to 1 (no opacity). Default: 0.5

Defines the opacity of the lens/magnifier. Allowed values: from 0 (full opacity) to 1 (no opacity). Default: 0.5. E.g.:

{{zoom>:komfortmodul300.jpg?300&position:'right',lensOpacity:0.8 }}

Blures the thumbnail. True or false. Default: false. No useable together with tint!

{{zoom>:komfortmodul300.jpg?300&position:'right',softFocus:true }}

Defines the softness of the move. 1 = no softness, default: 3. Higher values give more softness.

{{zoom>:komfortmodul300.jpg?300&position:'right',smoothMove:1 }}

Basic syntax:

{{zoom>file?widthxheight&parameters}}

• 2011-02-24
  • Initial release
• 2012-04-16
  • Changed for compatibility with Angua which already includes jQuery

I like this plugin very much. Great work! One suggestion: for me it would be much more easy if there was the possibility to put only one zoom-syntax on a wikipage to change all the images/thumbnails on that page to that command. Is that possible? - Jeroen Bekkers

Thank you for this nice plugin. I would like an extra possibility to zoom simply to fullsize. In the moment I have to configure the special dimensions for each image separately. Any ideas - Matthias

Hello all. I could not get this to work. Using Release 2012-10-13 “Adora Belle”. - Senthil 2/12/13

Hi. In my case, zoom plugin release 2012-04-16 worked fine with “Adora Belle” but not DokuWiki 2013-05-10 “Weatherwax”. I wrote Wiki source such as {{zoom>demo.jpg?500}}, it failed with “loading image” message only. Following fix has solved this issue at least for me. I do not know detail, however, just report here hoping to be help for someone. — s.sahara 2013-05-18

$ diff syntax-zoom-2012-04-16.php syntax.php
126c126
<                               $data['width'] = $match[1]*$data['imageWidth']/$data['imageHeight'];
---
>                               $data['width'] = round($match[1]*$data['imageWidth']/$data['imageHeight']);
130c130
<                               $data['height'] = $match[1]*$data['imageHeight']/$data['imageWidth'];
---
>                               $data['height'] = round($match[1]*$data['imageHeight']/$data['imageWidth']);

Hi, it works fine for me, too with “Weatherwax”. — Juergen 2013-06-24

It work with 2013-12-08 “Binky” but without parameters (width and height parameters failed to load image). Bug with Lightbox v2 because it's on top of the popup image.

I created a GitHub repository based on the code here and applied the patch above for Weatherwax. For usual installation via Plugin manager, use this Zipfile URL.

I also implemented support for external URLs (I needed Google Drawings…), thus the option marker, which separates the file or the URL from the parameters, was changed from ? to |, for example:

 {{zoom>file-or-url-with-question-marks|widthxheight&parameters}}