# Image - Gallery

The image gallery element is a visually appealing way to present multiple images in a gallery format, enhanced by an interactive **Lightbox function**. Users can enlarge and focus on the images in the gallery by clicking on them and switch between them.

This element is ideal for showcasing products, projects, portfolios, or events attractively.

<figure><img src="/files/GWrQHdjj0ZAs7OB3RxAN" alt=""><figcaption></figcaption></figure>

### Image Gallery Settings

<figure><img src="/files/4oUxR49MSQ2opLARnInB" alt=""><figcaption></figcaption></figure>

### General Settings

<figure><img src="/files/X7G4eI2F2rD8YKcOaAhJ" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Spacing between images (1)</td><td>The empty space between the images can be determined here.</td></tr><tr><td>Fixed height of images (2)</td><td>Images vary greatly in format. This function sets the image crop to create a uniform layout.</td></tr><tr><td>Select layout (3)</td><td>Grid = Images arranged in a grid<br>Slider = Images displayed as a slider<br>Masonry = Irregular grid with variance</td></tr></tbody></table>

### Lightbox Settings

<figure><img src="/files/zWB3UgHsvSgyaLm1BQnQ" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="271">Function</th><th>Description</th></tr></thead><tbody><tr><td>Show image title (1)</td><td>The title assigned to the image in the Shopware media library will be displayed here.</td></tr><tr><td>Enable arrow navigation (2)</td><td>If disabled, navigation can still be done via swipe.</td></tr><tr><td>Image numbering (3)</td><td>This numbers the images, so it's always clear how many images are left to see.</td></tr><tr><td>Share images (4)</td><td>Allow customers to share the images on social networks.</td></tr><tr><td>Loading animation (5)</td><td>During the loading process of the lightbox, an animation is executed. You have various options here.</td></tr><tr><td>Loading animation color (6)</td><td>The color of the animation elements.</td></tr><tr><td>Overlay background color (7)</td><td>The lightbox darkens the surrounding area. Here you can choose the color.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rh-webdesign.com/cms-bundle/en/elemente/medien/bild-galerie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.