### Installation via Bower

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Install GLightbox using Bower.

```bash
bower install glightbox
```

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

### Installation via Yarn

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Install GLightbox using Yarn.

```bash
yarn add glightbox
```

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

### Install dependencies and watch for changes

Source: https://github.com/biati-digital/glightbox/blob/master/CONTRIBUTING.md

Commands to install project dependencies and start the development watch process.

```bash
npm install
npm run watch
```

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

### Audio Files

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Example of linking to audio files.

```html
<a href="audio.mp3" class="glightbox">
  <img src="icon.jpg" alt="Audio" />
</a>
```

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

### Development Commands

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Commands to install dependencies and start the development watch process.

```bash
$ npm install
$ npm run watch
```

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

### Basic Examples

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Examples demonstrating how to use GLightbox for simple images, videos, galleries, and content with descriptions.

```html
<!-- Simple image -->
<a href="large.jpg" class="glightbox">
  <img src="small.jpg" alt="image" />
</a>

<!-- Video -->
<a href="https://vimeo.com/115041822" class="glightbox2">
  <img src="small.jpg" alt="image" />
</a>

<!-- Gallery -->
<a href="large.jpg" class="glightbox3" data-gallery="gallery1">
  <img src="small.jpg" alt="image" />
</a>
<a href="video.mp4" class="glightbox3" data-gallery="gallery1">
  <img src="small.jpg" alt="image" />
</a>

<!-- Simple Description -->
<a href="large.jpg" class="glightbox4" data-glightbox="title: My title; description: this is the slide description">
  <img src="small.jpg" alt="image" />
</a>

<!-- Advanced Description -->
<a href="large.jpg" class="glightbox5" data-glightbox="title: My title; description: .custom-desc1">
  <img src="small.jpg" alt="image" />
</a>

<div class="glightbox-desc custom-desc1">
  <p>The content of this div will be used as the slide description</p>
  <p>You can add links and any HTML you want</p>
</div>

<!-- URL with no extension -->
<a href="https://picsum.photos/1200/800" data-glightbox="type: image">
  <img src="small.jpg" alt="image" />
</a>
<!-- OR using multiple data attributes -->
<a href="https://picsum.photos/1200/800" data-type="image">
  <img src="small.jpg" alt="image" />
</a>

<!-- Using responsive images: specify sizes and srcset through data attributes in the
     same way you would with the img tag.
     See: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images -->
<a href="default.jpg" class="glightbox6" data-title="Responsive example"
data-description="Your browser will choose the optimal image for the resolution"
data-sizes="(max-width: 600px) 480px, 800px"
data-srcset="img480.jpg 480w, img800.jpg 800w">
  <img src="small.jpg" alt="image" />
</a>
```

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

### getAllPlayers() Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Shows how to get all video player instances in the gallery and iterate through them.

```javascript
const allPlayers = lightbox.getAllPlayers();
for (const playerId in allPlayers) {
  const player = allPlayers[playerId];
  console.log(player);
}
```

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

### Installation

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Instructions for installing GLightbox using npm, yarn, or bower.

```bash
$ npm install glightbox
# OR
$ yarn add glightbox
# OR
$ bower install glightbox
```

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

### Basic Setup

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/INDEX.md

Import GLightbox and initialize it with a selector.

```javascript
import GLightbox from 'glightbox';

const lightbox = GLightbox({
  selector: '.glightbox'
});
```

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

### Constructor Options Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/configuration.md

Example of initializing GLightbox with various constructor options.

```javascript
const lightbox = GLightbox({
  selector: '.glightbox',
  openEffect: 'zoom',
  closeEffect: 'zoom',
  slideEffect: 'slide',
  // ... more options
});
```

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

### Self-Hosted Video

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Example of linking to self-hosted video files.

```html
<a href="video.mp4" class="glightbox">
  <img src="thumbnail.jpg" />
</a>

<a href="video.webm" class="glightbox">
  <img src="thumbnail.jpg" />
</a>
```

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

### CDN Installation (Global)

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Include GLightbox using CDN for global scope.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

<script>
  const lightbox = GLightbox();
</script>
```

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

### Example method use

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Demonstrates basic method calls for navigating and closing the lightbox.

```javascript
lightbox.nextSlide(); // Go to next slide
lightbox.close(); // Close the lightbox
```

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

### Installing GLightbox

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/INDEX.md

Install GLightbox using npm.

```bash
npm install glightbox
```

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

### Vimeo Video

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Example of linking to a Vimeo video.

```html
<a href="https://vimeo.com/115041822" class="glightbox">
  <img src="thumbnail.jpg" />
</a>
```

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

### Lightbox Options Example

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Demonstrates how to initialize GLightbox with various configuration options and how to define gallery elements programmatically.

```javascript
const lightbox = GLightbox({
    touchNavigation: true,
    loop: true,
    autoplayVideos: true
});

// Instead of using a selector, define the gallery elements
const myGallery = GLightbox({
    elements: [
        {
            'href': 'https://picsum.photos/1200/800',
            'type': 'image',
            'title': 'My Title',
            'description': 'Example',
        },
        {
            'href': 'https://picsum.photos/1200/800',
            'type': 'image',
            'alt': 'image text alternatives'
        },
        {
            'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
            'type': 'video',
            'source': 'youtube', //vimeo, youtube or local
            'width': 900,
        },
        {
            'content': '<p>This will append some html inside the slide</p>' // read more in the API section
        },
        {
            'content': document.getElementById('inline-example') // this will append a node inside the slide
        },
    ],
    autoplayVideos: true,
});
myGallery.open();

// If later you need to modify the elements you can use setElements
myGallery.setElements([...]);
```

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

### open Event Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Example of an event listener for the 'open' event.

```javascript
lightbox.on('open', () => {
  console.log('Lightbox is now open');
});
```

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

### version() Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Retrieves and logs the current version of GLightbox.

```javascript
console.log(lightbox.version()); // "3.3.1"
```

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

### YouTube Videos

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Examples of linking to YouTube videos using different URL formats.

```html
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="glightbox">
  <img src="thumbnail.jpg" />
</a>

<!-- Short URL -->
<a href="https://youtu.be/dQw4w9WgXcQ" class="glightbox">
  <img src="thumbnail.jpg" />
</a>

<!-- Embed URL -->
<a href="https://www.youtube.com/embed/dQw4w9WgXcQ" class="glightbox">
  <img src="thumbnail.jpg" />
</a>

<!-- Shorts URL -->
<a href="https://www.youtube.com/shorts/dQw4w9WgXcQ" class="glightbox">
  <img src="thumbnail.jpg" />
</a>
```

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

### CDN Installation (ES Modules)

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Include GLightbox using CDN for ES Modules.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script type="module">
  import GLightbox from 'https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js';
  const lightbox = GLightbox();
</script>
```

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

### GLightboxInit Class: open() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Shows how to open the lightbox at the current or specified index.

```javascript
const lightbox = GLightbox({ selector: '.glightbox' });

// Open at first slide
lightbox.open();

// Open at specific slide
lightbox.open(null, 2);

// Open triggered by an element
const link = document.querySelector('.glightbox');
lightbox.open(link);
```

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

### Navigation Control

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Provides examples of programmatically navigating through slides.

```javascript
const lightbox = GLightbox();

lightbox.nextSlide();        // Next slide
lightbox.prevSlide();        // Previous slide
lightbox.goToSlide(3);       // Go to specific slide
lightbox.openAt(2);          // Open at specific slide
lightbox.getActiveSlideIndex(); // Get current index
```

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

### GLightboxInit Class: openAt() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Demonstrates opening the lightbox at a specific slide index.

```javascript
lightbox.openAt(3); // Open at slide index 3
```

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

### Custom Theme

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Example of creating a custom theme for GLightbox using CSS and applying it via the 'skin' option.

```css
.glightbox-custom-dark {
  background: #1a1a1a;
}

.glightbox-custom-dark .goverlay {
  background: rgba(0, 0, 0, 0.9);
}

.glightbox-custom-dark .gbtn {
  color: #fff;
}

.glightbox-custom-dark .gslide-title {
  color: #fff;
}

.glightbox-custom-dark .gslide-desc {
  color: #ccc;
}
```

```javascript
const lightbox = GLightbox({
  skin: 'custom-dark'
});
```

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

### GLightboxInit Class: nextSlide() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Illustrates navigating to the next slide.

```javascript
lightbox.nextSlide();
```

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

### Custom API Events Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/architecture.md

Example of how to register custom API events using the `on()` and `once()` methods.

```javascript
lightbox.on('event_name', callback);
lightbox.once('event_name', callback);
```

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

### GLightboxInit Class: prevSlide() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Shows how to navigate to the previous slide.

```javascript
lightbox.prevSlide();
```

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

### Simple Image Gallery

Source: https://github.com/biati-digital/glightbox/blob/master/index.html

Basic example of creating an image gallery with GLightbox.

```html
<a href="demo/img/large/gm1.jpg"><img src="demo/img/small/gm1.jpg"></a>
<a href="demo/img/large/gm2.jpg"><img src="demo/img/small/gm2.jpg"></a>
<a href="demo/img/large/gm3.jpg"><img src="demo/img/small/gm3.jpg"></a>
<a href="demo/img/large/gm4.jpg"><img src="demo/img/small/gm4.jpg"></a>
<a href="demo/img/large/gm5.jpg"><img src="demo/img/small/gm5.jpg"></a>
<a href="demo/img/large/gm6.jpg"><img src="demo/img/small/gm6.jpg"></a>
```

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

### GLightboxInit Class: goToSlide() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Demonstrates navigating to a specific slide by index.

```javascript
lightbox.goToSlide(2);
```

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

### Custom Animations

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Example of configuring custom open and close animations using CSS effects.

```javascript
const lightbox = GLightbox({
  openEffect: 'bounce',
  closeEffect: 'bounce',
  cssEffects: {
    bounce: {
      in: 'bounceIn',
      out: 'bounceOut'
    }
  }
});
```

```css
@keyframes bounceIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.gbounceIn {
  animation: bounceIn 0.6s ease-out;
}

@keyframes bounceOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.3);
  }
}

.gbounceOut {
  animation: bounceOut 0.6s ease-in;
}
```

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

### Using Configuration Objects

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/configuration.md

Example of configuring individual slides using JavaScript objects.

```javascript
const lightbox = GLightbox({
  elements: [
    {
      href: 'image.jpg',
      type: 'image',
      title: 'My Title',
      description: 'My description',
      descPosition: 'left',
      width: '800px',
      height: '600px',
      zoomable: false,
      draggable: false
    }
  ]
});
```

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

### From DOM Element

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Initializes GLightbox with content from a DOM element.

```javascript
const content = document.getElementById('my-element');

const lightbox = GLightbox({
  elements: [
    {
      content: content,
      width: 'auto'
    }
  ]
});

lightbox.open();
```

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

### GLightboxInit Class: destroy() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Demonstrates how to completely destroy the lightbox instance.

```javascript
lightbox.destroy();
```

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

### AJAX example with GLightbox

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Illustrates how to use GLightbox with AJAX calls, creating an instance, inserting dynamic content, and opening the lightbox.

```javascript
// So imagine that you are making an ajax request that returns some html
// You can create an empty instance and append the content once is returned

const ajaxExample = GLightbox({ selector: null }); // or you can set the selector empty selector: ''

doAjaxCall({...}).then(response => {
    ajaxExample.insertSlide({
        width: '500px',
        content: response.html
    });
    ajaxExample.open();
})

// Or you could use the set elements method to empty all the slides if any

doAjaxCall({...}).then(response => {
    ajaxExample.setElements([
      {
        content: response.html
      }
    ]);
    ajaxExample.open();
})
```

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

### From HTML String

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Initializes GLightbox with inline HTML content provided as a string.

```javascript
const lightbox = GLightbox({
  elements: [
    {
      content: '<h2>Hello</h2><p>This is inline HTML</p>',
      width: '600px'
    }
  ]
});

lightbox.open();
```

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

### close Event Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Example of an event listener for the 'close' event.

```javascript
lightbox.on('close', () => {
  console.log('Lightbox is now closed');
});
```

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

### GLightboxInit Class: reload() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Shows how to reload the lightbox, useful after dynamic content changes.

```javascript
// After adding new elements to the DOM
lightbox.reload();
```

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

### Vue Integration Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Shows how to integrate GLightbox within a Vue.js component, managing the lightbox instance in `mounted` and `beforeUnmount` hooks.

```vue
<template>
  <div>
    <img
      v-for="(image, index) in images"
      :key="index"
      :src="image.thumbnail"
      @click="openLightbox(index)"
      :alt="image.title"
    />
  </div>
</template>

<script>
import GLightbox from 'glightbox';

export default {
  data() {
    return {
      lightbox: null,
      images: []
    };
  },
  mounted() {
    this.lightbox = GLightbox({
      elements: this.images.map(img => ({
        href: img.url,
        title: img.title
      }))
    });
  },
  methods: {
    openLightbox(index) {
      this.lightbox?.openAt(index);
    }
  },
  beforeUnmount() {
    this.lightbox?.destroy();
  }
};
</script>
```

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

### Basic Event Listening

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Example of listening for 'open' and 'slide_changed' events using the on() and once() methods.

```javascript
const lightbox = GLightbox();
lightbox.on('open', () => {
  // Do something
});

lightbox.once('slide_changed', () => {
  // Do something just one time
});
```

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

### GLightboxInit Class: close() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Illustrates how to close the currently open lightbox.

```javascript
lightbox.close();
```

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

### Images with Description

Source: https://github.com/biati-digital/glightbox/blob/master/index.html

Example of images with descriptions, demonstrating positioning and HTML content within descriptions.

```html
<a href="demo/img/large/gm7.jpg" data-description="You can set the position of the description in different ways for example top, bottom, left or right"><img src="demo/img/small/gm7.jpg"></a>
<a href="demo/img/large/gm8.jpg" data-title="Image Title" data-description="<p>This is a <strong>description</strong> with <a href=\"http://google.com\">a link</a>.</p>"><img src="demo/img/small/gm8.jpg"></a>
<a href="demo/img/large/gm9.jpg" data-description="Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae"><img src="demo/img/small/gm9.jpg"></a>
```

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

### Videos Gallery

Source: https://github.com/biati-digital/glightbox/blob/master/index.html

Example of creating a video gallery with support for Vimeo, YouTube, and self-hosted videos.

```html
<a href="https://vimeo.com/115041822" data-type="video" data-video-width="700"><img src="demo/img/small/gm10.jpg"></a>
<a href="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk" data-type="video" data-video-width="700"><img src="demo/img/small/gm11.jpg"></a>
<a href="./demo/pexels-video-1550080.mp4" data-type="video" data-video-width="700"><img src="demo/img/small/gm12.jpg"></a>
```

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

### slidePlayerPlay() Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Example of playing a video in a specific slide by its index.

```javascript
lightbox.slidePlayerPlay(1); // Play video in slide at index 1
```

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

### GLightbox Factory Function Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Demonstrates basic usage with a selector and programmatic elements.

```javascript
import GLightbox from 'glightbox';

// Basic usage with selector
const lightbox = GLightbox({
  selector: '.glightbox',
  openEffect: 'zoom',
  closeEffect: 'zoom'
});

// Usage with programmatic elements
const myGallery = GLightbox({
  elements: [
    {
      href: 'https://example.com/image1.jpg',
      type: 'image',
      title: 'Image 1'
    },
    {
      href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      type: 'video',
      width: 900
    }
  ]
});

myGallery.open();
```

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

### Video Configuration

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Configures video playback options for GLightbox.

```javascript
const lightbox = GLightbox({
  videosWidth: '960px',
  autoplayVideos: true,
  autofocusVideos: false,
  plyr: {
    css: 'https://cdn.plyr.io/3.6.12/plyr.css',
    js: 'https://cdn.plyr.io/3.6.12/plyr.js',
    config: {
      ratio: '16:9',
      youtube: {
        noCookie: true,
        rel: 0,
        iv_load_policy: 3
      },
      vimeo: {
        byline: false,
        portrait: false,
        title: false
      }
    }
  }
});
```

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

### Iframes and Inline Elements

Source: https://github.com/biati-digital/glightbox/blob/master/index.html

Example of embedding iframes and inline HTML content.

```html
<a href="#inline-example" data-type="inline"><img src="demo/img/small/gm14.jpg"></a>
<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2d-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6b%3A0x618706a9142daa0d!2sUpper+East+Side%2C+Nueva+York%2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642" data-type="iframe" data-iframe-width="700"><img src="demo/img/small/gm15.jpg"></a>
<a href="./demo/pexels-video-1550080.mp4" data-type="video" data-video-width="700"><img src="demo/img/small/gm16.jpg"></a>
```

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

### Custom HTML Structure

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Demonstrates how to provide a custom HTML structure for the lightbox.

```javascript
const customLightboxHTML = `
  <div id="glightbox-body" class="glightbox-container">
    <div class="goverlay"></div>
    <div class="gcontainer">
      <div id="glightbox-slider" class="gslider"></div>
      <button class="gnext gbtn">{nextSVG}</button>
      <button class="gprev gbtn">{prevSVG}</button>
      <button class="gclose gbtn">{closeSVG}</button>
    </div>
  </div>
`;

const lightbox = GLightbox({
  lightboxHTML: customLightboxHTML
});
```

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

### Next/Previous Navigation

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Provides examples for programmatic navigation through slides using next, previous, and goToSlide methods.

```javascript
const lightbox = GLightbox();

// Programmatic navigation
document.getElementById('next-btn').addEventListener('click', () => {
  lightbox.nextSlide();
});

document.getElementById('prev-btn').addEventListener('click', () => {
  lightbox.prevSlide();
});

// Go to specific slide
document.querySelectorAll('.thumbnail').forEach((thumb, index) => {
  thumb.addEventListener('click', () => {
    lightbox.goToSlide(index);
  });
});
```

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

### GLightboxInit Class: insertSlide() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Shows how to insert new slides at a specific position or at the end, including inline HTML.

```javascript
lightbox.insertSlide({
  href: 'https://example.com/image.jpg',
  type: 'image',
  title: 'New Slide'
});

// Insert at specific position
lightbox.insertSlide({
  href: 'https://www.youtube.com/watch?v=xxx',
  type: 'video',
  width: 900
}, 2);

// Insert inline HTML content
lightbox.insertSlide({
  content: '<p>Custom HTML content</p>',
  width: '500px'
}, 1);
```

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

### Replace All Slides

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Illustrates how to replace all existing slides with a new set of slides.

```javascript
lightbox.setElements([
  { href: 'image1.jpg', type: 'image' },
  { href: 'image2.jpg', type: 'image' },
  { href: 'https://vimeo.com/123456', type: 'video' }
]);
```

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

### Default Animations

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Example of how to configure default animations for GLightbox, including zoom and fade effects.

```javascript
const glightbox = GLightbox({
  openEffect: 'zoom',
  closeEffect: 'fade',
  cssEfects: {
    // This are some of the animations included, no need to overwrite
    fade: { in: 'fadeIn', out: 'fadeOut' },
    zoom: { in: 'zoomIn', out: 'zoomOut' }
  }
});
```

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

### setElements() Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Illustrates replacing the gallery slides with a new set of elements, including images, videos, and inline content.

```javascript
lightbox.setElements([
  {
    href: 'https://picsum.photos/1200/800',
    type: 'image',
    title: 'New Gallery 1'
  },
  {
    href: 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
    type: 'video',
    width: '900px'
  },
  {
    content: '<p>Inline content</p>',
    width: '500px'
  }
]);
```

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

### Simple Image Gallery Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/INDEX.md

HTML structure for a simple image gallery using GLightbox.

```html
<a href="large1.jpg" class="glightbox">
  <img src="thumb1.jpg" />
</a>
<a href="large2.jpg" class="glightbox">
  <img src="thumb2.jpg" />
</a>
```

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

### Custom Animation Example (Bounce)

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Demonstrates how to add a custom 'bounce' animation to GLightbox, including the CSS keyframes.

```javascript
const glightbox = GLightbox({
  openEffect: 'bounce', // Define that we want the bounce animation on open
  cssEfects: {
    // register our new animation
    bounce: { in: 'bounceIn', out: 'bounceOut' }
  }
});
```

```css
/*A g will be appended to the animation name so bounceIn will become gbounceIn */
.gbounceIn {
  animation: bounceIn 1.3s ease;
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
```

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

### Accessing GLightbox Object

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Example of how to access the GLightbox object by assigning the return value of the constructor to a variable.

```javascript
const lightbox = GLightbox({ ...options });
```

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

### Video Configuration Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/slides-and-content-types.md

Configuring a video slide with a custom title and width.

```html
<a href="https://www.youtube.com/watch?v=xxx" 
   class="glightbox"
   data-title="Video Title"
   data-width="900px">
  <img src="thumb.jpg" />
</a>
```

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

### Basic HTML Markup

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Add `data-glightbox` or `class="glightbox"` to trigger elements for basic usage.

```html
<!-- Simple image -->
<a href="large.jpg" class="glightbox">
  <img src="small.jpg" alt="Image" />
</a>

<!-- Video from YouTube -->
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="glightbox">
  <img src="thumbnail.jpg" alt="Video" />
</a>

<!-- Video from Vimeo -->
<a href="https://vimeo.com/115041822" class="glightbox">
  <img src="thumbnail.jpg" alt="Video" />
</a>

<!-- Self-hosted video -->
<a href="video.mp4" class="glightbox">
  <img src="thumbnail.jpg" alt="Video" />
</a>
```

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

### One-Time Events

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Demonstrates using `once()` to listen for an event only the first time it occurs.

```javascript
lightbox.once('open', () => {
  console.log('First time opening'); // Only logs once
});
```

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

### Add Single Slide at Runtime

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Shows how to add a single slide to the lightbox at runtime, for example, when a user uploads a photo.

```javascript
const gallery = GLightbox();
const gallery.open();

// User clicks "Add Photo" button
document.getElementById('add-photo').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  
  reader.onload = (event) => {
    gallery.insertSlide({
      href: event.target.result,
      type: 'image',
      title: file.name
    }, gallery.getActiveSlideIndex() + 1);
  };
  
  reader.readAsDataURL(file);
});
```

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

### Handling Slide Load Events

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Examples for 'slide_before_load' and 'slide_after_load' events, useful for modifying slides before or after content is loaded.

```javascript
// Useful to modify the slide
// before it's content is added
lightbox.on('slide_before_load', (data) => {
  // data is an object that contain the following
  const { slideIndex, slideNode, slideConfig, player, trigger } = data;

  // slideIndex - the slide index
  // slideNode - the node you can modify
  // slideConfig - will contain the configuration of the slide like title, description, etc.
  // player - the slide player if it exists otherwise will return false
  // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically
});

// Useful to execute scripts that depends
// on the slide to be ready with all it's content
// and already has a height
// data will contain all the info about the slide
lightbox.on('slide_after_load', (data) => {
  // data is an object that contain the following
  const { slideIndex, slideNode, slideConfig, player, trigger } = data;

  // slideIndex - the slide index
  // slideNode - the node you can modify
  // slideConfig - will contain the configuration of the slide like title, description, etc.
  // player - the slide player if it exists otherwise will return false
});
```

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

### Using HTML Data Attributes (Multiple)

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/configuration.md

Example of using multiple data-* attributes for slide-specific configuration.

```html
<!-- Multiple data-* attributes -->
<a href="image.jpg" 
   data-title="My Title"
   data-description="My description"
   data-desc-position="left"
   data-width="800px"
   data-height="600px"
   data-zoomable="false"
   data-draggable="false">
  <img src="thumb.jpg" alt="Thumbnail" />
</a>
```

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

### getActiveSlide() Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Demonstrates how to get the active slide DOM element and access its content.

```javascript
const activeSlide = lightbox.getActiveSlide();
console.log(activeSlide.querySelector('.gslide-title').textContent);
```

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

### once() Event Listener Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Registers an event listener that fires only the first time the 'open' event is triggered.

```javascript
lightbox.once('open', () => {
  console.log('Lightbox opened for the first time');
});
```

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

### GLightbox Configuration with Plyr Options

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Example of configuring GLightbox to use the Plyr player with custom CSS, JS, and configuration options.

```javascript
const lightbox = GLightbox({
  plyr: {
    css: 'https://cdn.plyr.io/3.5.6/plyr.css', // Default not required to include
    js: 'https://cdn.plyr.io/3.5.6/plyr.js', // Default not required to include
    config: {
      ratio: '16:9', // or '4:3'
      muted: false,
      hideControls: true,
      youtube: {
        noCookie: true,
        rel: 0,
        showinfo: 0,
        iv_load_policy: 3
      },
      vimeo: {
        byline: false,
        portrait: false,
        title: false,
        speed: true,
        transparent: false
      }
    }
  }
});
```

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

### getSlidePlayerInstance() Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Demonstrates retrieving a Plyr video player instance for a given slide index and checking its playing state.

```javascript
const player = lightbox.getSlidePlayerInstance(2);
if (player) {
  console.log(player.playing); // Check if video is playing
}
```

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

### Using HTML Data Attributes (Single)

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/configuration.md

Example of using a single data-glightbox attribute with semicolon-separated options.

```html
<!-- Single data-glightbox attribute (semicolon-separated) -->
<a href="image.jpg" 
   data-glightbox="title: My Title; description: My description; descPosition: left">
  <img src="thumb.jpg" alt="Thumbnail" />
</a>
```

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

### Per-Page Initialization

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Initializes multiple GLightbox galleries on a single page, each with potentially different configurations.

```javascript
// Initialize multiple galleries on a page
document.addEventListener('DOMContentLoaded', () => {
  const lightbox1 = GLightbox({
    selector: '.gallery1',
    openEffect: 'zoom'
  });

  const lightbox2 = GLightbox({
    selector: '.gallery2',
    openEffect: 'fade'
  });
});
```

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

### Update After AJAX

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Example of updating lightbox slides after fetching data via AJAX and then opening the lightbox.

```javascript
const lightbox = GLightbox({ selector: null }); // Empty lightbox

fetch('/api/images')
  .then(response => response.json())
  .then(images => {
    lightbox.setElements(images);
    lightbox.open();
  });
```

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

### React Integration Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Demonstrates how to integrate GLightbox within a React component, managing the lightbox instance lifecycle using `useEffect` and `useRef`.

```jsx
import { useEffect, useRef } from 'react';
import GLightbox from 'glightbox';

export function Gallery({ images }) {
  const lightboxRef = useRef(null);

  useEffect(() => {
    if (!lightboxRef.current) {
      lightboxRef.current = GLightbox({
        elements: images.map(img => ({
          href: img.url,
          title: img.title,
          description: img.description
        }))
      });
    }
    
    return () => {
      lightboxRef.current?.destroy();
      lightboxRef.current = null;
    };
  }, [images]);

  return (
    <div>
      {images.map((img, idx) => (
        <img
          key={idx}
          src={img.thumbnail}
          onClick={() => lightboxRef.current?.openAt(idx)}
          alt={img.title}
        />
      ))}
    </div>
  );
}
```

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

### Video Player Control

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Demonstrates how to control video playback programmatically, including play, pause, and getting player instances.

```javascript
const lightbox = GLightbox({ videosWidth: '900px' });

// Play video at index
lightbox.slidePlayerPlay(1);

// Pause video at index
lightbox.slidePlayerPause(1);

// Get player instance
const player = lightbox.getSlidePlayerInstance(1);
if (player) {
  console.log(player.playing);
  player.play();
  player.pause();
}

// Get all players
const allPlayers = lightbox.getAllPlayers();
for (const id in allPlayers) {
  const player = allPlayers[id];
  console.log(player);
}
```

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

### Basic Initialization

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Initializes GLightbox by finding all elements with the .glightbox class.

```javascript
import GLightbox from 'glightbox';

// Finds all elements with .glightbox class
const lightbox = GLightbox();
```

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

### slidePlayerPause() Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Example of pausing a video in a specific slide by its index.

```javascript
lightbox.slidePlayerPause(1); // Pause video in slide at index 1
```

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

### Payload Usage Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/types.md

Example of using the Payload type with the `on` method for the 'slide_changed' event.

```typescript
lightbox.on('slide_changed', (data: Payload<'slide_changed'>) => {
  console.log(data.prev.slideIndex);
  console.log(data.current.slideIndex);
});
```

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

### Get Current Position

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Shows how to get the current slide index and total number of slides using event listeners.

```javascript
const lightbox = GLightbox();

lightbox.on('slide_changed', (data) => {
  const currentIndex = lightbox.getActiveSlideIndex();
  const totalSlides = lightbox.elements.length;
  console.log(`Slide ${currentIndex + 1} of ${totalSlides}`);
});
```

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

### Basic Initialization

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/configuration.md

Simplest usage of GLightbox, targeting elements with the .glightbox class.

```javascript
import GLightbox from 'glightbox';

// Simplest usage - targets elements with .glightbox class
const lightbox = GLightbox();
```

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

### getActiveSlideIndex() Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Shows how to retrieve the index of the currently active slide.

```javascript
const currentIndex = lightbox.getActiveSlideIndex();
console.log(`Viewing slide ${currentIndex}`);
```

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

### Basic Initialization

Source: https://github.com/biati-digital/glightbox/blob/master/index.html

Initialize GLightbox with default settings.

```javascript
var lightbox = GLightbox();
```

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

### Example set custom gallery items

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Shows how to overwrite all existing gallery items with new ones, specifying href, type, and dimensions.

```javascript
// Example set custom gallery items
// This overwrites all the items in the gallery
lightbox.setElements([
  {
    'href': 'https://picsum.photos/1200/800',
    'type': 'image' // Type is only required if GLightbox fails to know what kind of content should display
  },
  {
    'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
    'type': 'video', // Type is only required if GLightbox fails to know what kind of content should display
    'width': '900px',
  },
  {
    'content': '<p>some html to append in the slide</p>',
    'width': '900px',
  }
]);
```

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

### Remove Slides

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Shows how to remove a slide from the lightbox by its index.

```javascript
lightbox.removeSlide(2); // Remove slide at index 2
```

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

### Slide Load Events

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Listens for events before and after a slide is loaded.

```javascript
lightbox.on('slide_before_load', (data) => {
  console.log('Loading slide', data.slideIndex);
});

lightbox.on('slide_after_load', (data) => {
  console.log('Slide loaded and rendered');
  // Modify the slide after it's loaded
  const slide = data.slideNode;
  slide.style.border = '2px solid gold';
});
```

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

### GLightbox Event Listeners

Source: https://github.com/biati-digital/glightbox/blob/master/README.md

Examples of how to listen for 'slide_inserted' and 'slide_removed' events in GLightbox.

```javascript
lightbox.on('slide_inserted', (data) => {
  // data is an object that contain the following
  const { slideIndex, slideNode, slideConfig, player, trigger } = data;

  // slideIndex - the slide index
  // slideNode - the node you can modify
  // slideConfig - will contain the configuration of the slide like title, description, etc.
  // player - the slide player if it exists otherwise will return false
  // trigger - null
});

// Trigger a function when a slide is removed
lightbox.on('slide_removed', (index) => {
  // index is the position of the element in the gallery
});
```

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

### on() Event Listener Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Registers event listeners for 'slide_changed' and 'open' events.

```javascript
lightbox.on('slide_changed', (data) => {
  console.log('Slide changed to:', data.current.slideIndex);
});

lightbox.on('open', () => {
  console.log('Lightbox opened');
});
```

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

### Completely Programmatic

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Initializes GLightbox without needing any DOM elements, providing elements directly via the API.

```javascript
// No DOM elements needed
const gallery = GLightbox({
  elements: [
    { href: 'image1.jpg', type: 'image' },
    { href: 'image2.jpg', type: 'image' }
  ]
});
```

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

### Slide Modification Events

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Listens for events when slides are inserted or removed.

```javascript
lightbox.on('slide_inserted', (data) => {
  console.log('Slide inserted at index', data.slideIndex);
});

lightbox.on('slide_removed', (index) => {
  console.log('Slide at index', index, 'was removed');
});
```

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

### Slide Change Events

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Listens for events related to slide changes.

```javascript
lightbox.on('slide_before_change', ({ prev, current }) => {
  console.log('Changing from slide', prev.slideIndex, 'to', current.slideIndex);
});

lightbox.on('slide_changed', ({ prev, current }) => {
  console.log('Now viewing slide', current.slideIndex);
  if (current.player) {
    console.log('This slide contains a video');
  }
});
```

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

### Open & Close Events

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Listens for lightbox open and close events.

```javascript
const lightbox = GLightbox();

lightbox.on('open', () => {
  console.log('Lightbox opened');
});

lightbox.on('close', () => {
  console.log('Lightbox closed');
});
```

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

### Programmatic Gallery

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/configuration.md

Creating a gallery programmatically with a list of elements and options, and opening it.

```javascript
const gallery = GLightbox({
  elements: [
    {
      href: 'https://picsum.photos/1200/800?random=1',
      type: 'image',
      title: 'Image 1',
      description: 'First image in the gallery'
    },
    {
      href: 'https://picsum.photos/1200/800?random=2',
      type: 'image',
      title: 'Image 2',
      description: 'Second image in the gallery'
    },
    {
      href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      type: 'video',
      title: 'YouTube Video',
      width: 900
    }
  ],
  loop: true
});

gallery.open();
```

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

### Global Description Position

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Sets the global position for slide descriptions.

```javascript
const lightbox = GLightbox({
  descPosition: 'left' // 'bottom', 'top', 'left', 'right'
});
```

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

### Add Slides from API

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Demonstrates how to dynamically add multiple slides to the lightbox from an API response.

```javascript
const gallery = GLightbox({ elements: [] });

async function loadMoreSlides() {
  const response = await fetch('/api/images');
  const images = await response.json();
  
  images.forEach(image => {
    gallery.insertSlide({
      href: image.url,
      type: 'image',
      title: image.title,
      description: image.caption
    });
  });
  
  gallery.open();
}

document.getElementById('load-btn').addEventListener('click', loadMoreSlides);
```

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

### Responsive Styling

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Optimize GLightbox styling for mobile devices using media queries.

```css
/* Mobile optimizations */
@media (max-width: 768px) {
  .glightbox-custom .gslider {
    padding: 10px;
  }
  
  .glightbox-custom .gbtn {
    width: 40px;
    height: 40px;
  }
  
  .glightbox-custom .gslide-description {
    font-size: 14px;
  }
}
```

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

### GLightboxInit Class: removeSlide() Method Example

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/api-reference.md

Illustrates removing a slide at a specified index.

```javascript
lightbox.removeSlide(2);
```

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

### Open at Specific Index

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Demonstrates how to open the lightbox and optionally specify which slide to display first, either programmatically or from an element.

```javascript
const lightbox = GLightbox();

// Open gallery
lightbox.open();

// Open at a specific slide
lightbox.openAt(3);

// Open triggered by an element
const element = document.querySelector('.gallery-item');
lightbox.open(element);

// Open at index from data attribute
const index = parseInt(element.dataset.index);
lightbox.open(null, index);
```

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

### Selector-Based Gallery

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/configuration.md

Initializing GLightbox with a specific selector and custom effects.

```javascript
const lightbox = GLightbox({
  selector: '.image-gallery',
  openEffect: 'fade',
  closeEffect: 'fade',
  slideEffect: 'fade'
});
```

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

### Track Navigation

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/recipes-and-patterns.md

Demonstrates how to use event listeners to track slide navigation, including before and after slide changes.

```javascript
const lightbox = GLightbox();

lightbox.on('slide_before_change', ({ prev, current }) => {
  console.log(`Moving from slide ${prev.slideIndex} to ${current.slideIndex}`);
});

lightbox.on('slide_changed', ({ current }) => {
  console.log(`Now viewing: ${current.slideConfig.title}`);
});
```

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

### Programmatic Galleries

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/usage-guide.md

Define slides entirely in JavaScript without HTML markup.

```javascript
const gallery = GLightbox({
  elements: [
    {
      href: 'image1.jpg',
      type: 'image',
      title: 'Image 1',
      description: 'First slide'
    },
    {
      href: 'image2.jpg',
      type: 'image',
      title: 'Image 2'
    },
    {
      href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      type: 'video',
      title: 'YouTube Video',
      width: 900
    },
    {
      href: 'video.mp4',
      type: 'video',
      source: 'local',
      width: '90vw'
    },
    {
      content: '<p>Custom HTML content</p>',
      width: '500px'
    },
    {
      content: document.getElementById('my-element'),
      width: 'auto'
    }
  ],
  loop: true,
  autoplayVideos: true
});

gallery.open();
```

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

### DOM Element Content

Source: https://github.com/biati-digital/glightbox/blob/master/_autodocs/slides-and-content-types.md

Example of inserting a direct DOM element into a slide.

```javascript
const element = document.getElementById('my-element');

lightbox.insertSlide({
  content: element,
  width: 'auto',
  height: 'auto'
});
```