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

4. Attach the plugin to the element. Done.

$(document).imagePreview({
  elements : ['.preview']
});

5. Customize the image/video preview.

• hoverdelay: time to wait before showing the preview
• marin: margin in pixels
• css: additional CSS rules

$(document).imagePreview({
  elements : ['.preview'],
  hoverDelay : 150,
  margin : 4,
  CSS : {
    // CSS rules here
  }
});

6. Change the allowed image/video file types.

$(document).imagePreview({
  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.