Popup Media JS
Play media (image, video, audio, etc) with this small plugin.
npm package link: click
github link: click
New Features in Version 4
-
Added support for TypeScript.
-
Introduced a gallery mode to display multiple images with a fade effect.
-
Debugged various issues.
Upcoming Features:
- New effects
- Show thumbnails for gallery mode
- ...
Media Types
- video: Play Video using HTML5
- audio: Play Audio using HTML5
- image: Show Single image using img HTML tag
- iframe: Show anything, including PDF, URL, image, video, audio, html and etc. in iframe HTML tag
- gallery: Show multiple image using array, you have to pass image urls in array for gallery mode.
Dependencies
this plugin does not need anything. I just use typescript to build.
How to use
use npm
npm i popup-media
Example 1:
import PopupMedia from "popup-media"
const galleryUrls = [
"https://plus.unsplash.com/premium_photo-1674671748477-5354897d35c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80",
"https://images.unsplash.com/photo-1691019807758-3647f75a3154?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80",
"https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
"https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
]
PopupMedia.run({
url: galleryUrls,
type: "gallery",
title: "popup js test",
isLoopMode: true,
})
Example 2:
PopupMedia.run({
url: "http://techslides.com/demos/sample-videos/small.webm",
type: "video",
})
TypeScript
This plugin supports TypeScript for recognizing types in your application. To enable type recognition, simply add the following lines to your tsconfig.json file:
{
"compilerOptions": {
"paths": {
"popup-media": ["./node_modules/popup-media/dist"]
}
}
}
Config
Required fields:
- url: string (use relative content or http url)
Optional fields:
-
type: "video" | "iframe" | "audio" | "image" | "gallery", default is iframe
-
title
-
width: width of popup box, default is 3/4 of window width
-
height: height of popup box, default is 3/4 of window height
-
dir: "ltr" | "rtl"
-
hasHeader: true | false, default is true
-
hasLoading: true | false, default is true
-
hasBtnClose: true | false, default is true
-
hasBtnFullscreen: true | false, default is true
-
hasBtnHelp: true | false, default is false
-
hasBtnSave: true | false, default is false
-
helpEvent: you can add event for help on click
-
saveEvent: you can add event for save on click
-
hasAudioControls: audio HTML has controls attribute, you can set it: true | false, default is true
-
isAudioAutoPlay: audio HTML has autoplay attribute, you can set it: true | false, default is true
-
hasVideoControls: video HTML has controls attribute, you can set it: true | false, default is true
-
isVideoAutoPlay: video HTML has autoplay attribute, you can set it: true | false, default is true
-
iconClose: you can change this icon with HTML
-
iconFullscreen: you can change this icon with HTML
-
iconHelp: you can change this icon with HTML
-
iconSave: you can change this icon with HTML
-
isDraggable: true | false, default is true
-
isResizable: true | false, default is true
-
isPlayInBackground: true | false, default is false, If you want play short audios this feature is useful, play media in background and close it automatic after complete
-
isLoopMode: true | false, this is for gallery type media.