### Project Development Setup and Commands

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

Instructions for setting up the development environment for the Vue It Bigger project. This involves cloning the repository, installing dependencies, and running development, testing, and build commands.

```bash
yarn install
yarn dev
```

```bash
yarn test
yarn lint
```

```bash
yarn build
```

--------------------------------

### Install Vue It Bigger using npm or yarn

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

This snippet shows how to install the vue-it-bigger package using either npm or yarn. These are the standard package managers for Node.js projects.

```bash
npm install vue-it-bigger
# or
yarn add vue-it-bigger
```

--------------------------------

### Vue 3 Composition API with Script Setup for Lightbox

Source: https://context7.com/haiafara/vue-it-bigger/llms.txt

Shows how to integrate the vue-it-bigger lightbox with Vue 3's Composition API using the script setup syntax. It utilizes template refs to access component methods for programmatic control and handles various events. Dependencies include 'vue-it-bigger' and its CSS.

```vue
<template>
  <div>
    <div class="gallery">
      <img
        v-for="(item, index) in media"
        :key="index"
        :src="item.thumb"
        @click="lightbox?.showImage(index)"
        style="width: 150px; cursor: pointer; margin: 5px;"
      />
    </div>

    <LightBox
      ref="lightbox"
      :media="media"
      :show-light-box="false"
      :show-caption="true"
      :show-thumbs="true"
      :n-thumbs="5"
      @onOpened="onOpen"
      @onClosed="onClose"
      @onImageChanged="onImageChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LightBox from 'vue-it-bigger'
import 'vue-it-bigger/dist/vue-it-bigger.css'

const lightbox = ref(null)

const media = ref([
  {
    thumb: 'https://example.com/thumb1.jpg',
    src: 'https://example.com/image1.jpg',
    caption: 'Mountain View',
  },
  {
    type: 'youtube',
    thumb: 'https://img.youtube.com/vi/WsptdUFthWI/hqdefault.jpg',
    id: 'WsptdUFthWI',
    caption: 'Music Cover',
  },
  {
    type: 'video',
    thumb: 'https://example.com/video-thumb.jpg',
    sources: [{ src: 'https://example.com/video.mp4', type: 'video/mp4' }],
    width: 1280,
    height: 720,
    caption: 'Sample Video',
  },
])

const onOpen = () => {
  console.log('Gallery opened')
}

const onClose = () => {
  console.log('Gallery closed')
}

const onImageChange = (index) => {
  console.log('Viewing media at index:', index)
}

// Programmatic navigation
const goToImage = (index) => {
  lightbox.value?.showImage(index)
}

const navigateNext = () => {
  lightbox.value?.nextImage()
}

const navigatePrevious = () => {
  lightbox.value?.previousImage()
}
</script>
```

--------------------------------

### Define media structure for Vue It Bigger

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

This JavaScript object defines the structure for the 'media' prop used by the LightBox component. It includes examples for images, YouTube videos, and self-hosted videos, specifying properties like 'type', 'thumb', 'src', 'id', 'sources', 'caption', 'width', and 'height'.

```javascript
[
  { // For an image
    type: 'image', // Can be omitted for image
    thumb: 'http://example.com/thumb.jpg',
    src: 'http://example.com/image.jpg',
    caption: 'Caption to display. HTML <b>enabled</b>', // Optional
    srcset: '...' // Optional for displaying responsive images
  },
  { // For a YouTube video
    type: 'youtube',
    thumb: 'https://img.youtube.com/vi/WsptdUFthWI/hqdefault.jpg',
    id: 'WsptdUFthWI',
    caption: 'HTML <b>enabled</b> caption to display' // Optional
  },
  { // For a video that can be played in the <video> tag
    type: 'video',
    thumb: 'https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg',
    sources: [
      {
        src: 'https://www.w3schools.com/html/mov_bbb.mp4',
        type: 'video/mp4'
      }
    ],
    caption: '<h4>Monsters Inc.</h4>',
    width: 800, // Required
    height: 600, // Required
    autoplay: true // Optional: Autoplay video when the lightbox opens
  }
]
```

--------------------------------

### Basic LightBox Component Integration in Vue

Source: https://context7.com/haiafara/vue-it-bigger/llms.txt

Demonstrates how to import and use the LightBox component in a Vue 3 application. It includes setting up a thumbnail gallery and programmatically opening the lightbox with a specified index. Requires Vue 3 and the 'vue-it-bigger' package.

```vue
<template>
  <div>
    <!-- Thumbnail gallery -->
    <ul style="margin: 0; padding: 0">
      <li
        v-for="(image, index) in media"
        :key="index"
        style="display: inline-block; margin: 0 5px 5px 0"
      >
        <img
          :src="image.thumb"
          style="height: 100px; cursor: pointer"
          @click="openGallery(index)"
        >
      </li>
    </ul>

    <!-- LightBox component -->
    <LightBox
      ref="lightbox"
      :media="media"
      :show-caption="true"
      :show-light-box="false"
    />
  </div>
</template>

<script>
import LightBox from 'vue-it-bigger'
import 'vue-it-bigger/dist/vue-it-bigger.css'

export default {
  components: {
    LightBox,
  },

  data() {
    return {
      media: [
        {
          thumb: 'https://example.com/thumb1.jpg',
          src: 'https://example.com/image1.jpg',
          caption: 'Beautiful landscape',
        },
        {
          thumb: 'https://example.com/thumb2.jpg',
          src: 'https://example.com/image2.jpg',
          caption: 'City skyline at night',
        },
      ],
    }
  },

  methods: {
    openGallery(index) {
      this.$refs.lightbox.showImage(index)
    },
  },
}
</script>
```

--------------------------------

### Vue It Bigger component methods

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

This table lists the available methods for the Vue It Bigger LightBox component. These methods allow programmatic control over the lightbox, such as navigating between images, closing the lightbox, or displaying a specific image.

```markdown
| name | arguments | description |
|------|-----------|-------------|
| nextImage | () | Move to next image |
| previousImage | () | Move to previous image |
| closeLightBox | () | Close lightbox |
| showImage | (index) | Show the image at index |
```

--------------------------------

### Vue Component Usage with Custom Caption Slot

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

Demonstrates how to use the LightBox component with a custom caption slot to display additional information for the current media item. This requires the 'vue' and 'vue-it-bigger' packages.

```javascript
<LightBox
  ref="customCaptionLightbox"
  :media="media"
  :show-caption="true"
>
  <template v-slot:customCaption="slotProps">
    {{ slotProps.currentMedia.caption }}<br>
    There could be some description here.
  </template>
</LightBox>
```

--------------------------------

### Use LightBox component in Vue 3 template

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

This HTML snippet demonstrates the basic usage of the LightBox component within a Vue 3 template. It shows how to bind the 'media' prop to a data property named 'media'.

```html
<LightBox :media="media"></LightBox>
```

--------------------------------

### Import Vue It Bigger component and CSS in Vue 3

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

This JavaScript code demonstrates how to import the LightBox component and its associated CSS file within the script section of a Vue 3 component. This is necessary to use the component in your template.

```javascript
import LightBox from 'vue-it-bigger'
import 'vue-it-bigger/dist/vue-it-bigger.css'
```

--------------------------------

### Programmatically Control Lightbox with Vue Component Methods

Source: https://context7.com/haiafara/vue-it-bigger/llms.txt

This snippet illustrates how to control the lightbox component programmatically using methods exposed via a template ref. It demonstrates opening specific images, navigating between them, and closing the lightbox.

```vue
<template>
  <div>
    <div class="controls">
      <button @click="openFirst">Open First Image</button>
      <button @click="openLast">Open Last Image</button>
      <button @click="goNext">Next</button>
      <button @click="goPrevious">Previous</button>
      <button @click="close">Close</button>
    </div>

    <LightBox
      ref="lightbox"
      :media="media"
      :show-light-box="false"
    />
  </div>
</template>

<script>
import LightBox from 'vue-it-bigger'
import 'vue-it-bigger/dist/vue-it-bigger.css'

export default {
  components: { LightBox },

  data() {
    return {
      media: [
        { thumb: '/thumb1.jpg', src: '/image1.jpg' },
        { thumb: '/thumb2.jpg', src: '/image2.jpg' },
        { thumb: '/thumb3.jpg', src: '/image3.jpg' },
      ],
    }
  },

  methods: {
    openFirst() {
      this.$refs.lightbox.showImage(0)
    },
    openLast() {
      this.$refs.lightbox.showImage(this.media.length - 1)
    },
    goNext() {
      this.$refs.lightbox.nextImage()
    },
    goPrevious() {
      this.$refs.lightbox.previousImage()
    },
    close() {
      this.$refs.lightbox.closeLightBox()
    },
  },
}
</script>
```

--------------------------------

### Implement Infinite Scroll with Vue It Bigger

Source: https://context7.com/haiafara/vue-it-bigger/llms.txt

This Vue.js component demonstrates how to implement infinite scroll using the `vue-it-bigger` library. It utilizes the `lengthToLoadMore` prop to trigger the `onLoad` event when the user is near the end of the media list, subsequently fetching and appending more media items. The `fetchMedia` method handles the API call and updates the `media` data property.

```vue
<template>
  <LightBox
    ref="lightbox"
    :media="media"
    :length-to-load-more="3"
    :show-light-box="false"
    @onLoad="loadMoreMedia"
    @onLastIndex="handleLastIndex"
  />
</template>

<script>
import LightBox from 'vue-it-bigger'
import 'vue-it-bigger/dist/vue-it-bigger.css'

export default {
  components: { LightBox },

  data() {
    return {
      media: [],
      page: 1,
      isLoading: false,
    }
  },

  mounted() {
    this.fetchMedia()
  },

  methods: {
    async fetchMedia() {
      if (this.isLoading) return
      this.isLoading = true

      try {
        const response = await fetch(`/api/images?page=${this.page}`)
        const newImages = await response.json()

        this.media.push(...newImages.map(img => ({
          thumb: img.thumbnail_url,
          src: img.full_url,
          caption: img.title,
        })))

        this.page++
      } catch (error) {
        console.error('Failed to load images:', error)
      } finally {
        this.isLoading = false
      }
    },

    loadMoreMedia() {
      // Triggered when 3 images from end (lengthToLoadMore)
      this.fetchMedia()
    },

    handleLastIndex() {
      console.log('User reached the last image')
    },
  },
}
</script>
```

--------------------------------

### Configure Lightbox Behavior with Vue Component Props

Source: https://context7.com/haiafara/vue-it-bigger/llms.txt

This snippet demonstrates how to configure the lightbox component using various props. It covers settings for thumbnails, autoplay, captions, timing, and accessibility text. The component uses sensible defaults but allows for extensive customization.

```vue
<template>
  <LightBox
    ref="lightbox"
    :media="media"
    :show-light-box="false"
    :start-at="0"
    :n-thumbs="7"
    :show-thumbs="true"
    :auto-play="false"
    :auto-play-time="3000"
    :interface-hide-time="3000"
    :show-caption="true"
    :disable-scroll="true"
    :length-to-load-more="3"
    :closable="true"
    close-text="Close (Esc)"
    previous-text="Previous"
    next-text="Next"
    @onOpened="handleOpened"
    @onClosed="handleClosed"
    @onImageChanged="handleImageChanged"
    @onLastIndex="loadMoreImages"
    @onFirstIndex="handleFirstIndex"
    @onStartIndex="handleStartIndex"
    @onLoad="fetchMoreMedia"
  />
</template>

<script>
import LightBox from 'vue-it-bigger'
import 'vue-it-bigger/dist/vue-it-bigger.css'

export default {
  components: { LightBox },

  data() {
    return {
      media: [
        { thumb: '/thumb1.jpg', src: '/image1.jpg', caption: 'Image 1' },
        { thumb: '/thumb2.jpg', src: '/image2.jpg', caption: 'Image 2' },
      ],
    }
  },

  methods: {
    handleOpened() {
      console.log('Lightbox opened')
    },
    handleClosed() {
      console.log('Lightbox closed')
    },
    handleImageChanged(index) {
      console.log('Current image index:', index)
    },
    loadMoreImages() {
      console.log('Reached last image')
    },
    handleFirstIndex() {
      console.log('Reached first image')
    },
    handleStartIndex() {
      console.log('Returned to start position')
    },
    fetchMoreMedia() {
      // Fetch more images when approaching end of array
      this.media.push(
        { thumb: '/thumb3.jpg', src: '/image3.jpg', caption: 'Image 3' }
      )
    },
  },
}
</script>
```

--------------------------------

### Media Array Structure for Vue It Bigger

Source: https://context7.com/haiafara/vue-it-bigger/llms.txt

Defines the structure for the 'media' array used by the LightBox component. It supports images, YouTube videos, and HTML5 videos, each with specific properties for display and optional captions. This structure is crucial for populating the lightbox content.

```javascript
const media = [
  // Image (type can be omitted)
  {
    type: 'image',
    thumb: 'https://example.com/thumb.jpg',
    src: 'https://example.com/full-image.jpg',
    caption: 'Caption with <b>HTML</b> support',
    srcset: 'https://example.com/image-800.jpg 800w, https://example.com/image-1200.jpg 1200w',
  },

  // YouTube video
  {
    type: 'youtube',
    thumb: 'https://img.youtube.com/vi/WsptdUFthWI/hqdefault.jpg',
    id: 'WsptdUFthWI',
    caption: 'YouTube video with automatic embed',
  },

  // HTML5 video
  {
    type: 'video',
    thumb: 'https://example.com/video-thumb.jpg',
    sources: [
      {
        src: 'https://example.com/video.mp4',
        type: 'video/mp4',
      },
      {
        src: 'https://example.com/video.webm',
        type: 'video/webm',
      },
    ],
    caption: '<h4>Video Title</h4>',
    width: 800,
    height: 600,
    autoplay: true,
  },
]
```

--------------------------------

### Customize Lightbox UI with Vue Slots

Source: https://context7.com/haiafara/vue-it-bigger/llms.txt

Demonstrates how to customize the appearance and behavior of the vue-it-bigger lightbox using named slots. This allows for custom close buttons, navigation arrows, footers, captions, and video icons. It requires the 'vue-it-bigger' component and its CSS.

```vue
<template>
  <LightBox
    ref="lightbox"
    :media="media"
    :show-caption="true"
  >
    <!-- Custom close button -->
    <template #close>
      <span style="font-size: 24px; color: white;">✕</span>
    </template>

    <!-- Custom previous arrow -->
    <template #previous>
      <span style="font-size: 48px; color: white;">‹</span>
    </template>

    <!-- Custom next arrow -->
    <template #next>
      <span style="font-size: 48px; color: white;">›</span>
    </template>

    <!-- Custom footer with current/total display -->
    <template #footer="{ current, total }">
      <div style="color: white; text-align: center;">
        Photo {{ current }} of {{ total }}
      </div>
    </template>

    <!-- Custom caption with media data access -->
    <template #customCaption="{ currentMedia }">
      <div style="color: white; padding: 10px;">
        <h3>{{ currentMedia.caption }}</h3>
        <p v-if="currentMedia.description">{{ currentMedia.description }}</p>
      </div>
    </template>

    <!-- Custom video icon for thumbnails -->
    <template #videoIcon>
      <span style="font-size: 24px;">▶</span>
    </template>
  </LightBox>
</template>

<script>
import LightBox from 'vue-it-bigger'
import 'vue-it-bigger/dist/vue-it-bigger.css'

export default {
  components: { LightBox },

  data() {
    return {
      media: [
        {
          thumb: '/thumb1.jpg',
          src: '/image1.jpg',
          caption: 'Sunset Beach',
          description: 'A beautiful sunset at the beach',
        },
        {
          type: 'youtube',
          thumb: 'https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg',
          id: 'dQw4w9WgXcQ',
          caption: 'Music Video',
        },
      ],
    }
  },
}
</script>
```

--------------------------------

### Vue It Bigger component slots

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

This section describes the available slots for customizing the Vue It Bigger LightBox component. The 'close' slot allows modification of the close button content, and the 'footer' slot enables customization of the content displayed below the media, with access to current and total image counts.

```markdown
#### close
The content of the close button.

#### footer
The content of the footer under the image.

##### Slot props

| name | type | description |
|------|------|-------------|
| current | integer | Number of the current image displayed |
| total | integer | Number of images |
```

--------------------------------

### Register Vue It Bigger component in Vue 3

Source: https://github.com/haiafara/vue-it-bigger/blob/master/README.md

This JavaScript code shows how to register the imported LightBox component within the 'components' option of a Vue 3 component's export. This makes the LightBox component available for use in the component's template.

```javascript
export default {
  components: {
    LightBox,
  },
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.