How to use ZoomHoverThumbs ?

ZoomHoverThumbs is a content plugin (GNU/GPL 2 or over license) which maximizes an image when hovering with the mouse. An "a href" link can also be added to the image. It is based on Soh Tanaka's original script published here :

Warning : not yet Joomla! 3.0 compatible
Two versions can be downloaded:



These modified versions come with three parameters and do not use JQuery anymore, only CSS classes which can be modified by the user. Your picture must be inside a container such as div or span, and you must use a "zoomthumb" class.

For example, "<div class="zoomthumb" style="display: block; margin-left: auto; margin-right: auto;">< img src="/images/stories/oups_tournesol.jpg"/></div>", gives this result :

We have noticed that an error occurs with some 1.5.0 templates (this one too...): the magnified image is partly obscured when located on the edge of the content article ; this is likely due to the z-index of the central zone of these templates. With other templates (aha_terraj15, for example), the plugin may not produce a thumbnail image; it may only display real-size images (still to be confirmed).

I have added parameters to set the thumbnail size, the positioning of the magnified image and the zoom rate. One must be careful not to assign a zoom rate superior to the actual size of the image, as it may degrade the quality of the resulting full-size image.

You can download the JQuery version (with only default parameters: thumbnail width 200px, automatic positioning and zoom 200%) for Joomla!1.5 here :  Download ZoomHoverThumbs 1.5.0 .

If you experience any difficulty with ZoomHoverThumbs, please let me know by using this {aicontactsafelink text=contact form|pf=3|aics_subject=ZoomHoverThumbs}