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.
