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.


  • 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


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>


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 href="path/to/original_image_02.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_02.jpg">
  <a href="path/to/original_image_03.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_03.jpg">
  <a href="path/to/original_image_04.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_04.jpg">


  • 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.


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.


See xZoom full documentation to customize the product gallery as per your project need.

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.