Based on jQzoom Evolution Library v2.3 by Marco Renzi (http://www.mind-projects.it). Licensed under the BSD license. This module uses Prototype javascript Framework to create amazing zooming effects such as popup zoom, inner image zoom, zoom with reverse opacity and zoom in drag mode. Unlike other plugins RoomZoom.js can use smoothing motion effect with customisable speed. You can easily combine multiple images to a gallery. And you can use multiple galleries on a one page specifing which gallery each image belongs to. RoomZoom.js is very configurable and customisable with many available parameters.
To see a demo please visit github demo page.
To use this script, please add prototype library to your header. All animation effectes use Scruptacolous, so you must also add this library.
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/roomzoom.js'></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
Add roomzoom.css to your header.
<link rel="stylesheet" type="text/css" href="roomzoom.css">
Using RoomZoom is easy,but you need to specify the HTML anchor element,that is going to generate the zoom revealing a portion of the enlarged image.
<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">
</a>
The anchor element wraps the small image you would like to zoom.Following this schema the necessary and base elements are:
- SMALLIMAGE.JPG: Represents the small image you would like to zoom.
- BIGIMAGE.JPG: Represents the big image that RoomZoom will reveal.
- MYCLASS: Represents the anchor class,that would be used to instantiate the RoomZoom script to all the elements matching this class(you can use an ID as well).
- MYTITLE/IMAGE TITLE: Anchor title and/or image title that will be used to show the zoom title close to the RoomZoom Window.
- PAY ATTENTION: The SMALLIMAGE must be a scaled versione of the BIGIMAGE.
document.observe('dom:loaded', function(){
zoom = new RoomZoom($('zoomer'));
});
This will instantiate RoomZoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below.
document.observe('dom:loaded', function(){
zoom = new RoomZoom($('zoomer'), {
alwaysOn : false,
zoomWidth: 250,
zoomHeight:200,
position:'left',
xOffset: 30,
yOffset:80,
zoomType: 'revrse'
// More Options
...
});
});
If you want to create galleries, RoomZoom.js can manage it for you.
Attach the gallery ID to your main anchor "rel" attribute.
Manage your thumbnails "class" and "rel" attributes. The class "zoomThumbActive" is attached to your thumbnails by RoomZoom.js. By default specify this class to the selected thumbnail (it should be the same image in your main anchor element)
The structure of the thumbnail rel attribute is very important. The base elements are
- gallery: the ID of the gallery to which it belongs.
- smallimage: the path to the SMALLIMAGE to be loaded on the when you click on the thumbnail.
- largeimage: the path to the LARGEIMAGE.
Style customizations are obviously admitted simply changing the right parameters value in the roomzoom stylesheet file.
| Option name | Default value | Description |
|---|---|---|
| zoomType | 'standard' | Zoom type. The others admitted option values are 'reverse','drag','innerzoom'. |
| zoomWidth | 300 | The popup window width showing the zoomed area. |
| zoomHeight | 300 | The popup window height showing the zoomed area. |
| xOffset | 10 | The popup window x offset from the small image. (always positive to move the popup window more on the right if position is "right" or more on the left if position is "left") |
| yOffset | 0 | The popup window y offset from the small image. (always positive to move the popup window more on the top if position is "top" or more on the bottom if position is "bottom") |
| position | 'right' | The popup window y offset from the small image. (always positive to move the popup window more on the top if position is "top" or more on the bottom if position is "bottom") |
| preloadImages | true | if set to true, RoomZoom will preload large images. |
| preloadText | 'Loading zoom' | The text to show while preloading images. |
| title | true | Show a small title over the zoomed window it can be the anchor title and if not specified,it will get the small image title. |
| lens | true | if set to false,the small lens,over the image, won't show. |
| opacity | 0.5 | Hover area opacity. |
| imageOpacity | 0.4 | Set the image opacity when the 'zoomType' option is set to 'reverse. |
| showEffect | 'show' | The effect by which showing the popup window.Options available: 'show', 'fadein'. To use 'fadein' effect, please add scriptaculous library. |
| hideEffect | 'show' | The effect by which hiding the popup window.Options available: 'hide', 'fadeout'. To use 'fadeout' effect, please add scriptaculous library. |
| fadeinSpeed | 0.5 | Changes fade in speed,in case the showEffect option is set to 'fadein'. Decimal values in seconds. |
| fadeoutSpeed | 0.5 | Changes fade out speed,in case the hideEffect option is set to 'fadeout'. Decimal values in seconds. |
| smoothing | true | Use zoom movements smoothing (true/false) |
| smoothingSpeed | 40 | Smoothing speed from 1 to 99. |
| thumbnailChange | 'click' | Method to switch between multiple images. Available values are 'click' and 'mouseover'. |
| hint | true | Show a tip with suggestion that image is zoomable. |
| hintText | 'Zoom' | Text of the hint. Can be empty to show only icon. |
| hintPosition | 'bl' | Hint position on image, i.e. top-left, bottom-center, top-right, etc. Can be tl / tr / tc / bl / br / bc. |
| hintOpacity | 0.75 | Opacity of the hint. Decimal value from 0 to 1. |
| disableExpand | false | Disable expand window with large image. |