Preview Image And Video Links With jQuery - image.preview.js

Preview Image And Video Links With jQuery - 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.

Supported file extensions:

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

How to use it:

1. Include the JavaScript file image.preview.js after loading jQuery library.

<script src="jquery.min.js"></script>
<script src="image.preview.js"></script>

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

  elements : ['.preview']

5. Customize the image/video preview.

  • hoverdelay: time to wait before showing the preview
  • marin: margin in pixels
  • css: additional CSS rules
  elements : ['.preview'],
  hoverDelay : 150,
  margin : 4,
  CSS : {
    // CSS rules here

6. Change the allowed image/video file types.

  elements : ['.preview'],
  extensions : {
    images : ['jpg', 'jpeg', 'gif', 'png', 'ico', 'svg', 'bmp'],
    videos : ['mp4', 'webm']

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

  • Publication date: 01.03.2019
  • Source