ImageZoom – Responsive jQuery Image Zoom Plugin (Images and Media)

Overview

ImageZoom is a jQuery plugin for image zoom effect. It has thrid mode of image zoom effect : inner mode,standard mode and follow mode. It is easy to use, you can just use single image or set a large image. When you set a large image you view see it‘s 4_{10 faster than other to show zoom view (witch use image load event to get the large image width/height ). You can try the the imgfast demo in the live demo page to see it. And ImageZoom is ready to use with an carousel. It has a lot of options and method witch let make what just need. Enjoy it}

Features

Responsive! You can use it in you responsive layout.
Three zoom mode include. Inner zoom,standard zoom,follow zoom
Get large width/height 410 faster than imageload event.
Use resized thumb image for zoom view when the large image is loading.
Smooth move. Zoom view move smooth.
Customizable by CSS and options.
Flexible options.
Easy to control the zoom object with many method.
Option for preload image or not.
ImageZoom with elastislide ready.(An custom skin include) Also responsive.
Cross browser
Event callback for begin and end zoom.
Easy to custom the style.
Many demo and documention include.

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
zoomHandlerClass:The coustom class of the zoom handler area for standard mode. Default:null string
onShow:Event when zoom begin. Default:null
onHide:Event when zoom end. Default:null

ImageZoom Object

obj.$viewer (jQuery element object) The large image show view area.
obj.$handlerArea (jQuery element object) The handler view show on thumb image when use standard mode.
obj.$el (jQuery element object) The image the you have called ImageZoom on it.
obj.$largeImg (jQuery element object) The large image that show on zoom viewer.

Methods

destroy() : Destroy imagezoom.
changeImage(string,string) : Change the img tag original image src and large image.
changeZoomSize(number,number) : Change the ZoomViewer Size (width,height).