Table of Contents
Zoom Plugin
Compatible with DokuWiki
Anteater, Rincewind, Angua, Adora Belle
This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.
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¶meters}}
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¶meters}}