ImageZoom Demo
--- A cool jQuery plugin for image zoom!
Demo1 Default 'inner' Mode
Call ImageZome without any config,just apply it on an image. You can set the image
size, apply some style or make it responsive as usual.
- Inner zoom mode.
- Without any config.
- Default mode: inner zome mode.
- Single image,without set the largeimage.
- Responsive,try resize you browser !
- Smooth move.
Demo2 Inner Zoom / Multiple
Inner zoom mode with multiple images.Click the thumb image to change image.
- Mutiple images list.
- Both the carousel and zoom image are responsive.
- Images list size can be set. now 3
- Zoom with large image.
- CSS3 transition used on thumb image active.
- And more ...
Demo3 Standard Zoom
Responsive! Standard zoom mode show on the left/right. You can set the zoom view
size ,custom css class , set the offset of the thumb image or other offset target!
Try resize your browser, you will find out the magic!
- Dynamic set the zoom viewer size, responsive!
- Can custom the zoom viewer style.
- Option for zoom viewer position. left/right
- Option for zoom viewer offset,and offset target.
- Show image info on the zoom viewer and the info block can be custom.
Demo4 Standard Zoom / Multiple
Standard zoom mode with multiple images.Custom start image of the list.
- Mutiple images list.
- Both the carousel and zoom image are responsive.
- Images list size can be set. now 4
- Option of zoom handler style.
- Custom start image of the list.
- Call onShow and onHide events make zoomviewer fade effects.
- A lot of option ...
Demo5 Follow Zoom
Follow Zoom of single image, Can be set large image or not. And you can easy custom
the lens size and style.
- Easy to custom the lens style.
- Lens size can be set view zoomSize option.
- Support single image or can be set a large image for thumb.
- Use thumb img for preview inside of blank loading as standrd and inner mode.
- Responsive too!
Demo6 Follow Zoom / Multiple
Follow zoom mode with multiple images.
- Smooth move as Inner/Standard Mode. With option smoothMove:true.
- Just large image or with thumb image in list and preview.
- Easy to custom the lens style.
- Lens size can be set view zoomSize option.
- You will find more in the documention.
- More will go on :)
Options
- type:The image zoom mode.(inner,standard,follow) Default:inner
- bigImageSrc:If Call image zoom on the thumb image and want to zoom with large image set this option. Default:null
- smoothMove:Is the zoomviewer's image move smooth. (true/false) Default:true
- preload:Is ImageZoom preload the large image. Default:true
- zoomSize:The ZoomView Size for standard mode and follow mode. Default:[100,100]
- offset:Set the offset of the zoomviewer for standard mode. Default:[10,0]
- position:Set left/right to show the zoomviewer. Default:right
- alignTo:Set the id of the zoomviewer align to (Standard Mode). Default:null (alignTo the riginal image)
- descriptionClass:The coustom description css class. Default:null
- showDescription:Is zoomimage auto show the image description. Default:true
- zoomViewerClass:The coustom class of the zoom viewer for follow mode and standard mode. Default:null
- zoomHandlerClassThe coustom class of the zoom handler area for standard mode. Default:null
- onShow:Event when zoom begin. Default:null
- onHide:Event when zoom end. Default:null
Methods
- destroy()
- changeImage(string,string)
- changeZoomSize(number,number)
Members
- $viewer
- $handlerArea
- $el
- $largeImg