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

---

Unknown on 23.09

---

Purchase $7.00

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).

Other Image Effects Plugins

HoverEx – jQuery image hover animation plugin

Picanim – jQuery image hover effect pulgin

Zoome – jQuery Image Zoom Effect Plugin

Filled Under:

animate carousel e fuild galleryw image images-and-media javascript lens magnifier previenlarge responsive scale slide smooth zoom zoomer