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

Preview Image And Video Links With jQuery - image.preview.js
File Size: 93.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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', '.custom-element']
});

5. Customize the image/video preview.

  • hoverdelay: time to wait before showing the preview
  • windowMargin: margin in pixels
  • triggerMargin: trigger margin in pixels
  • extensions: file extensions
  • staticPreview: false = follows the cursor
  • css: additional CSS rules
$(document).imagePreview({
  elements : ['.preview'],
  hoverDelay : 150,
  windowMargin : 4,
  triggerMargin : 24,
  staticPreview : true,
  extensions : {
  images : ['jpg', 'jpeg', 'gif', 'png', 'ico', 'svg', 'bmp'],
    videos : ['mp4', 'webm']
  },
  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']
  }
});

Changelog:

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.