Example of the "Mouse Over Zoom" effect.
Having mouse over zoom can be handy tool for both Joomla developers and users, as it will enable you to zoom in to a thumbnail image directly, using your mouse. You can select a number of zoom ranges to suit your requirements, and the image will not be opened in a new webpage, which can help to reduce clutter.
The applications for this software are many, but as an example, retail sites often employ zoom features to enable consumers to get a better view of products. Needless to say, if you run a retail site using Joomla, this software will add another level of satisfaction, and usability for potential customers, enabling them to view a product in more detail at a glance. This also enhances user experience, by not requiring potential customers to keep opening new browser pages if they want to browse other items. A quick and easy user experience will attract new sales.
This is just one example of how useful mouse over zoom can be, and there are of course a number of additional ways that this software can be an effective addition to Joomla sites.
A plugin to zoom images on mouse over event.
Upload a pair of images: thumbnail and double sized. The in your HTML code type
<img class="mouseoverzoom" src="/smallimage,bigimage,link,link target,zoom factor" />
- class="mouseoverzoom" - is a keyword for the plugin to apply the effect;
- smallimage - Normal size image;
- bigimage - Optional/ The image to show when zoomed ;
- link - URL to go on Mouse Click;
- link target - Where to open a page the link leading to ( _blank or _top);
- zoom factor - How much to zoom the image (2, 3 or 4 times);
<img class="mouseoverzoom" src="/thumbnail image,zoomed image" />
<img class="mouseoverzoom" src="/thumbnail image,zoomed image,,,4" width="200" />
<img class="mouseoverzoom" src="/images/img1.jpg,images/img1_big.jpg,,,3" />
also you may add a link and link target if necessary:
<img class="mouseoverzoom" src="/images/img1.jpg,images/img1_big.jpg,http://compass.com.pa,_blank" />
In order to load transparent images (without background) use .png format.
- Rotation Angle
- Trigger Event
- Disable if window is less than
- Zoomed image postfix
- Zoom Factor
Pro verson example:
- 1.3.3 (2019.03.01) Unnessesary dependance replaced.
- 1.3.2 (2019.02.24) Rotate angle added.
- 1.3.1 (2018.06.15) Code cleaned.
- 1.3.0 (2018.04.26) Joomla! Update System Ready.
- 1.2.7 (2014.09.22) Decimal zoom factor form 1-2 is also possible now.
- 1.2.5 (2014.03.22) Single installer for Joomla 1.5/2.5/3.x.
- 1.2.4 (2014.03.09) Mouse Cursor Pointer added for Click Event mode:
- 1.2.3 (2014.01.26) Options added:
Zoomed image postfix;
Updated: Default Zoom Factor - decimal values added.
- 1.2.2 (2014.01.23) Responsive template conflict fixed.
- 1.2.0 HTTP:/ link problem solved. Auto correction added for http:/ to http:// and https:/ to https://
- 1.1.9 IE bug fixed (No effect if there is no link).
Floating Zoom Factor is possible now, example: 1.5
- 1.1.8 Joomla 3.0 compatible. Alt, Title attributes available.
- 1.1.7 Big image instead of small on pageload bug fixed
- 1.1.6 Small/Big Image switch bug fixed
JQuery No conflict added
- 1.1.5 Disable if window size is less than select option added. Default zoom factor can be set in plugin settings. The option to avoid TEXT AREA tags is options now. And the option to change Class name to apply the plugin to, but it's for PRO version.
- 1.1.4 Safari: Zoomed Image positioning bug fixed.
- 1.1.3 Front-end editor safe - The plugin doesn't run if the code is in the textarea tag.
- 1.1.2 W3C ready.
- 1.1.1 You may choose JQuery version or use already defined one by another extension.
- 1.1.0 Smart repositioning added, it moves zoomed image away from the visible window edge.
- 1.0.9 Image positioning bug fixed. Compatible with Joomla 2.5
- 1.0.8 Compatible with Joomla 1.5.24 and 1.6, 1.7
- 1.0.7 Option to set target to the links (_blank, _top etc.)
- 1.0.6 Joomla 1.7 compatible. Now is a system plugin and works with any component, module or template.
- 1.0.5 Joomla 1.6 compatible, Zoom factor added, custom width and height also available now.
- 1.0.4 First release.