The fast and simple lightbox package, support multiple type of file, with no dependency.
- NPM
npm install @duccanhole/lightbox- Yarn
yarn add @duccanhole/lightbox- PNPM
pnpm install @duccanhole/lightbox- Includes
Copy or download javascript file fromindex.jsand css file fromstyle/index.cssto your project
<head>
<link type="text/css" rel="stylesheet" href="/** link your css file here */" />
</head>
<body>
<script type="module">
import Lightbox from "/** link your js file here */"
const lightbox = new Lightbox()
lightbox.open({
type: 'image',
src: 'https://picsum.photos/800/800',
downloadUrl: 'https://picsum.photos/200/300'
})
</script>
</body>- open(data: IData)
interface IData {
type: "image" | "video" | "audio" | "iframe" | "custom"
src: string // the source link of file
sources: Array<ISource> // the data for source tag, need for "audio" & "video" type
template: string // the html string template to render, need for "custom" type
downloadUrl?: string // the link to download file
}interface ISource {
src: string
type: string
}- setGallery(list: Array)
interface IGalleryItem extends IData {
thumnail: string // the display thumbnail link
}- openGalleryItem(i: number)
After set gallery list, you can open gallery item with i is index of item in list.
- Javascript
import Lightbox from "@duccanhole/lightbox";
const lightbox = new Lightbox();
lightbox.open({
type: "image",
src: "https://picsum.photos/800/800",
downloadUrl: "https://picsum.photos/200/300"
})- React
import "@duccanhole/lightbox/style/index.css";
import Lightbox from "@duccanhole/lightbox";
import { useEffect, useState } from "react";
export default function LightboxComponent() {
const [lightbox, setLightbox] = useState<any>(null);
const openLightbox = () => {
lightbox?.open({
type: "image",
src: "https://picsum.photos/800/800",
downloadUrl: "https://picsum.photos/200/300",
});
};
useEffect(() => {
const initLightbox = () => {
setLightbox(new Lightbox());
};
initLightbox();
}, []);
return (
<div className="w-full h-screen bg-white">
<button onClick={openLightbox}>Open lightbox</button>
</div>
);
}- Vue
- Import css file to your project
import './assets/main.css'
import '@duccanhole/lightbox/style/index.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')- In your component, init class and use
<template>
<div>
<button @click="openLightbox">Open lightbox</button>
</div>
</template>
<script lang="ts" setup>
import Lighbox from 'lightbox-js'
const lighbox = new Lighbox()
function openLightbox() {
lighbox.open({
type: 'image',
src: 'https://picsum.photos/800/800',
downloadUrl: 'https://picsum.photos/200/300'
})
}
</script>- Svelte
- Import css file to root css file of your project
@import '@duccanhole/lightbox/style/index.css';- In your component, init class and use
<div>
<button on:click={openLightbox}>Open lightbox</button>
</div>
<script>
import Lightbox from '@duccanhole/lightbox'
import { onMount } from 'svelte';
let lightbox = null
function openLightbox() {
lightbox.open({
type: 'image',
src: 'https://picsum.photos/800/800',
downloadUrl: 'https://picsum.photos/200/300'
})
}
onMount(() => {
lightbox = new Lightbox()
})
</script>Your can view the demo here
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent