Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Galerie

Bei mehreren Bildern öffnet sich immer ein Modal (Lightbox). Weitere Anwendungsbeispiele sind unter dem Pattern Bild zu finden.

 Varianten

Galerie

 Vorschau Code 
<wm-gallery >
  <ul>
    <li>
      <a href="/images/pattern/modal/modal1.jpg" data-modal="gallery-images" data-modal-pos="0" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal1.jpg" alt="Platz mit Brunnen" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal2.jpg" data-modal="gallery-images" data-modal-pos="1" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal2.jpg" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal3.jpg" data-modal="gallery-images" data-modal-pos="2" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal3.jpg" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal4.jpg" data-modal="gallery-images" data-modal-pos="3" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal4.jpg" alt="Erhöhter Platz mit Bäumen" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal5.jpeg" data-modal="gallery-images" data-modal-pos="4" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal5.jpeg" alt="Brücke über Gleise" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal6.jpeg" data-modal="gallery-images" data-modal-pos="5" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal6.jpeg" alt="Markthäuschen" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal7.jpeg" data-modal="gallery-images" data-modal-pos="6" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal7.jpeg" alt="Blick auf Brückenübergang" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal8.jpeg" data-modal="gallery-images" data-modal-pos="7" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal8.jpeg" alt="Brücke aus Stahlträgern" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal9.jpeg" data-modal="gallery-images" data-modal-pos="8" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal9.jpeg" alt="Bürger*innen auf Brücke" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal10.jpeg" data-modal="gallery-images" data-modal-pos="9" data-thumbs="gallery-thumbs">
        <img width="208" height="208" src="/images/pattern/modal/modal10.jpeg" alt="Bürger*innen auf Brücke" />
      </a>
    </li>
  </ul>
</wm-gallery>

<template id="gallery-images">
  <wm-carousel hideDots single="1070" style="--carousel-shadow-offset: 0px" label="Bilder">
    <div class="image">
      <img src="/images/pattern/modal/modal1.jpg" width="530" height="298" alt="Platz mit Brunnen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal2.jpg" width="530" height="298" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal3.jpg" width="530" height="298" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal4.jpg" width="530" height="298" alt="Erhöhter Platz mit Bäumen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal5.jpeg" width="530" height="298" alt="Brücke über Gleise">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal6.jpeg" width="530" height="298" alt="Markthäuschen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal7.jpeg" width="530" height="298" alt="Blick auf Brückenübergang">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal8.jpeg" width="530" height="298" alt="Brücke aus Stahlträgern">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal9.jpeg" width="530" height="298" alt="Bürger*innen auf Brücke">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal10.jpeg" width="530" height="298" alt="Bürger*innen auf Brücke">
    </div>
  </wm-carousel>
</template>

<template id="gallery-thumbs">
  <img src="/images/pattern/modal/modal1.jpg" width="44" height="44" alt="Platz mit Brunnen">
  <img src="/images/pattern/modal/modal2.jpg" width="44" height="44" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
  <img src="/images/pattern/modal/modal3.jpg" width="44" height="44" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
  <img src="/images/pattern/modal/modal4.jpg" width="44" height="44" alt="Erhöhter Platz mit Bäumen">
  <img src="/images/pattern/modal/modal5.jpeg" width="44" height="44" alt="Brücke über Gleise">
  <img src="/images/pattern/modal/modal6.jpeg" width="44" height="44" alt="Markthäuschen">
  <img src="/images/pattern/modal/modal7.jpeg" width="44" height="44" alt="Blick auf Brückenübergang">
  <img src="/images/pattern/modal/modal8.jpeg" width="44" height="44" alt="Brücke aus Stahlträgern">
  <img src="/images/pattern/modal/modal9.jpeg" width="44" height="44" alt="Bürger*innen auf Brücke">
  <img src="/images/pattern/modal/modal10.jpeg" width="44" height="44" alt="Bürger*innen auf Brücke">
</template>

Galerie mit kleinen Vorschaubildern

 Vorschau Code 
<wm-gallery size="80" >
  <ul>
    <li>
      <a href="/images/pattern/modal/modal1.jpg" data-modal="gallery-images2" data-modal-pos="0" data-thumbs="gallery-thumbs2">
        <img width="208" height="208" src="/images/pattern/modal/modal1.jpg" alt="Platz mit Brunnen" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal2.jpg" data-modal="gallery-images2" data-modal-pos="1" data-thumbs="gallery-thumbs2">
        <img width="208" height="208" src="/images/pattern/modal/modal2.jpg" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal3.jpg" data-modal="gallery-images2" data-modal-pos="2" data-thumbs="gallery-thumbs2">
        <img width="208" height="208" src="/images/pattern/modal/modal3.jpg" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal4.jpg" data-modal="gallery-images2" data-modal-pos="3" data-thumbs="gallery-thumbs2">
        <img width="208" height="208" src="/images/pattern/modal/modal4.jpg" alt="Erhöhter Platz mit Bäumen" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal5.jpeg" data-modal="gallery-images2" data-modal-pos="4" data-thumbs="gallery-thumbs2">
        <img width="208" height="208" src="/images/pattern/modal/modal5.jpeg" alt="Brücke über Gleise" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal6.jpeg" data-modal="gallery-images2" data-modal-pos="5" data-thumbs="gallery-thumbs2">
        <img width="208" height="208" src="/images/pattern/modal/modal6.jpeg" alt="Markthäuschen" />
      </a>
    </li>
  </ul>
</wm-gallery>

<template id="gallery-images2">
  <wm-carousel hideDots single="1070" style="--carousel-shadow-offset: 0px" label="Bilder">
    <div class="image">
      <img src="/images/pattern/modal/modal1.jpg" width="530" height="298" alt="Platz mit Brunnen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal2.jpg" width="530" height="298" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal3.jpg" width="530" height="298" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal4.jpg" width="530" height="298" alt="Erhöhter Platz mit Bäumen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal5.jpeg" width="530" height="298" alt="Brücke über Gleise">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal6.jpeg" width="530" height="298" alt="Markthäuschen">
    </div>
  </wm-carousel>
</template>

<template id="gallery-thumbs2">
  <img src="/images/pattern/modal/modal1.jpg" width="44" height="44" alt="Platz mit Brunnen">
  <img src="/images/pattern/modal/modal2.jpg" width="44" height="44" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
  <img src="/images/pattern/modal/modal3.jpg" width="44" height="44" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
  <img src="/images/pattern/modal/modal4.jpg" width="44" height="44" alt="Erhöhter Platz mit Bäumen">
  <img src="/images/pattern/modal/modal5.jpeg" width="44" height="44" alt="Brücke über Gleise">
  <img src="/images/pattern/modal/modal6.jpeg" width="44" height="44" alt="Markthäuschen">
</template>
Dev

Interaktive Demo
Vorschau Code 
<wm-gallery  data-demo-pattern="wm-gallery-preview">
  <ul>
    <li>
      <a href="/images/pattern/modal/modal1.jpg" data-modal="gallery-images-demo" data-modal-pos="0" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal1.jpg" alt="Platz mit Brunnen" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal2.jpg" data-modal="gallery-images-demo" data-modal-pos="1" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal2.jpg" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal3.jpg" data-modal="gallery-images-demo" data-modal-pos="2" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal3.jpg" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal4.jpg" data-modal="gallery-images-demo" data-modal-pos="3" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal4.jpg" alt="Erhöhter Platz mit Bäumen" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal5.jpeg" data-modal="gallery-images-demo" data-modal-pos="4" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal5.jpeg" alt="Brücke über Gleise" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal6.jpeg" data-modal="gallery-images-demo" data-modal-pos="5" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal6.jpeg" alt="Markthäuschen" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal7.jpeg" data-modal="gallery-images-demo" data-modal-pos="6" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal7.jpeg" alt="Blick auf Brückenübergang" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal8.jpeg" data-modal="gallery-images-demo" data-modal-pos="7" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal8.jpeg" alt="Brücke aus Stahlträgern" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal9.jpeg" data-modal="gallery-images-demo" data-modal-pos="8" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal9.jpeg" alt="Bürger*innen auf Brücke" />
      </a>
    </li>
    <li>
      <a href="/images/pattern/modal/modal10.jpeg" data-modal="gallery-images-demo" data-modal-pos="9" data-thumbs="gallery-thumbs-demo">
        <img width="208" height="208" src="/images/pattern/modal/modal10.jpeg" alt="Bürger*innen auf Brücke" />
      </a>
    </li>
  </ul>
</wm-gallery>

<template id="gallery-images-demo">
  <wm-carousel hideDots single="1070" style="--carousel-shadow-offset: 0px" label="Bilder">
    <div class="image">
      <img src="/images/pattern/modal/modal1.jpg" width="530" height="298" alt="Platz mit Brunnen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal2.jpg" width="530" height="298" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal3.jpg" width="530" height="298" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal4.jpg" width="530" height="298" alt="Erhöhter Platz mit Bäumen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal5.jpeg" width="530" height="298" alt="Brücke über Gleise">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal6.jpeg" width="530" height="298" alt="Markthäuschen">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal7.jpeg" width="530" height="298" alt="Blick auf Brückenübergang">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal8.jpeg" width="530" height="298" alt="Brücke aus Stahlträgern">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal9.jpeg" width="530" height="298" alt="Bürger*innen auf Brücke">
    </div>
    <div class="image">
      <img data-src="/images/pattern/modal/modal10.jpeg" width="530" height="298" alt="Bürger*innen auf Brücke">
    </div>
  </wm-carousel>
</template>

<template id="gallery-thumbs-demo">
  <img src="/images/pattern/modal/modal1.jpg" width="44" height="44" alt="Platz mit Brunnen">
  <img src="/images/pattern/modal/modal2.jpg" width="44" height="44" alt="Luftbild mit Abgrenzung des Bearbeitungsgebiets">
  <img src="/images/pattern/modal/modal3.jpg" width="44" height="44" alt="Kleine, gärtnerische Fläche zwischen Wohnhäusern">
  <img src="/images/pattern/modal/modal4.jpg" width="44" height="44" alt="Erhöhter Platz mit Bäumen">
  <img src="/images/pattern/modal/modal5.jpeg" width="44" height="44" alt="Brücke über Gleise">
  <img src="/images/pattern/modal/modal6.jpeg" width="44" height="44" alt="Markthäuschen">
  <img src="/images/pattern/modal/modal7.jpeg" width="44" height="44" alt="Blick auf Brückenübergang">
  <img src="/images/pattern/modal/modal8.jpeg" width="44" height="44" alt="Brücke aus Stahlträgern">
  <img src="/images/pattern/modal/modal9.jpeg" width="44" height="44" alt="Bürger*innen auf Brücke">
  <img src="/images/pattern/modal/modal10.jpeg" width="44" height="44" alt="Bürger*innen auf Brücke">
</template>
API

Abhängigkeiten

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/Gallery/Gallery.js" type="module"></script>
 JavaScript 
import { Gallery } from './wienermelange/assets/js/components/Gallery/Gallery.js';

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
size Größe der Vorschaubilder Number 208
fixed Größe der Vorschaubilder ist nicht fluide, sondern immer fix. Boolean false

Slots

Name Beschreibung
default Text

CSS API

Property Beschreibung
--gallery-size Breite der Bilder

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at