Product Carousel With Magnifying Glass Effect - jQuery exzoom

File Size: 20.2 KB
Views Total: 40301
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Product Carousel With Magnifying Glass Effect - jQuery exzoom

exzoom is a simple yet powerful and mobile-compatible product carousel/gallery jQuery plugin for your eCommerce websites or online stores.

Features autoplay, thumbnail navigation, image zoom (Magnifying Glass Effect) and much more.

How to use it:

1. Link to jQuery library and the exzoom's files:

<link href="/src/jquery.exzoom.css" rel="stylesheet">
<script src="" 
<script src="/src/jquery.exzoom.js"></script>

2. Create a list of product images and insert them with navigation controls to the carousel.

<div class="exzoom" id="exzoom">
  <!-- Images -->
  <div class="exzoom_img_box">
    <ul class='exzoom_img_ul'>
      <li><img src="1.png"/></li>
      <li><img src="2.png"/></li>
      <li><img src="3.png"/></li>
      <li><img src="4.png"/></li>
      <li><img src="5.png"/></li>
  <!-- Thumbnail Nav-->
  <div class="exzoom_nav"></div>
  <!-- Nav Buttons -->
  <p class="exzoom_btn">
      <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a>
      <a href="javascript:void(0);" class="exzoom_next_btn"> > </a>

3. Initialize the plugin and we're done:


    // options here


4. Config the product carousel by overiding the default option values as these:



    // thumbnail nav options
    "navWidth": 60,
    "navHeight": 60,
    "navItemNum": 5,
    "navItemMargin": 7,
    "navBorder": 1,

    // autoplay
    "autoPlay": true,

    // autoplay interval in milliseconds
    "autoPlayTimeout": 2000


This awesome jQuery plugin is developed by weihaipy. For more Advanced Usages, please check the demo page or visit the official website.