DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:zoom

Zoom Plugin

Compatible with DokuWiki

Anteater, Rincewind, Angua, Adora Belle

plugin Makes images zoomable

Last updated on
2012-04-16
Provides
Syntax

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Tagged with images, zoom

Not downloadable

Installation

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

pre-Angua

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

Examples/Usage

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.

Parameters

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

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

position

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)

zoomWidth

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

zoomHeight

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

adjustX

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

adjustY

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

tint

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' }}

tintOpacity

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

lensOpacity

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 }}

softFocus

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

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

smoothMove

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

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

Syntax

Basic syntax:

{{zoom>file?widthxheight&parameters}}

Configuration and Settings

Development

Change Log

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

Known Bugs and Issues

ToDo/Wish List

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

Zoom to fullsize ?

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

FAQ

Discussion

Adora Belle & Weatherwax compatibility

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.

Somewhat improved version

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}}
plugin/zoom.txt · Last modified: 2019-10-25 10:30 by Dr-Yukon

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki