Preview

default

columns

title 200

description 200

title 250

description 250

title 650

description 650

title 750

description 750

title 850

description 850

title 950

description 950

masonry

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 200

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 200

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 250

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 250

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 650

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 650

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 750

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 750

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 850

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 850

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 950

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 950

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 300

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 300

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 350

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 350

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 450

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 450

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 550

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 550

Usage

<script lang="ts">
  import { Gallery, Modal } from "@dxdns-kit/svelte"
  import { onDestroy, tick } from "svelte"
  import type { HTMLVideoAttributes } from "svelte/elements"
  import { videoUtil } from "@dxdns-kit/core/utils"

  let isOpen = $state(false)
  let elImg: HTMLImageElement | undefined

  const sizes = [200, 250, 650, 750, 850, 950, 300, 350, 450, 550]

  const { isVideo } = videoUtil()

  async function handleClick(src: string, size: number) {
    isOpen = true

    await tick()

    if (elImg) {
      elImg.src = src
      elImg.width = size
      elImg.height = size
    }
  }

  onDestroy(() => {
    elImg = undefined
  })
</script>

<Modal
  {isOpen}
  style="border: none;"
  handleClose={() => {
    isOpen = false
    elImg = undefined
  }}
>
  <Modal.Content
    style="
    text-align: center;
    padding: 0;
    "
  >
    <img alt="" bind:this={elImg} />
  </Modal.Content>
</Modal>

<h1>default</h1>
<Gallery>
  {#each sizes.slice(0, 4) as size (size)}
    {@const src = `https://dummyjson.com/image/${size}`}
    <Gallery.Item
      lazy
      dataSrc={src}
      alt={`Image ${size}px`}
      width={size}
      height={size}
      onclick={() => {
        handleClick(src, size)
      }}
      style="cursor: pointer;"
    />
  {/each}
</Gallery>

<br />
<h1>columns</h1>
<Gallery columns={1}>
  {#each sizes.slice(0, 6) as size (size)}
    {@const src = `https://dummyjson.com/image/${size}`}
    <Gallery.Item
      lazy
      caption={{
        label: { text: `title ${size}` },
        description: { text: `description ${size}` }
      }}
      dataSrc={src}
      alt={`Image ${size}px`}
      width={size}
      height={size}
      onclick={() => {
        handleClick(src, size)
      }}
      style="cursor: pointer;"
    />
  {/each}
</Gallery>

<br />
<h1>masonry</h1>
<Gallery variant="masonry" gap="1rem">
  {#each sizes as size, i (size)}
    {@const src =
      i === 0
        ? "https://res.cloudinary.com/dkufrbqih/video/upload/v1754577218/4_-_J5bdBP9_tifpyb.mp4"
        : `https://dummyjson.com/image/${size}`}
    <Gallery.Item
      lazy
      {...isVideo(src)
        ? ({
            autoplay: true,
            muted: true,
            loop: true,
            href: src,
            target: "_blank"
          } as HTMLVideoAttributes)
        : {}}
      caption={{
        label: {
          text: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! ${size}`,
          lines: 1
        },
        description: {
          text: `Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. ${size}`,
          lines: 1
        }
      }}
      dataSrc={src}
      alt={`Image ${size}px`}
      width={size}
      height={size}
      onclick={() => {
        if (i > 0) {
          handleClick(src, size)
        }
      }}
      style="cursor: pointer;"
    />
  {/each}
</Gallery>