Press "Enter" to skip to content

Image Zoom On Hover jQuery Plugin | picZoomer

picZoomer is a jQuery plugin that adds a zoom functionality to your images with thumbnail navigation support.

You can use the plugin on your e-commerce site to creating a product viewer that allows the visitor to navigate between product images using the image scrolling zoom functionality.

product image zoom on hover jquery, product image zoom on hover javascript, jquery image zoom plugin examples, jquery image zoom mobile friendly, inner zoom jquery

How to make use of it:

1. Add references to the jQuery library and jQuery picZoomer plugin files in the document.

<link rel="stylesheet" href="css/jquery-picZoomer.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery.picZoomer.js"></script>

2. Add a raw image to the image viewer.

<div class="picZoomer">
  <img src="images/0.jpg" alt="">
</div>

3. Create a list of thumbnails for the image viewer.

<ul class="piclist">
  <li><img src="images/0.jpg" alt=""></li>
  <li><img src="images/1.jpg" alt=""></li>
  <li><img src="images/2.jpg" alt=""></li>
  <li><img src="images/3.jpg" alt=""></li>
  ...
</ul>

4. Enable image zoom hovering.

$('.picZoomer').picZoomer();

5. Enable the mini navigation.

$('.piclist li').on('click',function(event){
  var $pic = $(this).find('img');
  $('.picZoomer-pic').attr('src',$pic.attr('src'));
});

jquery image zoom on hover, jquery-piczoomer Plugin/Github


See Demo And Download

Official Website(2kiss): Click Here

This superior jQuery/javascript plugin is developed by 2kiss. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.