jQuery Plugin For Product Viewer with Image Hover Zoom - BZoom

BZoom is a jQuery plugin lets you create a product viewer with a magnifying glass style image zoom functionality on hover.

Features:

• Zoom in/out images with fade in/out transition effects.
• Auto-rotating images and thumbnails.
• Switch product images manually by clicking on the thumbnails.
• Custom the number of images you want to present.

See also:

• Simple & Responsive jQuery Image Viewer Plugin - Smooth Products

How to use it:

1. Create the Html for the product image viewer.

<div class="bzoom_wrap">
  <ul id="bzoom">

    <li>
      <img class="bzoom_thumb_image" src="thumb-1.jpg">
      <img class="bzoom_big_image" src="large-1.jpg">
    </li>
    <li>
      <img class="bzoom_thumb_image" src="thumb-2.jpg">
      <img class="bzoom_big_image" src="large-2.jpg">
    </li>
    <li>
      <img class="bzoom_thumb_image" src="thumb-3.jpg">
      <img class="bzoom_big_image" src="large-3.jpg">
    </li>

    ...
      
  </ul>
</div>

2. The basic CSS styles for the image viewer.

.bzoom { direction: ltr; }

.bzoom,
.bzoom_thumb,
.bzoom_thumb_image,
.bzoom_big_image,
.bzoom_zoom_preview,
.bzoom_icon,
.bzoom_hint { display: none }

.bzoom .bzoom_thumb { background: #fff url(./img/loading.gif) center no-repeat; }

.bzoom,
.bzoom ul,
.bzoom li,
.bzoom img,
.bzoom_hint,
.bzoom_icon,
.bzoom_description {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none
}

.bzoom,
.bzoom_magnifier div,
.bzoom_magnifier div img,
.bzoom_small_thumbs ul,
ul .bzoom_small_thumbs li,
.bzoom_zoom_area div,
.bzoom_zoom_img { position: relative }

.bzoom img,
.bzoom li {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  user-drag: none
}

.bzoom,
.bzoom_small_thumbs li { float: left }

.bzoom_right { float: right }

.bzoom li { position: absolute }

.bzoom img {
  vertical-align: bottom;
  width: 50px;
  height: 70px
}

.bzoom .bzoom_zoom_area,
.bzoom_zoom_area {
  background: #fff url(./img/loading.gif) center no-repeat;
  border: 1px solid #ddd;
  padding: 6px;
  -webkit-box-shadow: 0 0 10px #ddd;
  -moz-box-shadow: 0 0 10px #ddd;
  box-shadow: 0 0 10px #ddd;
  display: none;
  z-index: 20;
}

.bzoom_zoom_area div { overflow: hidden; }

.bzoom_zoom_area .bzoom_zoom_img { position: absolute; }

.bzoom_wrap .bzoom_magnifier {
  background: #fff;
  outline: #bbb solid 1px;
  display: none;
  cursor: move;
}

.bzoom_magnifier div { overflow: hidden; }

.bzoom_wrap .bzoom_small_thumbs { overflow: hidden; }

.bzoom_wrap .bzoom_small_thumbs li {
  border: 1px solid #FFF;
  margin: 0px 10px 0px 0px;
  position: relative;
}

.bzoom_wrap ul li.bzoom_smallthumb_active {
  -webkit-box-shadow: 0 0 10px #ddd;
  -moz-box-shadow: 0 0 10px #ddd;
  box-shadow: 0 0 10px #ddd;
  border: 1px solid #535353;
}

3. Load jQuery library and the jQuery BZoom plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="./js/jqzoom.js"></script>

4. Initialize the product image viewer.

$("#bzoom").zoom({
zoom_area_width: 300,
// MORE OPTIONS HERE
});

5. Default plugin options.

$("#bzoom").zoom({

// alinment
align: "left", 

// the width/height of the thumbnails
thumb_image_width: 300,  
thumb_image_height: 400, 

// the width/height of the zoomed image
source_image_width: 900, 
source_image_height: 1200, 
zoom_area_width: 600,
zoom_area_height: "justify",
zoom_area_distance: 10,

// enable fade in/out transitions    
zoom_easing: true,  

// click to zoom or hover to zoom
click_to_zoom: false,

zoom_element: "auto",
show_descriptions: true,
description_location: "bottom",
description_opacity: 0.7,

// the number of thumbnails
small_thumbs: 3,    

smallthumb_inactive_opacity: 0.4,  
smallthumb_hide_single: true, 
smallthumb_select_on_hover: false,
smallthumbs_position: "bottom", 
show_icon: true,
hide_cursor: false, 
speed: 600, 
autoplay: true,      
autoplay_interval: 6000,
keyboard: true,
right_to_left: false,

});

---

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