
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.
- Publication date: 01.03.2019
- Source