Image Gallery

Die Darstellung einer Sammlung von Bildern kann mit Hilfe der Image Gallery erfolgen. Hier werden die Bilder in einem Swiper dargestellt und erhalten zusätzlich Funktionen, beispielsweise sie im Vollbild anzuzeigen. Außerdem kann und soll zu dem Bild ein Beschreibungstext und ein Copyright angegeben werden. (Based on Swiperjs). For lazy loading see (https://swiperjs.com/swiper-api#lazy-loading)

The Image Gallery can be used to display a collection of images. The images are displayed in a swiper and receive additional functions such as fullscreen display. Each image must have a descriptive text and copyright information specified for it. (Based on Swiperjs). For lazy loading see (https://swiperjs.com/swiper-api#lazy-loading)

.modul-bildergalerie

Bildergalerie Titel

Bildbeschreibung Bild 3 Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

@copyright
Bildbeschreibung Bild 1 Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

@copyright
Bildbeschreibung Bild 2 Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.

@copyright

<div class="modul-bildergalerie">
    <h2 class="title">Bildergalerie Titel </h2>
   
    <div class="swiper-container swiper">
        <div class="swiper-button-prev" title="Vorheriges Bild"></div>
        <div class="swiper-button-next" title="Nächstes Bild"></div>
        <ul class="swiper-wrapper">
            <li class="swiper-slide"><!-- Slide 1 -->
                <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_2x1.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__caption">
            Bildbeschreibung Bild 3 Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
        </p>
        <p class="image__copyright">
            @copyright
        </p>
                </div>
            </li>
            <li class="swiper-slide"><!-- Slide 2 -->
                <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x3.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__caption">
            Bildbeschreibung Bild 1 Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
        </p>
        <p class="image__copyright">
            @copyright
        </p>
                </div>
            </li>
            <li class="swiper-slide"><!-- Slide 3 -->
                <div class="image">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_4x5.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__caption">
            Bildbeschreibung Bild 2 Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world.
        </p>
        <p class="image__copyright">
            @copyright
        </p>
                </div>
            </li>
        </ul>
        <div class="swiper-pagination" aria-hidden="true"></div>
        <button type="button" class="button--clean swiper-button-fullscreen" aria-expanded="false" aria-label="Öffne Bildergalerie im Vollbildmodus" title="Vollbild"><i class="bicon bicon-maximize" aria-hidden="true"></i></button>
    </div>
</div>

To use lazy loading, we just need to set loading="lazy" on images and add a preloader element. (See https://swiperjs.com/swiper-api#lazy-loading)

Lazy image loading

@adobestock
@adobestock
@adobestock
@adobestock
@adobestock

<div class="modul-bildergalerie">
    <h2 class="title">Lazy image loading</h2>
   
    <div class="swiper-container swiper">
        <div class="swiper-button-prev" title="Vorheriges Bild"></div>
        <div class="swiper-button-next" title="Nächstes Bild"></div>
        <ul class="swiper-wrapper">
            <li class="swiper-slide"><!-- Slide 1 --> 
                <div class="image">
        <div class="image__image">
            <img loading="lazy" src="../../styleguide/static/adobestock/AdobeStock_65075914_980px_2x1.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @adobestock
        </p>
                </div>
                <div class="swiper-lazy-preloader"></div>
            </li>
            <li class="swiper-slide"><!-- Slide 2 --> 
                <div class="image">
        <div class="image__image">
            <img loading="lazy" src="../../styleguide/static/adobestock/AdobeStock_272816828_980px_2x1.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @adobestock
        </p>
                </div>
                <div class="swiper-lazy-preloader"></div>
            </li>
            <li class="swiper-slide"><!-- Slide 3 --> 
                <div class="image">
        <div class="image__image">
            <img loading="lazy" src="../../styleguide/static/adobestock/AdobeStock_61177123_1500px_3x1.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @adobestock
        </p>
                </div>
                <div class="swiper-lazy-preloader"></div>
            </li>
            <li class="swiper-slide"><!-- Slide 4 --> 
                <div class="image">
        <div class="image__image">
            <img loading="lazy" src="../../styleguide/static/adobestock/AdobeStock_272816828_1500px_3x1.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @adobestock
        </p>
                </div>
                <div class="swiper-lazy-preloader"></div>
            </li>
            <li class="swiper-slide"><!-- Slide 5 --> 
                <div class="image">
        <div class="image__image">
            <img loading="lazy" src="../../styleguide/static/adobestock/AdobeStock_178542579_400px.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">
            @adobestock
        </p>
                </div>
                <div class="swiper-lazy-preloader"></div>
            </li>
        </ul>
        <div class="swiper-pagination" aria-hidden="true"></div>
        <button type="button" class="button--clean swiper-button-fullscreen" aria-expanded="false" aria-label="Öffne Bildergalerie im Vollbildmodus" title="Vollbild"><i class="bicon bicon-maximize" aria-hidden="true"></i></button>
    </div>
</div>

A lot of images and long captions test

200 Zeichen Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a bu.

@hjgjhghghhg
700 Zeichen Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, o.

@hjgjhghghhg
dfshudjhfksdfj.

@hjgjhghghhg
300 Zeichen Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a scie.

@hjgjhghghhg
200 Zeichen Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a bu.

@hjgjhghghhg
700 Zeichen Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, o.

@hjgjhghghhg
400 Zeichen Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biolog.

@hjgjhghghhg
300 Zeichen Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into a burning problem among the scientists and linguists all over the world. Philosophy is considered a scie.

@hjgjhghghhg
Philosophy is considered a science

@fotograph
Philosophy is considered a science

@fotograph
Philosophy is considered a science

@fotograph
Philosophy is considered a science

@fotograph
Philosophy is considered a science

@fotograph
Philosophy is considered a science

@fotograph
Philosophy is considered a science

@fotograph