Image Gallery Guide

This guide demonstrates how to use image galleries in the documentation.

Basic Gallery

To create a simple image gallery, add multiple images with the same data-gallery attribute:

![Image 1](https://via.placeholder.com/300x200/1E88E5/FFFFFF?text=Image+1 "Image 1"){.glightbox data-gallery="group1"}
![Image 2](https://via.placeholder.com/300x200/43A047/FFFFFF?text=Image+2 "Image 2"){.glightbox data-gallery="group1"}
![Image 3](https://via.placeholder.com/300x200/E53935/FFFFFF?text=Image+3 "Image 3"){.glightbox data-gallery="group1"}
![Image 4](https://via.placeholder.com/300x200/FDD835/000000?text=Image+4 "Image 4"){.glightbox data-gallery="group1"}

Which renders as:

Multiple Galleries

You can have multiple galleries on the same page by using different data-gallery values:

Gallery A

Gallery B

Gallery with Different Image Sizes

The gallery adapts to different image sizes while maintaining a clean layout:

Using with Documentation Screenshots

Galleries are perfect for showing interface screenshots or step-by-step processes:

Technical Details

The gallery functionality is powered by GLightbox, a pure JavaScript lightbox library with mobile support.

Features

• Responsive design
• Mobile-friendly touch navigation
• Keyboard navigation
• Fullscreen mode
• Zoom capability
• Caption support

Implementation Notes

The gallery script automatically:

1. Groups images with the same data-gallery attribute
2. Creates a responsive grid layout for each group
3. Handles captions using the image's title attribute
4. Opens a lightbox gallery when an image is clicked

![Image Description](path/to/image.jpg "Optional Title"){.glightbox data-gallery="group-name"}

Video Support

GLightbox also supports embedding videos. For example:

[Video Title](https://www.youtube.com/watch?v=dQw4w9WgXcQ){.glightbox}

For more details, see the GLightbox documentation.