Plugin to zoom the images in Joomla articles

Middle Earth Map by Johnny Slowhand
I wanted to start developing my own plugins for the Joomla platform. I have to say, in Joomla, the plugins are the more easiest components to develop. Well, here is the result: I called the "Autozoom".


This plugin help to transform your images in a zoomables images items. I made almost all from scratch because I want to practice may Javascript and see how difficult was to do a plugin.


Download v. 1.0.0

Instructions
Once the plugin installed and enabled, simply add the attribute autozoom="true" always at the end of the image tag you want to convert it in a zoomable image.
Example

  <img src="/image.jpg" autozoom="true" /> 
If no other parameters were specified, it will use default values from plugin configuration.
All parameters / attributes of the plug are optional.

Known issues
- Maybe you have to deactivate the article filter in Joomla or disable the javascript editors (tinymce, etc ). If not, at the moment of saving the article, Joomla will clean the attribute "autozoom".
- One another I have to fix, the "autozoom" attribute must be placed as the last attribute in the img tag. If not, the won't work.


Parameters/Attributes
1. Title: Adds a text as footer of the images.

  <img src="/myimage.jpg" title="Images's footer text" autozoom="true" /> 

2. FontSize: Set the size of the footer text.
  <img src="/myimage.jpg" title="Images's footer text" 
                          fontsize="12px" autozoom="true" /> 

3. Align: Values: left | right
Align the thumbnail to left or right size in the text of the article.
  <img src="/myimage.jpg" align="right" autozoom="true" /> 

4. Width, Height: Set the size of the thumbnail image.
  <img src="/myimage.jpg" width="300px" height="120px"  autozoom="true" /> 

5. ZoomIcon: Values: Yes | No
Show / hide the magnify glass icon in the thumbnail

6. Target ( recommended use )
Specify an alternative image to show that is different of the thumbnail. This is the recommended use. Using target, you can specify a high resolution image and a low res image as thumbnail.
  <img src="/myimage_thumb.jpg" target="myimage_largesize.jpg" 
                        autozoom="true" /> 


Using zoom levels feature
You can add zoom levels to a zoomed image adding extra images who are going to represent the next zoom level and name those files using this nomenclature as follows:
  namefile + _number of zoom level  

Example
myimage.jpg ( original file )
myimage_1.jpg (file for zoom level 1 )
myimage_2.jpg (file for zoom level 2 )
myimage_3.jpg (file for zoom level 3 )
... etc.

When a image is showed, the plug-in will search for this images ( you don't need to specify any attribute ). If one of this file was found, will show the zoom-in and zoom-out icons in the lower right corner of the image.
Note: If the target attribute is used, this image name will be used instead of the name used in src. Example:

  <img src="/world_thumb.jpg" target="world.jpg"  autozoom="true" />