Html preview on hover

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, generate thumbnail from video online, 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:

Installation:

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

// OR import hoverPreview from 'hover-preview-js';

2. Add the CSS class preview to picture and/or video hyperlinks and finished.

Image Video

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

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

element.reload[]; element.destroy[];

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 Usages, please go to the official website.