====== 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&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 ''<nowiki>{{zoom>demo.jpg?500}}</nowiki>'', 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// <file>
$ 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']);
</file>

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