Lightbox

Lightbox — відкриває зображення чи інший контент у спливаючому вікні поверх сторінки, з навігацією між кількома елементами (стрілки “вперед/назад”).

vue

<script setup>
const lbVisible = ref(false);
const startIndex = ref(0);
const imgs = [
  'https://picsum.photos/id/1018/1000/600',
  'https://picsum.photos/id/1025/1000/600',
  'https://picsum.photos/id/1026/1000/600',
  'https://picsum.photos/id/1028/1000/600',
  'https://picsum.photos/id/1030/1000/600',
  'https://picsum.photos/id/1035/1000/600'
]

</script>

<template>
<button @click="lbVisible=true"> Lightbox </button>
<Lightbox  
    v-model="lbVisible" 
    :startIndex="startIndex"
    :ignoreFormat="true"
    @update:index="(i) => (startIndex = i)"
    :images="imgs"
/>
</template>

Keyboard navigation: left, right, esc

export interface Props {  
  ignoreFormat?: boolean // always show image 
  images: string[]    // image or url list
  startIndex?: number // start index
  download?: boolean  // can download
  delete?: boolean   // can delete
}

Lightbox ​