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-9715-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-54ab">
<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-8be1-title">
<title id="icon-8be1-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-9715-label">Slide 1: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-d68a-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-54ab">
<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-c3f1-title">
<title id="icon-c3f1-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-d68a-label">Slide 2: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-a857-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-54ab">
<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-a62f-title">
<title id="icon-a62f-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-a857-label">Slide 3: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-60c1-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-54ab">
<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-9782-title">
<title id="icon-9782-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-60c1-label">Slide 4: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-1299-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-54ab">
<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-42b8-title">
<title id="icon-42b8-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-1299-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-4c95-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-119a">
<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-d5ae-title">
<title id="icon-d5ae-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-4c95-label">Slide 1: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-43e5-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-119a">
<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-3577-title">
<title id="icon-3577-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-43e5-label">Slide 2: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-a414-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-119a">
<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-b6db-title">
<title id="icon-b6db-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-a414-label">Slide 3: Ich bin eine optionale BU</figcaption>
</figure>
</div>
<div class="gallery__slider-item">
<figure class="figure" aria-labelledby="figure-2af5-label"><a class="figure__media figure__media--lightbox js-lightbox" data-size="undefinedxundefined" data-gallery="lightbox-119a">
<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-6e8d-title">
<title id="icon-6e8d-title">List</title>
<use xlink:href="#icon-expand"></use>
</svg></div>
</a>
<figcaption class="figure__caption" id="figure-2af5-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
}