ImageZoom - Responsive jQuery Image Zoom Plugin

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 4x-10x 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

Flag Counter
by
by
by
by
by
by