lightbox-js Svelte Themes

Lightbox Js

The fast and simple lightbox package, support multiple type of file, with no dependency.

#javascript #lightbox #media #vanilla-javascript #no-dependencies #react #vue #svelte
Demo Download

Lightbox-js

The fast and simple lightbox package, support multiple type of file, with no dependency.

Installation

  • NPM
    npm install @duccanhole/lightbox
  • Yarn
    yarn add @duccanhole/lightbox
  • PNPM
    pnpm install @duccanhole/lightbox
  • Includes
    Copy or download javascript file from index.js and css file from style/index.css to 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>

    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 ```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**
```ts
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
  1. Import css file to your project
    main.ts
    ```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')

2. In your component, init class and use
```ts
<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
  1. Import css file to root css file of your project
    app.css
    @import '@duccanhole/lightbox/style/index.css';
  2. In your component, init class and use ```ts

    ## Example
Your can view the demo [here](https://duccanhole.github.io/lightbox-js/)

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing
Loading Svelte Themes