<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>

Docs

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.

Usage

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

`main.ts`

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

`app.css`

@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>

Example

Your can view the demo here

Keywords

FAQs

What is @duccanhole/lightbox?

Is @duccanhole/lightbox well maintained?

Package last updated on 24 Jul 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install