nb-image-gallery

<template>
  <NbImageGallery
    nb-id="gallery-basic"
    :images="images"
  />
</template>

<script setup>
import { ref } from 'vue'

const images = ref([
  { 
    url: 'https://example.com/img1.jpg', 
    alt: 'Image 1',
    width: 1200,
    height: 800
  },
  { 
    url: 'https://example.com/img2.jpg', 
    alt: 'Image 2',
    width: 1200,
    height: 800
  },
  { 
    url: 'https://example.com/img3.jpg', 
    alt: 'Image 3',
    width: 1200,
    height: 800
  }
])
</script>

<template>
  <NbImageGallery
    nb-id="gallery-custom"
    :images="images"
    :initial-image-index="2"
  />
</template>

<template>
  <NbImageGallery
    nb-id="gallery-styled"
    :images="images"
    :thumbnail-size="100"
    :thumbnail-gap="12"
    thumbnail-border-color="#ff0000"
    :thumbnail-border-width="3"
    :border-radius="0.5"
  />
</template>

<template>
  <NbImageGallery
    nb-id="gallery-custom-controls"
    :images="images"
  >
    <template #preview-controls="{
      previewRotateLeft,
      previewRotateRight,
      previewZoomIn,
      previewZoomOut,
      previewClose,
      previewFirst,
      previewPrevious,
      previewNext,
      previewLast,
      previewInfos
    }">
      <div class="custom-controls">
        <button @click="previewRotateLeft()">↺ Rotate Left</button>
        <button @click="previewRotateRight()">↻ Rotate Right</button>
        <button @click="previewZoomIn()">+ Zoom In</button>
        <button @click="previewZoomOut()">- Zoom Out</button>
        <button @click="previewClose()">✕ Close</button>
        <button @click="previewFirst()">⏮ First</button>
        <button @click="previewPrevious()">◀ Previous</button>
        <span>{{ previewInfos.currentIndex }} / {{ previewInfos.totalImages }}</span>
        <button @click="previewNext()">Next ▶</button>
        <button @click="previewLast()">Last ⏭</button>
      </div>
    </template>
  </NbImageGallery>
</template>

<template>
  <NbImageGallery
    nb-id="gallery-blur"
    :images="images"
    :has-backdrop-blur="true"
    :backdrop-blur="10"
    :backdrop-rgb-color="{ r: 0, g: 0, b: 0 }"
    :backdrop-alpha="0.8"
  />
</template>

<template>
  <NbImageGallery
    nb-id="gallery-optimized"
    :images="optimizedImages"
    loading="lazy"
    decoding="async"
  />
</template>

<script setup>
import { ref } from 'vue'

const optimizedImages = ref([
  {
    url: 'https://example.com/img1-1200.jpg',
    alt: 'Image 1',
    srcset: 'img1-300.jpg 300w, img1-600.jpg 600w, img1-1200.jpg 1200w',
    sizes: '(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px',
    width: 1200,
    height: 800
  },
  {
    url: 'https://example.com/img2-1200.jpg',
    alt: 'Image 2',
    srcset: 'img2-300.jpg 300w, img2-600.jpg 600w, img2-1200.jpg 1200w',
    sizes: '(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px',
    width: 1200,
    height: 800
  }
])
</script>

<template>
  <NbImageGallery
    nb-id="gallery-events"
    :images="images"
    @clicked="handleThumbnailClick"
    @image-changed="handleImageChange"
  />
</template>

<script setup>
const handleThumbnailClick = ({ index, image }) => {
  console.log('Thumbnail clicked:', index, image)
}

const handleImageChange = ({ index, image }) => {
  console.log('Image changed to:', index, image)
}
</script>