From 149fdc6a0c4aa3b03532a6b26a719b3f21513a39 Mon Sep 17 00:00:00 2001 From: Owen Kieffer-Jones Date: Fri, 29 May 2015 12:07:31 +0200 Subject: [PATCH] Documentation added https://web.archive.org/web/20141121014008/http://www.mind-projects.it/projects/jqzoom --- README.md | 107 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) diff --git a/README.md b/README.md index e48ea45..15ae672 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,109 @@ jQzoom Evolution Library - Javascript Image magnifier ================================================== + +Installation +------------ +Add first the last jQuery release, then the jQZoom script(don't forget this),the correct order is important.Look at the installation code below. +````html + + +```` +Add jqzoom.css to your header. +````html + +```` + +How to use +---------- +Using jQZoom 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. +````html + + + +```` + +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 jQZoom will reveal. +* MYCLASS: Represents the anchor class,that would be used to instantiate the jQZoom 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 jQZoom Window. +* PAY ATTENTION: The SMALLIMAGE must be a scaled versione of the BIGIMAGE. +Now load the plugin at window load. +````js +$(document).ready(function(){ + $('.MYCLASS').jqzoom(); +}); +```` +This will instantiate jQzoom in default(standard) mode.You can pass more options(Documentation section),to create special or custom effects as in the example below. +````js +$(document).ready(function(){ + var options = { + zoomType: 'standard', + lens:true, + preloadImages: true, + alwaysOn:false, + zoomWidth: 300, + zoomHeight: 250, + xOffset:90, + yOffset:30, + position:'left' + //...MORE OPTIONS + }; + $('.MYCLASS').jqzoom(options); +}); +```` + +Multiple thumbnails support +--------------------------- +If you want to create galleries, jQZoom can manage it for you. + +1. Attach the gallery ID to your main anchor "rel" attribute. + ````html + + + + ```` + +2. Manage your thumbnails "class" and "rel" attributes. + + The class "zoomThumbActive" is attached to your thumbnails by jQzoom. By default specify this class to the selected thumbnail(it should be the same image in your main anchor element) + ````html + + + + ```` + +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 +```` +rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}" +```` + +Documentation +------------- +Configuration options: + +You can choose between these options. + + Option | Default | Description +--------------|----------------|------------- +zoomType | 'standard' | 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 position. Admitted values:'right' ,'left' ,'top' ,'bottom' +preloadImages | true | if set to true,jqzoom 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. +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'. +hideEffect | 'hide' | The effect by which hiding the popup window. Options available: 'hide', 'fadeout'. +fadeinSpeed | 'slow' | Changes fade in speed, in case the showEffect option is set to 'fadein'. (options: 'fast','slow',number) +fadeoutSpeed | '2000' | Changes fade out speed,in case the hideEffect option is set to 'fadeout'. (options: 'fast','slow',number) + +Style customizations are obviously admitted simply changing the right parameters value in the jqzoom stylesheet file. +