Svelte Lightbox

Overview:

svelte-lightbox is a lightweight and customizable lightbox library for Svelte. It offers a simple and easy-to-use component to display images and videos in a lightbox format. The library supports mobile devices and allows for customization of various elements. It is the first version of the library and any reported bugs can be addressed in the GitHub repository.

Features:

• Lightweight: The library is designed to be lightweight and efficient.
• Customizable: Users can customize various elements such as the lightbox, header, footer, and thumbnails.
• Mobile Support: The library is compatible with mobile devices.
• Lightbox: The library provides a standard lightbox component to display images.
• Gallery: The library also offers a gallery component to display multiple images or videos.
• API: The library consists of two main components, <Lightbox> and <LightboxGallery>, with customizable options.
• Image Properties: Users can set properties such as title and description for the displayed images.
• Customization Options: Users can customize the lightbox and gallery components using HTML props or CSS classes.

Installation:

1. Import the lightbox component:

import { Lightbox } from 'svelte-lightbox';

2. Use the <Lightbox> component to display an image:

<Lightbox>
  <img src="path_to_image" alt="Image">
</Lightbox>

3. To use the gallery component, import the necessary components:

import { LightboxGallery, GalleryImage, GalleryThumbnail } from 'svelte-lightbox';

4. Use the <LightboxGallery> component to display a gallery of images/videos:

<LightboxGallery>
  <GalleryImage src="path_to_image" alt="Image">
  <GalleryImage src="path_to_video" alt="Video">
</LightboxGallery>

5. Add a thumbnail layout to the gallery component by using the <GalleryThumbnail> component:

<LightboxGallery>
  <svelte:fragment slot="thumbnail">
    <div class="thumbnail-layout">
      <GalleryThumbnail src="path_to_thumbnail1" alt="Thumbnail 1">
      <GalleryThumbnail src="path_to_thumbnail2" alt="Thumbnail 2">
    </div>
  </svelte:fragment>
  <GalleryImage src="path_to_image1" alt="Image 1">
  <GalleryImage src="path_to_image2" alt="Image 2">
</LightboxGallery>

Summary:

svelte-lightbox is a lightweight and customizable lightbox library for Svelte. It provides a simple way to display images and videos in a lightbox format. The library supports mobile devices and offers customization options for various elements. The main components of the library are <Lightbox> and <LightboxGallery>. Installation and usage are straightforward, allowing users to easily integrate the library into their Svelte projects.