A simple widget in jQuery to enlarge and shrink photos.
Best jQuery Zoom Plugins & Tutorials with Demo
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
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:
- Show details of image in the medium version when user over the thumb image;
- 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
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 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.
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.
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.
