devsfort-hszoom

HSZOOM

Product Carousel With Magnifying Glass Effect - jQuery

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

Installation

npm install hszoom

How to use it:

Add to Head Section

<link href="./node_modules/devsfort-hszoom/style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
<script src="./node_modules/devsfort-hszoom/index.js"></script>

HsZoom Usage

<div class="hszoom" id="hszoom">
       <!-- Images -->
       <div class="hszoom_img_box">
         <ul class='hszoom_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>
           ...
         </ul>
</div>

Add Navigators

 <div class="hszoom_nav"></div>
       <!-- Nav Buttons -->
       <p class="hszoom_btn">
           <a href="javascript:void(0);" class="hszoom_prev_btn"> < </a>
           <a href="javascript:void(0);" class="hszoom_next_btn"> > </a>
       </p>
</div>

Simple Usage

$(function(){
        $("#hszoom").hszoom({});
});

Advanced Usage

$(function(){
        $("#hszoom").hszoom({
            // thumbnail nav options
            "navWidth": 60,
            "navHeight": 60,
            "navItemNum": 5,
            "navItemMargin": 7,
            "navBorder": 1,
            // autoplay
            "autoPlay": true,
            // autoplay interval in milliseconds
            "autoPlayTimeout": 2000
        });
});