Press "Enter" to skip to content

How to Create Preview Image And Video Links | hover-preview-js

Preview Image And Video Links – A simple plugin that adds photo and video previews to any element. A useless easy image & video preview plugin that shows photos and HTML5 movies in a popup once you hover over picture & video hyperlinks inside the doc.

capture thumbnail from video, create short preview from video, video thumbnail examples, ffmpeg generate video preview, generate thumbnail from video javascript

Supported file extensions:

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

How to make use of 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 picture and/or video hyperlinks and finished.

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

3. The plugin additionally works with any container component that makes use of data-preview attributes to specify the picture/video path.

<div class="preview" 

4. Attach the plugin to the component.

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

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

  return hoverPreview(element);

5. Customize the image/video preview.

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

6. You’re additionally allowed to specify the supply within the JavaScript.

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

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

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

8. API strategies.


show link preview in HTML, Image Preview jQuery Plugin, HTML link preview image

See Demo And Download

Official Website(sixem): Click Here

This superior jQuery/javascript plugin is developed by sixem. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.