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'

Installation:

# NPM
$ 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" 
     data-preview="demo.jpg">
     Image
</div>

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.

element.reload();
element.destroy();

Changelog:

2020-08-07

• Fixed an issue with the `delay` setting.

2020-08-05

• Add `source` option.

2020-08-04

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

2019-12-23

• JS updated

2019-11-12

• JS updated

2019-08-16

• Binding changes. Automatic img.src detection.

2019-04-21

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