@e-fellows/website-2022

Bildergalerie 

<div id="gallery-38565-59766" class="gallery">
    <div class="gallery__figures-wrapper">
        <div class="gallery__figures">
            <div class="gallery__figure">

                <figure class="figure" id="gallery-38565-59766-figure-1" role="figure" aria-labelledby="gallery-38565-59766-figure-1-caption">
                    <div class="figure__figure">
                        <picture class="image" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
                            <img class="image__img" src="https://bildermangel.de/1120x800/fe7c09/130f26.jpg" width="1120" height="800" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
                        </picture>

                    </div>

                    <figcaption class="figure__caption" id="gallery-38565-59766-figure-1-caption">
                        <div class="figure__copyright">
                            <div class="copyright">
                                <button class="copyright__button" type="button" aria-label="Copyright-Informationen anzeigen" title="Copyright-Informationen anzeigen">
                                    <svg class="icon icon--copyright" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#copyright"></use>
                                    </svg> </button>

                                <p class="copyright__tooltip" tabindex="0" hidden>
                                    <small>Quelle: example.com</small>
                                </p>
                            </div>
                        </div>

                        <div class="figure__caption-text">Das ist die Bildbeschreibung mit <a class="link link--external" href="https://example.com" rel="noopener noreferrer" target="_blank"><span class="link__icon"><svg class="icon icon--external-link" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#external-link"></use>
                                    </svg>&#65279;</span><span class="link__text u-underline">einem Link</span></a></div>
                    </figcaption>
                </figure>
            </div>
            <div class="gallery__figure">

                <figure class="figure" id="gallery-38565-59766-figure-2" role="figure" aria-labelledby="gallery-38565-59766-figure-2-caption">
                    <div class="figure__figure">
                        <picture class="image" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
                            <img class="image__img" src="https://bildermangel.de/1120x660/fe7c09/130f26.jpg" width="1120" height="660" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
                        </picture>

                    </div>

                    <figcaption class="figure__caption" id="gallery-38565-59766-figure-2-caption">
                        <div class="figure__copyright">
                            <div class="copyright">
                                <button class="copyright__button" type="button" aria-label="Copyright-Informationen anzeigen" title="Copyright-Informationen anzeigen">
                                    <svg class="icon icon--copyright" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#copyright"></use>
                                    </svg> </button>

                                <p class="copyright__tooltip" tabindex="0" hidden>
                                    <small>Quelle: example.com</small>
                                </p>
                            </div>
                        </div>

                        <div class="figure__caption-text">Das ist die Bildbeschreibung mit <a class="link link--external" href="https://example.com" rel="noopener noreferrer" target="_blank"><span class="link__icon"><svg class="icon icon--external-link" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#external-link"></use>
                                    </svg>&#65279;</span><span class="link__text u-underline">einem Link</span></a>. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
                    </figcaption>
                </figure>
            </div>
            <div class="gallery__figure">

                <figure class="figure" id="gallery-38565-59766-figure-3" role="figure" aria-labelledby="gallery-38565-59766-figure-3-caption">
                    <div class="figure__figure">
                        <picture class="image" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
                            <img class="image__img" src="https://bildermangel.de/1120x330/fe7c09/130f26.jpg" width="1120" height="330" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
                        </picture>

                    </div>

                    <figcaption class="figure__caption" id="gallery-38565-59766-figure-3-caption">
                        <div class="figure__copyright">
                            <div class="copyright">
                                <button class="copyright__button" type="button" aria-label="Copyright-Informationen anzeigen" title="Copyright-Informationen anzeigen">
                                    <svg class="icon icon--copyright" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#copyright"></use>
                                    </svg> </button>

                                <p class="copyright__tooltip" tabindex="0" hidden>
                                    <small>Quelle: example.com</small>
                                </p>
                            </div>
                        </div>

                        <div class="figure__caption-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </figcaption>
                </figure>
            </div>
            <div class="gallery__figure">

                <figure class="figure" id="gallery-38565-59766-figure-4" role="figure" aria-labelledby="gallery-38565-59766-figure-4-caption">
                    <div class="figure__figure">
                        <picture class="image" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
                            <img class="image__img" src="https://bildermangel.de/1120x1300/fe7c09/130f26.jpg" width="1120" height="1300" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
                        </picture>

                    </div>

                    <figcaption class="figure__caption" id="gallery-38565-59766-figure-4-caption">
                        <div class="figure__copyright">
                            <div class="copyright">
                                <button class="copyright__button" type="button" aria-label="Copyright-Informationen anzeigen" title="Copyright-Informationen anzeigen">
                                    <svg class="icon icon--copyright" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#copyright"></use>
                                    </svg> </button>

                                <p class="copyright__tooltip" tabindex="0" hidden>
                                    <small>Quelle: example.com</small>
                                </p>
                            </div>
                        </div>

                        <div class="figure__caption-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </figcaption>
                </figure>
            </div>
            <div class="gallery__figure">

                <figure class="figure" id="gallery-38565-59766-figure-5" role="figure" aria-labelledby="gallery-38565-59766-figure-5-caption">
                    <div class="figure__figure">
                        <picture class="image" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
                            <img class="image__img" src="https://bildermangel.de/600x800/fe7c09/130f26.jpg" width="600" height="800" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
                        </picture>

                    </div>

                    <figcaption class="figure__caption" id="gallery-38565-59766-figure-5-caption">
                        <div class="figure__copyright">
                            <div class="copyright">
                                <button class="copyright__button" type="button" aria-label="Copyright-Informationen anzeigen" title="Copyright-Informationen anzeigen">
                                    <svg class="icon icon--copyright" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#copyright"></use>
                                    </svg> </button>

                                <p class="copyright__tooltip" tabindex="0" hidden>
                                    <small>Quelle: example.com</small>
                                </p>
                            </div>
                        </div>

                        <div class="figure__caption-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>

    <div class="gallery__position" aria-hidden="true"></div>

    <div class="gallery__navigation" aria-hidden="true">
        <button class="icon-button gallery__navigation-button gallery__navigation-button--prev" type="button" title="Nächstes Bild" tabindex="-1">
            <span class="icon-button__icon">
                <svg class="icon icon--arrow-left" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-left"></use>
                </svg> </span>

        </button>

        <button class="icon-button gallery__navigation-button gallery__navigation-button--next" type="button" title="Nächstes Bild" tabindex="-1">
            <span class="icon-button__icon">
                <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
                </svg> </span>

        </button>
    </div>
</div>
 
{% set id = id ??? html_id('gallery') %}

<div {{ html_attributes({
  id: id,
  class: 'gallery',
}, attrs ?? {}) }}>
  <div class="gallery__figures-wrapper">
    <div class="gallery__figures">
      {% for figure in figures %}
        <div class="gallery__figure">
          {% include '@figure' with figure | merge({
            id: "figure-#{loop.index}" | namespaceInputId(id),
          }) only %}
        </div>
      {% endfor %}
    </div>
  </div>

  <div class="gallery__position" aria-hidden="true"></div>

  <div class="gallery__navigation" aria-hidden="true">
    {% include '@icon-button' with {
      icon: 'arrow-left',
      title: 'Next image' | t('site'),
      attrs: {
        tabindex: '-1',
        class: 'gallery__navigation-button gallery__navigation-button--prev',
      },
    } only %}

    {% include '@icon-button' with {
      icon: 'arrow-right',
      title: 'Next image' | t('site'),
      attrs: {
        tabindex: '-1',
        class: 'gallery__navigation-button gallery__navigation-button--next',
      },
    } only %}
  </div>
</div>
 
{
  "figures": [
    {
      "caption": "Das ist die Bildbeschreibung mit <a href=\"https://example.com\">einem Link</a>",
      "copyright": "Quelle: example.com",
      "image": {
        "src": "https://bildermangel.de/1120x800/fe7c09/130f26.jpg",
        "width": 1120,
        "height": 800,
        "alt": "Das ist ein Platzhalter-Bild",
        "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
      }
    },
    {
      "caption": "Das ist die Bildbeschreibung mit <a href=\"https://example.com\">einem Link</a>. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "copyright": "Quelle: example.com",
      "image": {
        "src": "https://bildermangel.de/1120x660/fe7c09/130f26.jpg",
        "width": 1120,
        "height": 660,
        "alt": "Das ist ein Platzhalter-Bild",
        "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
      }
    },
    {
      "caption": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
      "copyright": "Quelle: example.com",
      "image": {
        "src": "https://bildermangel.de/1120x330/fe7c09/130f26.jpg",
        "width": 1120,
        "height": 330,
        "alt": "Das ist ein Platzhalter-Bild",
        "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
      }
    },
    {
      "caption": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
      "copyright": "Quelle: example.com",
      "image": {
        "src": "https://bildermangel.de/1120x1300/fe7c09/130f26.jpg",
        "width": 1120,
        "height": 1300,
        "alt": "Das ist ein Platzhalter-Bild",
        "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
      }
    },
    {
      "caption": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
      "copyright": "Quelle: example.com",
      "image": {
        "src": "https://bildermangel.de/600x800/fe7c09/130f26.jpg",
        "width": 600,
        "height": 800,
        "alt": "Das ist ein Platzhalter-Bild",
        "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
      }
    }
  ]
}
  • Content: 
    $gallery-breakpoint: m;

:root {
  --gallery-figure-height: auto;

  @include use-responsive-sizing(--gallery-figure-caption-padding, responsive-map(xs 1.5rem, l 2rem));
  @include use-responsive-sizing(--gallery-navigation-button-size, (xs: 4rem, $gallery-breakpoint: 6.2rem));
}

.gallery {
  --gallery-position-width: calc(var(--gallery-figure-caption-padding) * 2 + 4rem);
  --gallery-navigation-width: calc(var(--gallery-navigation-button-size) * 2 + var(--gallery-figure-caption-padding) * 1.5);

  background-color: var(--color-cyan-light);
  position: relative;
}

.gallery__figures-wrapper {
  overflow: hidden;

  .no-js & {
    overflow-x: auto;
  }
}

.gallery__figures {
  align-items: stretch;
  display: flex;
  position: relative;
  transform: translateX(0);
  transition-duration: var(--duration-long);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.gallery__figure {
  --figure-caption-padding-inline: var(--gallery-position-width) var(--gallery-figure-caption-padding);
  --figure-caption-min-height: 6.2rem;
  --figure-height: var(--gallery-figure-height);

  flex-shrink: 0;
  inline-size: 100%;

  @include mq($from: $gallery-breakpoint) {
    --figure-caption-padding-inline: var(--gallery-position-width) var(--gallery-navigation-width);
  }
}

.gallery__navigation {
  display: none;
  inset-block-start: var(--gallery-figure-height);
  inset-inline-start: 0;
  position: absolute;
  transform: translateY(-100%);

  .gallery--ready & {
    display: flex;
  }

  @include mq($from: $gallery-breakpoint) {
    inset-inline: auto 0;
    transform: translateY(0);
  }
}

.gallery__navigation-button {
  --icon-button-size: var(--gallery-navigation-button-size);
}

.gallery__position {
  background-color: var(--color-cyan-light);
  font-size: 1.4rem;
  font-weight: var(--font-weight-semibold);
  inline-size: var(--gallery-position-width);
  inset-block: var(--gallery-figure-height) 0;
  inset-inline-start: 0;
  line-height: var(--line-height-body);
  padding-block-start: var(--gallery-figure-caption-padding);
  padding-inline-start: var(--gallery-figure-caption-padding);
  position: absolute;
}
  • URL: /components/raw/gallery/gallery.scss
  • Filesystem Path: src/components/3-organisms/gallery/gallery.scss
  • Size: 2.2 KB
  • Content: 
    import createSlider from '../../../javascripts/utils/createSlider';
import invisibleFocus from '../../../javascripts/utils/invisibleFocus';
import onLoad from '../../../javascripts/utils/onLoad';

const updateFigureHeight = ($gallery: HTMLElement) => {
  // Get maximal image size
  const maxHeight = Math.max(
    ...[...$gallery.querySelectorAll<HTMLImageElement>('.image__img')].map(
      ($image) => $image.height,
    ),
  );

  // Set figure height for gallery
  $gallery.style.setProperty('--gallery-figure-height', `${maxHeight}px`);
};

const createGallery = ($gallery: HTMLElement) => {
  const $figures = $gallery.querySelector<HTMLDivElement>('.gallery__figures');
  const numberOfFigures =
    $figures?.querySelectorAll('.gallery__figure').length || 0;

  if (!$figures || numberOfFigures <= 1) {
    return;
  }

  updateFigureHeight($gallery);
  $gallery.classList.add('gallery--ready');

  const resizeObserver = new ResizeObserver(() => {
    updateFigureHeight($gallery);
  });

  resizeObserver.observe($gallery);

  const slider = createSlider($figures, '.gallery__figure');

  $gallery
    .querySelector('.gallery__navigation-button--prev')
    ?.addEventListener('click', ({ currentTarget }) => {
      invisibleFocus(<HTMLButtonElement>currentTarget);
      slider.move('prev');
    });

  $gallery
    .querySelector('.gallery__navigation-button--next')
    ?.addEventListener('click', ({ currentTarget }) => {
      invisibleFocus(<HTMLButtonElement>currentTarget);
      slider.move('next');
    });

  $gallery.querySelectorAll('.gallery__position').forEach(($position) => {
    $position.textContent = `1 / ${numberOfFigures}`;

    slider.onUpdate((currentSlide) => {
      $position.textContent = `${currentSlide + 1} / ${numberOfFigures}`;
    });
  });
};

onLoad<HTMLElement>('.gallery', ($gallery) => createGallery($gallery));
  • URL: /components/raw/gallery/gallery.ts
  • Filesystem Path: src/components/3-organisms/gallery/gallery.ts
  • Size: 1.9 KB

No notes defined.