Preview Image And Video Links - image.preview.js

File Size: 68.7 KB
Views Total: 5589
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Preview Image And Video Links - image.preview.js

A dead simple image & video preview plugin that displays images and HTML5 videos in a popup when you hover over image & video links within the document.

Currently works as a Vanilla JavaScript plugin. No third-party libraries required.

Supported file extensions:

  • Image: 'jpg', 'jpeg', 'gif', 'png', 'ico', 'svg', 'bmp'
  • Video: 'mp4', 'webm'


$ npm i hover-preview-js --save

How to use it:

1. Import the image.preview.js into the document.

<script src="./dist/hover-preview.min.js"></script>
// OR
import hoverPreview from 'hover-preview-js';

2. Add the CSS class preview to image and/or video links and done.

<a class="preview" href="demo.jpg">Image</a>
<a class="preview" href="demo.mp4">Video</a>

3. The plugin also works with any container element that uses data-preview attribute to specify the image/video path.

<div class="preview" 

4. Attach the plugin to the element. Done.

// to a single element
var element = hoverPreview(document.querySelector('div.preview'),{
    // options here

// to multiple elements
var elements = [...document.querySelectorAll('.preview')].map((element) =>
  return hoverPreview(element);

5. Customize the image/video preview.

  • delay: time to wait before showing the preview
  • cursor: shows a loading cursor when the preview is loading
var element = hoverPreview(document.querySelector('div.preview'),{
    delay : 100,
    cursor : true

6. You're also allowed to specify the source in the JavaScript.

var element = hoverPreview(document.querySelector('div.preview'),{
    source: '1.jpg'

7. Determine whether to encode extra characters (# and ?) when processing the URL. Default: false.

var element = hoverPreview(document.querySelector('div.preview'),{
    encodeAll: true

8. API methods.




  • Fixed an issue with the `delay` setting.


  • Add `source` option.


  • Removed jQuery dependency
  • Added loading cursor option. Fixed an issue with capitalized extensions.



  • JS updated


  • Binding changes. Automatic img.src detection.


  • Added more options

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