Fork me on GitHub

A Jquery Image Zoom Plugin

  • Fully Customisable
  • Coloured Tints
  • Fancybox Gallery Support
  • Variable zoom on mouse scroll
  • External Controls
  • Window Zoom, Lens Zoom and Inner Zoom
  • Free to use under MIT and GPL Licenses
HTML
<img id="zoom_04" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
JAVASCRIPT
$("#zoom_04").elevateZoom();


Are you looking for an Image Zoom Extenson?

If you are looking for a seamless image zoom extension to work accross desktop, tablet and mobile that will integrate easily and straight into your store, then try the Magic Zoom Image zoom modules.

As a web development business, we recommend the magic toolbox modules for their ease and flexibility for getting your store integrated with image zoom.

Ready apps and extensions for your site - Click on your Shopping Cart to see available modules

  • Extensions for Magento
  • Plugins for WooCommerce
  • Modules for PrestaShop
  • Apps for Shopify
  • Modules for OpenCart
  • Add-ons for CS-Cart
  • Modules for X-Cart
  • Plugins for Zen Cart
  • Plugins for WordPress
  • Plugins for WP e-Commerce
  • Plugins for Jigoshop
  • Plugins for TheCartPress
  • Components for Joomla
  • Components for VirtueMart
  • Components for HikaShop
  • Components for redSHOP
  • Extensions for OXID
  • Extensions for eBay
  • Extensions for Volusion
  • Apps for Bigcommerce
  • Extensions for Squarespace
  • Extensions for ECWID
  • Extensions for ShopSite
  • Add-ons for osCommerce
  • Plugins for CubeCart
  • Extensions for xt:Commerce
  • Extensions for Miva Merchant
  • Extensions for e-vendo
  • Extensions for AspDotNetStorefront
  • Extensions for GoDaddy Shopping Cart
  • Extensions for nopCommerce
  • Add-ons for osCMax
  • Add-ons for Loaded Commerce
  • Extensions for Blogger
  • Extensions for Weebly
  • Extensions for Avactis
  • Modules for Drupal
  • Extensions for ekmPowershop
  • Extensions for ecommerce Templates
  • Extensions for NetSuite
  • Extensions for BlueVoda
  • Modules for Gallery
  • Extensions for WYSIWYG
  • Modules for LiteCommerce

Installation and usage

Download the source files (available here) and include the jquery and elevatezoom plugin files into your project

<script  type="text/javascript" src="jquery.js"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

Include your Image

Elevate Zoom works best using two images, one low resolution for the visible image, and one high resolution for the zoomed image. If you only have one image available, Elevate Zoom will still work if you scale down the image, although this is not recommended as your page load time will increase if you are loading larger images

Please ensure your small image is proportionally scaled down from the large image.

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

Activate the zoom - Basic Example

$("#img_01").elevateZoom();

More Examples

See More examples of the image zoom here