Plugin Overview

When implementing a zoom effect for images, a suitable plugin can sipmlify the process significantly. The jquery.imagezoom.js plugin offers a straightforward way to enable image magnification on mouse hover.

Plugin Source and Download

The originla author and official website of this plugin are not clearly documented online. You may obtain the plugin from the following link:

Download jquery.imagezoom.js

Basic Usage Example

A basic implemantation includes HTML markup, JavaScript initialization, and associated CSS styling.

HTML Structure

<div class="product-container">
  <div class="main-image-display">
    <a href="images/item1.jpg"><img src="images/item1_medium.jpg" alt="Product Image" rel="images/item1.jpg" class="zoomable-image" /></a>
  </div>
  <ul class="thumbnail-list" id="thumbnails">
    <li class="active"><div class="thumbnail"><a href="#"><img src="images/item1_thumb.jpg" medium="images/item1_medium.jpg" large="images/item1.jpg"></a></div></li>
    <li><div class="thumbnail"><a href="#"><img src="images/item2_thumb.jpg" medium="images/item2_medium.jpg" large="images/item2.jpg"></a></div></li>
    <li><div class="thumbnail"><a href="#"><img src="images/item3_thumb.jpg" medium="images/item3_medium.jpg" large="images/item3.jpg"></a></div></li>
    <li><div class="thumbnail"><a href="#"><img src="images/item4_thumb.jpg" medium="images/item4_medium.jpg" large="images/item4.jpg"></a></div></li>
    <li><div class="thumbnail"><a href="#"><img src="images/item5_thumb.jpg" medium="images/item5_medium.jpg" large="images/item5.jpg"></a></div></li>
  </ul>
</div>

JavaScript Initialization

$(document).ready(function() {
  $('.zoomable-image').imagezoom();
  
  $('#thumbnails li a').on('click', function(event) {
    event.preventDefault();
    
    // Update active thumbnail
    $(this).closest('li').addClass('active').siblings().removeClass('active');
    
    // Update main image source and rel attribute
    const selectedImage = $(this).find('img');
    $('.zoomable-image').attr('src', selectedImage.attr('medium'));
    $('.zoomable-image').attr('rel', selectedImage.attr('large'));
  });
});

CSS Styling

.product-container {
  width: 610px;
  margin: 100px auto;
}

.main-image-display a {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.main-image-display a img {
  vertical-align: middle;
}

.thumbnail-list {
  margin: 10px 0 0;
  overflow: hidden;
}

.thumbnail-list li {
  background: none;
  float: left;
  height: 42px;
  margin: 0 6px 0 0;
  overflow: hidden;
  padding: 1px;
}

.image-large, .image-large a {
  height: 310px;
  width: 310px;
}

.image-large img {
  max-height: 310px;
  max-width: 310px;
}

.thumbnail {
  border: 1px solid #CDCDCD;
}

.thumbnail.active {
  background-color: #C30008;
  height: 40px;
  padding: 2px;
}

.thumbnail.active div {
  background-color: #FFFFFF;
  border: none;
}

.zoom-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: #ffffff;
  border: 1px solid #CCCCCC;
  display: none;
  text-align: center;
  overflow: hidden;
  z-index: 999;
}

.zoom-overlay {
  position: absolute;
  background: url("images/mask.png") repeat scroll 0 0 transparent;
  cursor: move;
  z-index: 1;
}