Best jQuery Zoom Plugins & Tutorials with Demo

jQuery Photo Enlarger

jquery-photo-enlarge

A simple widget in jQuery to enlarge and shrink photos.

Smoothslides : Lightweight and Responsive jQuery slideshow

Smoothslides : Lightweight and Responsive jQuery slideshow

A simple, lightweight, and responsive jQuery slideshow by Kevin Thornbloom that features Ken Burns type animations.

Features:

  • Lightweight [3.5Kb]
  • Four Animation Types: Zoom In, Zoom Out, Pan Left, Pan Right
  • Easily add captions
  • CSS3 transitions for smoother effects
  • Responsive image sizes

Leroy Zoom : Image zoom and Magnify jQuery plugin

Leroy Zoom : Image zoom and Magnify jQuery plugin

A lightweight and easy to use image zoom and magnify jQuery plugin with less than 4 KB.

This plugin works on a 2-steps zoom behavior:

  1. Show details of image in the medium version when user over the thumb image;
  2. Magnify and show details of the large image version when user click to “Magnify”.

You’ll need three versions of the same picture with different dimensions (small, medium, large). The first version (small) is shown by default and is the one which user will over the mouse to view the first-step details. Then, the user can “click to magnify” to see the second-step details of image and the large picture version is used for this.

ion.zoom : Image zoom lightbox jQuery plugin

jQuery lightbox plugin for image zoom

Image zoom lightbox jQuery plugin.

Description:

  • ion.zoom — easy image lightbox jQuery plugin for small galleries. Allow to zoom images at place.
  • Supports keyboard controls with ESC, LEFT and RIGHT button.
  • Supports multiple independently operating galleries in one page.
  • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Works on touch screen devices (iPhone, iPad, etc.).

Megazoom Image Viewer with JavaScript & CSS3

Megazoom Image Viewer with JavaScript & CSS3

Megazoom plugin is a powerful, versatile, easy to use and customize image navigator for displaying large images prepared for showcasing products (high resolution product images, e.g. clothes, cars, technical schemes etc), displaying maps, and any other images, with its zooming, panning, dragging, navigation controls, scrollbar, zoom buttons,and highly customizable markers.It has a responsive layout making it perfect for any type of page layout.

Features:

  • Tons of options (check them out in our live previews).
  • Easy to use and install.
  • Fully Responsive & Mobile Optimized (Smartphones & Tablets).
  • Fast CSS3 & JavaScript engine with fall back on CSS1 for older browsers like IE7 or IE8 (exceptional performance!).
  • Responsive layout.
  • Three dispay types: responsive, fullscreen and lightbox.
  • Support for large image resolution, we have made successful tests with images up to 6000px width and/or height.
  • The zoom factor(maximum zoom level) and start/initial zoom factor (initial zoom level) can be specified.
  • The animation zoom speed and animation pan speed. can be set.
  • Double clik zoom and double clik zoom factor (optional).
  • Mouse wheel support on desktop.
  • Mouse drag on desktop or touch drag on mobile.
  • Gestures event support on mobile, the image can be zoomed with two fingers!.
  • Keyboard support (optional).
  • Animated preloader, the preloader text can be modified.
  • Navigator window (optional).
  • Complete control buttons bar with buttons.

Zoomingbox : jQuery lightbox as a container for a larger Zoomed image

Zoomingbox : jQuery lightbox as a container for a larger Zoomed image

A jQuery lightbox which enables you to use the lightbox modal as a container for a larger zoomed image

Pan and zoom jQuery plugin

Pan and zoom jQuery plugin

This plugin manage smooth zoom and pan on a given dom element. The plugin works on mobile and pc and use CSS3 transitions on compatible web browsers. (javascript is used for old web browsers)

Zoom is enabled via mouse events (scroll and click) on pc and with touch events on mobile devices.

Zoomer : jQuery plugin for Smooth Image exploration

Zoomer : jQuery plugin for Smooth Image exploration

A jQuery plugin for smooth image exploration.Zoomer is an easy way to add rich, interactive image exploration to any site.

SKDZoom : jQuery Stylish CSS3 Image Zoomer

SKDZoom : jQuery Stylish CSS3 Image Zoomer

SKDZoom – A jquery stylish CSS3 image zoomer plugin with lens zoom support. Big image shows in a awesome rounded box beside the thumbnail. It is very light weight and easily customizable image zoomer.

jQuery Panzoom : Plugin for panning and zooming elements using CSS3

jQuery Panzoom : Plugin for panning and zooming elements using CSS3

Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.

Panzoom includes support for touch gestures on iOS and Android and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You’ll be amazed at how well this performs on your mobile device.