How to Create Preview Image And Video Links | hover-preview-js

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.

Supported file extensions:

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

Must Read: Interface to Perform A Video Player by Using the Bootstrap 5 Framework

How to make use of it:

Installation:

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

<script src="./dist/hover-preview.min.js"></script>
// OR
import hoverPreview from 'hover-preview-js';

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

<a class="preview" href="demo.jpg">Image</a>
<a class="preview" href="demo.mp4">Video</a>

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

<div class="preview" 
     data-preview="demo.jpg">
     Image
</div>

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
});

See Demo And Download

Official Website(sixem): Click Here

This superior jQuery/javascript plugin is developed by sixem. For extra advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Leave a Reply

Your email address will not be published. Required fields are marked *