====== Zoom Plugin ======
---- plugin ----
description: Makes images zoomable
author : Heiko Hoebel
email : no email
type : syntax
lastupdate : 2012-04-16
compatible : Anteater, Rincewind, Angua, Adora Belle
depends :
conflicts :
similar :
tags : zoom, images
downloadurl: http://www.ib-hoebel.de/wiki/lib/exe/fetch.php?media=computer:zoom_plugin_2012_04_16.zip
bugtracker :
sourcerepo :
donationurl:
----
__**Not downloadable**__
===== Installation =====
Search and install the plugin using the [[plugin:extension|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: [[http://www.ib-hoebel.de/wiki/lib/exe/fetch.php?media=zoom_plugin_2011_02_24.zip|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 [[http://www.ib-hoebel.de/wiki/doku.php?id=computer:zoom_plugin|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. --- //[[user>s.sahara|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". --- //[[user>juergen|Juergen]] 2013-06-24//
>>> It work with 2013-12-08 "Binky" but without parameters (width and height parameters failed to load image). Bug with [[plugin:lightboxv2|Lightbox v2]] because it's on top of the popup image.
==== Somewhat improved version ====
I created a [[https://github.com/neiser/dokuwiki-zoom|GitHub repository]] based on the code here and applied the patch above for Weatherwax. For usual installation via Plugin manager, use this [[https://github.com/neiser/dokuwiki-zoom/archive/master.zip|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}}