Lightbox @gallery
<div class="gallery">
<div class="gallery__slides-frame">
<div class="gallery__slider">
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-cd24-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-17c1">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c9a5-title">
<title id="icon-c9a5-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-cd24-label">Slide 1: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-be89-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-17c1">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3b94-title">
<title id="icon-3b94-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-be89-label">Slide 2: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-1c67-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-17c1">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-4b3b-title">
<title id="icon-4b3b-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-1c67-label">Slide 3: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-4b98-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-17c1">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7525-title">
<title id="icon-7525-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-4b98-label">Slide 4: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-f7dd-label"><a class="figure__media figure__media--lightbox js-lightbox" href="https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600" data-size="900x600" data-gallery="lightbox-17c1">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7652-title">
<title id="icon-7652-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-f7dd-label">Slide 5: Ich bin eine optionale BU</figcaption>
</figure>
</div>
</div>
</div><button class="button button--primary gallery__button" type="button"><svg class="icon icon--gallery button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-gallery"></use>
</svg><span class="button__text">Bilder</span></button>
</div>{
"items": [
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"lightbox": {
"src": "https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600",
"width": 900,
"height": 600
},
"caption": "Slide 1: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"lightbox": {
"src": "https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600",
"width": 900,
"height": 600
},
"caption": "Slide 2: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"lightbox": {
"src": "https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600",
"width": 900,
"height": 600
},
"caption": "Slide 3: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"lightbox": {
"src": "https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600",
"width": 900,
"height": 600
},
"caption": "Slide 4: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"lightbox": {
"src": "https://bildermangel.de/900x600/F5F5F5/28281a.png?text=900x600",
"width": 900,
"height": 600
},
"caption": "Slide 5: Ich bin eine optionale BU"
}
}
],
"button": {
"text": "Bilder",
"icon": "gallery"
}
}
Slider @gallery--slider
<div class="gallery gallery--slider">
<div class="gallery__slides-frame">
<div class="gallery__slider">
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-84e1-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-9f1d">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d692-title">
<title id="icon-d692-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-84e1-label">Slide 1: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-b72c-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-9f1d">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d746-title">
<title id="icon-d746-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-b72c-label">Slide 2: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-d7a2-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-9f1d">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-024c-title">
<title id="icon-024c-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-d7a2-label">Slide 3: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-b27a-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-9f1d">
<div class="image loading" style="padding-top: 66.66666666666666%;"><noscript><img class="image__fallback" alt="Gallery Image" height="480" src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/720x480/F5F5F5/28281a.png?text=720x480" width="720" height="480" alt="Gallery Image" /></div>
<div class="icon-button figure__lightbox-button" aria-hidden="true"><svg class="icon icon--expand icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-9ba9-title">
<title id="icon-9ba9-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-b27a-label">Slide 4: Ich bin eine optionale BU</figcaption>
</figure>
</div>
</div>
</div>
<div class="gallery__controls slider__controls"></div>
</div>{
"items": [
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"caption": "Slide 1: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"caption": "Slide 2: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"caption": "Slide 3: Ich bin eine optionale BU"
}
},
{
"figure": {
"image": {
"width": 720,
"height": 480,
"alt": "Gallery Image"
},
"caption": "Slide 4: Ich bin eine optionale BU"
}
}
],
"button": null,
"slider": true
}