svelte icon Svelte 5 UI lib
  • Coverage
  • About
  • Repo

Gallery

Default

erbology
shoes
small bag
plants
watch
shoe
cream
small bag
lamp
toiletbag
playstation
bag
<script lang="ts">
  import { Gallery } from 'svelte-5-ui-lib';
  const images = [
    {
      alt: "erbology",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
    },
    {
      alt: "shoes",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg"
    },
    {
      alt: "plants",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg"
    },
    {
      alt: "watch",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg"
    },
    {
      alt: "shoe",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg"
    },
    {
      alt: "cream",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg"
    },
    {
      alt: "lamp",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg"
    },
    {
      alt: "toiletbag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg"
    },
    {
      alt: "playstation",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg"
    },
    {
      alt: "bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg"
    }
  ];
</script>

<Gallery items={images} divClass="gap-4 grid-cols-2 md:grid-cols-3" />

Monsory grid

erbology
shoes
small bag
plants
watch
shoe
cream
small bag
lamp
toiletbag
playstation
bag
<script lang="ts">
  import { Gallery } from 'svelte-5-ui-lib';
  const images1 = [
    {
      alt: "erbology",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg"
    },
    {
      alt: "shoes",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg"
    }
  ];
  const images2 = [
    {
      alt: "plants",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg"
    },
    {
      alt: "watch",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg"
    },
    {
      alt: "shoe",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg"
    }
  ];
  const images3 = [
    {
      alt: "cream",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg"
    },
    {
      alt: "lamp",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg"
    }
  ];
  const images4 = [
    {
      alt: "toiletbag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-9.jpg"
    },
    {
      alt: "playstation",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-10.jpg"
    },
    {
      alt: "bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-11.jpg"
    }
  ];
</script>

<Gallery divClass="gap-4 grid-cols-2 md:grid-cols-4">
  <!-- Safari needs gap -->
  <Gallery items={images1} divClass="gap-4" />
  <Gallery items={images2} />
  <Gallery items={images3} />
  <Gallery items={images4} />
</Gallery>

Featured image

erbology
shoes
small bag
plants
watch
shoe
<script lang="ts">
  import { Gallery } from 'svelte-5-ui-lib';

  const image5 = {
    alt: "erbology",
    src: "https://flowbite.s3.amazonaws.com/docs/gallery/featured/image.jpg"
  };
  const images6 = [
    {
      alt: "shoes",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg"
    },
    {
      alt: "plants",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg"
    },
    {
      alt: "watch",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg"
    },
    {
      alt: "shoe",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg"
    }
  ];
</script>

<Gallery divClass="gap-4">
  <img src={image5.src} alt={image5.alt} class="h-auto max-w-full rounded-lg" />
  <!-- Safari needs gap -->
  <Gallery divClass="grid-cols-5 gap-4" items={images6} />
</Gallery>

Quad

shoes
small bag
plants
watch
<script lang="ts">
  import { Gallery } from 'svelte-5-ui-lib';

  const images7 = [
    {
      alt: "shoes",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg"
    },
    {
      alt: "plants",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg"
    },
    {
      alt: "watch",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg"
    }
  ];
</script>

<Gallery divClass="gap-2 grid-cols-2" items={images7} />

Gallery with tag

erbology
shoes
small bag
plants
watch
shoe
cream
small bag
lamp
toiletbag
playstation
bag
<script lang="ts">
  import { Gallery, Button } from 'svelte-5-ui-lib';

  const images8 = [
    {
      alt: "erbology",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
    },
    {
      alt: "shoes",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg"
    },
    {
      alt: "plants",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg"
    },
    {
      alt: "watch",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg"
    },
    {
      alt: "shoe",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg"
    },
    {
      alt: "cream",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg"
    },
    {
      alt: "lamp",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg"
    },
    {
      alt: "toiletbag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg"
    },
    {
      alt: "playstation",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg"
    },
    {
      alt: "bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg"
    }
  ];
</script>

<div class="mx-auto mb-3 flex flex-wrap items-center justify-center gap-3 py-4 md:py-8">
  <Button pill size="xl" outline>All categories</Button>
  <Button pill size="xl" color="alternative">Shoes</Button>
  <Button pill size="xl" color="alternative">Bags</Button>
  <Button pill size="xl" color="alternative">Electronics</Button>
  <Button pill size="xl" color="alternative">Gaming</Button>
</div>

<Gallery items={images8} divClass="gap-4 grid-cols-2 md:grid-cols-3" />

Heterogeneous

shoas
Sale
Sale
plants
<script lang="ts">
  import { Gallery } from 'svelte-5-ui-lib';
</script>

<Gallery divClass="gap-4 grid-cols-2">
  <img src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg" alt="shoas" class="max-w- h-auto rounded-lg" />
  <div class="max-w- flex h-auto items-center justify-center rounded-lg bg-red-300 text-6xl font-extrabold">Sale</div>
  <div class="max-w- flex h-auto items-center justify-center rounded-lg bg-blue-300 text-6xl font-extrabold">Sale</div>
  <img alt="plants" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg" class="max-w- h-auto rounded-lg" />
</Gallery>

Custom image rendering

shoes
small bag
plants
watch
shoe
<script lang="ts">
  import { Gallery, type ImgType } from 'svelte-5-ui-lib';

  const images9 = [
    {
      alt: "shoes",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
    },
    {
      alt: "small bag",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg"
    },
    {
      alt: "plants",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg"
    },
    {
      alt: "watch",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg"
    },
    {
      alt: "shoe",
      src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg"
    }
  ];
</script>

{#snippet figure(item: ImgType)}
  <div class="p-1 ring-4 ring-red-600 dark:ring-red-400">
    <img src={item.src} alt={item.alt} class="h-auto max-w-full" />
  </div>
{/snippet}

<Gallery divClass="gap-4 grid-cols-3">
  {#each images9 as item}
    {@render figure(item)}
  {/each}
</Gallery>

Component data

codewithshin.com
  • Repo
  • About