Simple Responsive Product Image Gallery With Zoom Effect
In this post I am going to introduce one more jQuery plugin to create simple product image gallery with zoom effect. this plugin will help you to showcase your product details page with multiple product images with zoom effect as you have seen on many shopping website. xZoom is a simple touch-friendly, responsive jQuery zoom gallery plugin specially designed for e-commerce websites that help you to display pretty nice product gallery with thumbnail navigation and smooth image zoom effect.
Features
- Supports jQuery starting from version 1.2.6.
- A lof of options, effects and easy to use and customize
- Lightweight ~14kb minified version.
- You can load low and high res images separately.
- Supports IE6+, Chrome, FireFox, Opera, Safari, Android, iOS
- Supports Responsive output.
Integrate Simple Responsive Product Image Gallery With Zoom Effect
Libraries
Include the following required libraries on page.
<!-- CSS--> <link rel="stylesheet" href="css/xzoom.css"> <!-- JS --> <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="js/xzoom.min.js"></script> |
HTML
Add xZoom markup into your HTML.
<img class="xzoom" src="path/to/preview_image_01.jpg" xoriginal="path/to/original_image_01.jpg" /> <div class="xzoom-thumbs"> <a href="path/to/original_image_01.jpg"> <img class="xzoom-gallery" width="80" src="path/to/thumbs_image_01.jpg" xpreview="path/to/preview_image_01.jpg"> </a> <a href="path/to/original_image_02.jpg"> <img class="xzoom-gallery" width="80" src="path/to/preview_image_02.jpg"> </a> <a href="path/to/original_image_03.jpg"> <img class="xzoom-gallery" width="80" src="path/to/preview_image_03.jpg"> </a> <a href="path/to/original_image_04.jpg"> <img class="xzoom-gallery" width="80" src="path/to/preview_image_04.jpg"> </a> </div> |
Where
path/to/original_image_01.jpg
– is a big image, that will be used as zoomed image in zoom.path/to/preview_image_02.jpg
– is a medium image, that will be used as main source image when it will be selected.path/to/thumbs_image_01.jpg
– is a small thumbnail image.
JS
Initialize the plugin in “document ready” section of your javascript.
$(function() { $(".xzoom, .xzoom-gallery").xzoom({tint: '#333', Xoffset: 15}); }); |
See live demo and download source code.
DEMO | DOWNLOAD
See xZoom full documentation to customize the product gallery as per your project need.
Here is list of all possible options and their description:
Property | Default | Description |
---|---|---|
position | right | Position of zoom output window, one of the next properties is available “top”, “left”, “right”, “bottom”, “inside”, “lens”, “#ID”. |
mposition | inside | Position of zoom output window in adaptive mode (i.e. for mobile devices) available properties: “inside”, “fullscreen” |
rootOutput | true | In the HTML structure, this option gives an ability to output xzoom element, to the end of the document body or relative to the parent element of main source image. |
Xoffset | 0 | Zoom output window horizontal offset in pixels from output base position. |
Yoffset | 0 | Zoom output window vertical offset in pixels from output base position. |
fadeIn | true | Fade in effect, when zoom is opening. |
fadeTrans | true | Fade transition effect, when switching images by clicking on thumbnails. |
fadeOut | false | Fade out effect, when zoom is closing. |
smoothZoomMove | 3 | Smooth move effect of the big zoomed image in the zoom output window. The higher value will make movement smoother. |
smoothLensMove | 1 | Smooth move effect of lens. |
smoothScale | 6 | Smooth move effect of scale. |
defaultScale | 0 | You can setup default scale value of zoom on opening, from -1 to 1. Where -1 means -100%, and 1 means 100% of lens scale. |
scroll | true | Scale on mouse scroll. |
tint | false | Tint color. Color must be provided in format like “#color”. We are not recommend you to use named css colors. |
tintOpacity | 0.5 | Tint opacity from 0 to 1. |
lens | false | Lens color. Color must be provided in format like “#color”. We are not recommend you to use named css colors. |
lensOpacity | 0.5 | Lens opacity from 0 to 1. |
lensShape | box | Lens shape “box” or “circle”. |
lensCollision | true | Lens will collide and not go out of main image borders. This option is always false for position “lens”. |
lensReverse | false | When selected position “inside” and this option is set to true, the lens direction of moving will be reversed. |
zoomWidth | auto | Custom width of zoom window in pixels. |
zoomHeight | auto | Custom height of zoom window in pixels. |
sourceClass | xzoom-source | Class name for source “div” container. |
loadingClass | xzoom-loading | Class name for loading “div” container that appear before zoom opens, when image is still loading. |
lensClass | xzoom-lens | Class name for lens “div”. |
zoomClass | xzoom-preview | Class name for zoom window(div). |
activeClass | xactive | Class name that will be added to active thumbnail image. |
hover | false | With this option you can make a selection action on thumbnail by hover mouse point on it. |
adaptive | true | Adaptive functionality. |
adaptiveReverse | false | Same as lensReverse, but only available when adaptive is true. |
title | false | Output title/caption of the image, in the zoom output window. |
titleClass | xzoom-caption | Class name for caption “div” container. |
bg | false | Zoom image output as background, works only when position is set to “lens”. |
Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.