Enlarge Gallery Images On Hover - jQuery hoverZoom

hoverZoom is a simple, lightweight jQuery plugin for photo gallery that has the ability to enlarge and display gallery images in a popup when hovering over thumbnails.

More features:

• Smooth animations.
• Compatible with the jQuery hoverIntent plugin.
• Image loading indicator.
• Image caption bar displayed under the image.
• Easing functions.

How to use it:

1. To get started, include jQuery library and the hoverZoom plugin's files on the page.

<link rel="stylesheet" href="jquery.hoverZoom.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.hoverZoom.min.js"></script>

2. Insert a list of thumbnails and specify the path to the larger images using a links. You can also specify the image captions in the img's alt attribute as follows:

<ul class="thumb">
  <li>
    <a href="1.jpg">
      <img src="thumbnail-1.jpg" alt="Image 1">
    </a>
  </li>
  <li>
    <a href="2.jpg">
      <img src="thumbnail-2.jpg" alt="Image 2">
    </a>
  </li>
  <li>
    <a href="3.jpg">
      <img src="thumbnail-3.jpg" alt="Image 3">
    </a>
  </li>
  ...
</ul>

3. Call the plugin on document ready.

$(function(){

  $('.thumb img').hoverZoom();

});

4. Default plugin options.

• speedView: how long the zoom in animation will run.
• speedRemove: how long the zoom out animation will run.
• showCaption: shows image captions
• speedCaption: how long the zoom in animation for captions will run.
• debug: debug mode
• loadingIndicator: path to the loading indicator
• loadingIndicatorPos: position of the loading indicator (center | tl | tr | br | bl)
• easing: easing function (swing | linear | easeOutQuint)
• captionHeight: height of the caption
• breathingSize: margins around the zoomed image
• hoverIntent: whether to use the integrated hoverIntent Plugin or not.
• useBgIm: use a background image instead of zooming the thumbnail

$('.thumb img').hoverZoom({
  speedView: 600,
  speedRemove: 400,
  showCaption: true,
  speedCaption: 800,
  debug: false,
  loadingIndicator : 'ajax-loader.gif',
  loadingIndicatorPos: 'center',
  easing: 'easeOutQuint',
  captionHeight: 32,
  breathingSize: 0,
  hoverIntent: true,
  useBgImg: false
});

---

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