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 |
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.