Enlarge Gallery Images On Hover - jQuery hoverZoom

File Size: 1.21 MB
Views Total: 5388
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.