Version 2.x – Gridzy.Gallery

Die Website wurde automatisch übersetzt. Bei Unklarheiten schaue bitte in die englische Dokumentation.

Grundlegende Verwendung

Lade die Gridzy-Dateien auf deinen Server hoch und füge sie deiner Website hinzu (normalerweise im head-Bereich):

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

Füge den HTML-Code hinzu (irgendwo im body-Bereich):

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Das war's! Das ist ein voll funktionsfähiges Beispiel. Es ist keine zusätzliche Initialisierung erforderlich.

Konfiguration

Gridzy lässt sich am einfachsten konfigurieren, indem du einfach HTML-Attribute verwendest. Du musst den Optionsnamen nur data-gridzy- voranstellen. Um die Option spaceBetween festzulegen, füge einfach das Attribut data-gridzy-spaceBetween hinzu.

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Hauptoptionen

	Standardwert	Beschreibung
`animate`	`true`	Legt fest, ob Animationen bei Änderungen des Rasters verwendet werden sollen (beispielsweise bei der Größenänderung des Browserfensters oder beim Setzen eines Filters).
`layout`	`justified`	Definiert das verwendete Layout. Gridzy.js 2 unterstützt die beiden verschiedenen Layouts `justified` und `waterfall` . Jedes von ihnen hat seine eigenen zusätzlichen Optionsparameter, die du unterhalb dieser Tabelle findest.
`filter`	`*`	Legt fest, welche Bilder angezeigt werden sollen. Als Wert kann hier jeder beliebige CSS-Selektor verwendet werden. Wird normalerweise automatisch über `filterControls` gesetzt (siehe nächste Option). Filter ansehen
`filterControls`		Legt fest, welche Formularelemente zum Filtern der Bilder verwendet werden können. Als Wert kann hier jeder CSS-Selektor verwendet werden, der HTML-Formularelemente auswählt. Filter ansehen
`autoConsiderScrollBars`	`true`	Um die verfügbare Breite vorherzusagen, wenn Scrollbalken angezeigt oder ausgeblendet werden. Es wird immer empfohlen, den Wert auf `true` zu belassen, sofern dieser Automatismus keine Probleme verursacht.

Justified Layout-Optionen

	Standardwert	Beschreibung
`autoFontSize`	`false`	Aktualisiert automatisch die Schriftgrößeneigenschaft jedes Elements basierend auf der ursprünglichen Element-Größe. Standardmäßig wird die Schriftgrößeneigenschaft nicht explizit festgelegt.
`desiredHeight`	`190`	Definiert die gewünschte Höhe der Elementzeilen. Die tatsächliche Höhe wird abhängig von der verfügbaren Breite und den Elementen in der Zeile berechnet.
`hideOnMissingImage`	`true`	Blendet Elemente mit Bildern aus, die nicht geladen werden konnten.
`spaceBetween`	`4`	Definiert den Abstand zwischen Elementen in Pixeln.
`lastRowAlign` seit Version 2.3.0	`justified`	Definiert das Verhalten der letzten Zeile. Erlaubte Werte sind `left` , `center` , `right` und `justified` .
`singleRowAlign` seit Version 2.3.0	`justified`	Definiert das Verhalten, wenn nur eine einzige Zeile vorhanden ist. Erlaubte Werte sind `left` , `center` , `right` und `justified` .
~~`fillLastRow`~~ ~~seit Version 2.1.0~~	~~`true`~~	ENTFERNT seit Version 2.4.0 (veraltet seit Version 2.3.0 ) Ordnet die Bilder so an, dass die letzte Zeile immer komplett ausgefüllt ist. Wenn du planst, Bilder dynamisch anzuhängen, kann es sinnvoll sein, diese Option zu deaktivieren. Hat keine Wirkung auf einzelne Zeilen (siehe `fillSingleRow` ).
`fillSingleRow` seit Version 2.1.0	~~`true`~~	ENTFERNT seit Version 2.4.0 (veraltet seit Version 2.3.0 ) Wenn nur eine Reihe vorhanden ist, werden die Bilder so angeordnet, dass die Reihe immer vollständig gefüllt ist. Wenn es vorkommen kann, dass du nur ein oder zwei Bilder in der Galerie hast, kann es sinnvoll sein, dies zu deaktivieren.

Waterfall Layout-Optionen

	Standardwert	Beschreibung
`autoFontSize`	`false`	Aktualisiert automatisch die Schriftgrößeneigenschaft jedes Elements basierend auf der ursprünglichen Element-Größe. Standardmäßig wird die Schriftgrößeneigenschaft nicht explizit festgelegt.
`desiredWidth`	`250`	Definiert die gewünschte Spaltenbreite. Die tatsächliche Breite wird abhängig von der verfügbaren Breite und der Spaltenanzahl berechnet.
`hideOnMissingImage`	`true`	Blendet Elemente mit Bildern aus, die nicht geladen werden konnten.
`horizontalOrder`	`false`	Legt fest, dass die Elemente streng nacheinander platziert werden, ein Element in jeder Spalte von links nach rechts, dann beginnt es wieder in der ganz linken Spalte, unabhängig davon, in welcher Spalte mehr Platz ist. Standardmäßig werden die Elemente immer in der Spalte mit der geringsten Höhe platziert.
`spaceBetween`	`4`	Definiert den Abstand zwischen Elementen in Pixeln.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Fortgeschrittene Optionen

Fortgeschrittene Optionen findest du in der API .

Semantisches HTML

Die einfachste HTML-Struktur von Gridzy ist diese:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Gridzy ist jedoch sehr flexibel und du kannst nahezu jede andere HTML-Struktur verwenden. Dabei sind nur einige wenige Punkte zu beachten:

Jedes untergeordnete Element des Containerelements stellt ein Element im Raster dar.
Sowohl das Containerelement als auch seine untergeordneten Elemente können beliebige Tag-Typen sein, z. B. ul und li (denk daran, die Browser-Defaults zurückzusetzen).
Wenn ein img -Element selbst kein direktes untergeordnetes Element ist, benötigt es die Klasse gridzyImage .

Dies ist also auch eine funktionierende HTML-Struktur:

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

Insbesondere wenn du Untertitel hinzufügen möchtest, benötigst du eine erweiterte HTML-Struktur. Weitere Informationen hierzu findest du unter Untertitel und Skins .

Untertitel und Skins

Wenn du deiner Galerie Beschriftungen hinzufügen möchtest, musst du das Erscheinungsbild definieren. Dafür stehen einige vordefinierte Skins zur Verfügung. Jeder Skin besteht aus einer CSS-Datei. Du musst diese Datei zusätzlich zu den Hauptdateien von Gridzy hinzufügen (normalerweise im head-Bereich):

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

Darüber hinaus benötigst du eine erweiterte HTML-Struktur:

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

Wenn du dich über die HTML-Struktur wunderst, wirf einen Blick auf Semantic HTML .

Für die Überschrift kannst du jeden beliebigen Tag-Typ verwenden, achte nur darauf, dass er die Klasse gridzyCaption hat. Das img Element benötigt die Klasse gridzyImage .

Das obige Beispiel zeigt den Skin gridzySkinClassic . Um einen anderen zu verwenden, ersetze einfach den Skin-Namen durch einen der folgenden:

Enthaltene Skins

	Verfügbare Klassen
gridzySkinBlank ein guter Ausgangspunkt zum Erstellen eines eigenen Skins Live-Vorschau	`gridzySkinBlank`
gridzySkinClassic Live-Vorschau	`gridzySkinClassic` `gridzySkinClassicLight`(veraltet seit Version 2.6.0)
gridzySkinFullOverlay Live-Vorschau	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(veraltet seit Version 2.6.0)
gridzySkinLift Live-Vorschau	`gridzySkinLift` `gridzySkinLiftLight`(veraltet seit Version 2.6.0)
gridzySkinMagnifier Zoomfunktion nicht enthalten Live-Vorschau	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(veraltet seit Version 2.6.0)

Alle oben genannten Skins benötigen nur eine CSS-Datei, es gibt jedoch zusätzliche Skins, die auch eine JavaScript-Datei erfordern:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	Verfügbare Klassen
gridzySkinBlur funktioniert nicht im Internet Explorer Live-Vorschau	`gridzySkinBlur` `gridzySkinBlurLight`(veraltet seit Version 2.6.0)
gridzySkinCard Live-Vorschau	`gridzySkinCard` `gridzySkinCardLight`(veraltet seit Version 2.6.0)

Skin-Optionen

Seit Version 2.6.0 gibt es Optionen zum Konfigurieren der integrierten Skins. Abhängig vom jeweiligen Skin kannst du die Hintergrundfarbe, die Textfarbe und den Textschatten festlegen. Du musst nur benutzerdefinierte CSS-Eigenschaften verwenden, wie du hier sehen kannst:

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

Sieh dir hier die unterstützten Variablen und Standardwerte für jedes Skin an:

gridzySkinClassic

Variable	Standardwert	Information
`--background`	`rgba(0, 0, 0, .7)`	erlaubt jeden CSS-Hintergrundwert
`--color`	`rgb(255, 255, 255)`	erlaubt beliebige CSS-Farbwerte
`--text-shadow`	`none`	erlaubt jeden CSS-Textschattenwert

gridzySkinFullOverlay

Variable	Standardwert	Information
`--background`	`rgba(0, 0, 0, .7)`	erlaubt jeden CSS-Hintergrundwert
`--color`	`rgb(255, 255, 255)`	erlaubt beliebige CSS-Farbwerte
`--text-shadow`	`none`	erlaubt jeden CSS-Textschattenwert

gridzySkinLift

Variable	Standardwert	Information
`--background`	`rgba(0, 0, 0, .7)`	erlaubt jeden CSS-Hintergrundwert
`--color`	`rgb(255, 255, 255)`	erlaubt beliebige CSS-Farbwerte
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	erlaubt jeden CSS-Textschattenwert

gridzySkinMagnifier

Variable	Standardwert	Information
`--background`	`rgba(0, 0, 0, .7)`	erlaubt jeden CSS-Hintergrundwert
`--color`	`rgb(255, 255, 255)`	erlaubt beliebige CSS-Farbwerte

Dieses Skin unterstützt --text-shadow nicht

gridzySkinBlur

Variable	Standardwert	Information
`--background`	`rgba(0, 0, 0, .7)`	erlaubt jeden CSS-Hintergrundwert
`--color`	`rgb(255, 255, 255)`	erlaubt beliebige CSS-Farbwerte
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	erlaubt jeden CSS-Textschattenwert

gridzySkinCard

Variable	Standardwert	Information
`--background`	`rgba(0, 0, 0, 1)`	erlaubt jeden CSS-Hintergrundwert
`--color`	`rgb(255, 255, 255)`	erlaubt beliebige CSS-Farbwerte
`--text-shadow`	`none`	erlaubt jeden CSS-Textschattenwert

Alle vordefinierten Skins unterstützen nur einfache Textbeschriftungen. Du kannst deine ganz eigenen und komplexeren Skins erstellen. Bitte sieh dir Style Gridzy an.

Style Gridzy

Wenn kein vordefiniertes Skin deinen Anforderungen entspricht, kannst du dein eigenes gestalten.

Am einfachsten ist es, wenn man zunächst ein vorhandenes Skin kopiert und an die eigenen Bedürfnisse anpasst. Das vordefinierte Skin gridzySkinBlank bietet in der Regel eine gute Grundlage sowie eine gute Dokumentation in der CSS-Datei:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

In der CSS-Datei findest du die Klassen gridzySkinBlank , gridzyImage und gridzyCaption . Gridzy selbst benötigt diese Klassen nicht. Sie werden nur für das Styling verwendet und du kannst sie daher bei Bedarf entfernen oder umbenennen.

Zusätzlich findest du die CSS-Klasse gridzyItem . Gridzy setzt diese Klasse automatisch auf alle direkt untergeordneten Elemente des Hauptcontainerelements. Du kannst diese Klasse also verwenden, um die Elemente deiner Galerie zu gestalten.

Beachte wichtige Dinge

Der Inhalt des Elements sollte vollständig responsive sein. Bedenke, dass sich die Elementgröße definitiv ändern wird. Verwende Prozentwerte anstelle von Pixelwerten. Und sieh dir die Gridzy-Layoutoption autoFontSize an, die die Schriftgröße an die Größe des Elements bindet.
Jedes Element sollte ein wohldefiniertes Seitenverhältnis haben. Das Seitenverhältnis des Elements ändert sich nie und wird zur Berechnung des Rasters benötigt. Wenn ein Element also nicht automatisch ein wohldefiniertes Seitenverhältnis hat, definiere es manuell vor (z. B. über CSS).

In manchen Fällen ist es einfacher, den Inhalt der Elemente zu formatieren, bevor Gridzy initialisiert wird. Entferne dazu einfach vorübergehend die Klasse gridzy oder die Gridzy-JavaScript-Datei.

Das war's! Das ist alles, was du brauchst, um dein ganz eigenes Skin zu erstellen. Die meisten vordefinierten Skins verwenden nicht mehr als dies.

Aber es könnte noch mehr geben, wenn du möchtest …

Erweiterte Skins

Gridzy verwendet mehr CSS-Klassen als nur gridzyItem . Die meisten davon werden automatisch festgelegt und du kannst sie auch zum Stylen verwenden.

Hauptcontainerklassen

Klassenname	Beschreibung
`gridzy` manuell einstellen	Gridzy findet automatisch Elemente mit dieser Klasse und initialisiert sie.
`gridzyAnimated`	Wird automatisch gesetzt, wenn die Option `animate` auf `true` gesetzt ist. Wenn diese Klasse manuell gesetzt wird, wird die Option `animate` automatisch auch `true` erhalten (außer sie wird explizit auf `false` gesetzt).

Gegenstandsklassen

Klassenname	Beschreibung
`gridzyItem`	Wird gesetzt, sobald das Element den Initialisierungsprozess startet. Wird nie entfernt.
`gridzyItemInitializing`	Wird gesetzt, sobald das Element den Initialisierungsprozess startet. Wird durch `gridzyItemReady` ersetzt, sobald das Element vollständig initialisiert ist. Bedeutet nicht, dass die Bilder vollständig geladen sind (siehe `gridzyItemLoading` ), sondern dass das Element bereit ist, sichtbar zu werden.
`gridzyItemReady`	Ersetzt `gridzyItemInitializing` sobald das Element vollständig initialisiert ist. Wird nie entfernt. Bedeutet nicht, dass die Bilder vollständig geladen sind (siehe `gridzyItemComplete` ), sondern dass das Element bereit ist, sichtbar zu werden.
`gridzyItemLoading`	Wird gesetzt, sobald das Element den Initialisierungsprozess startet. Wird durch `gridzyItemComplete` ersetzt, sobald die enthaltenen Bilder (normalerweise nur eines) vollständig geladen sind.
`gridzyItemComplete`	Ersetzt `gridzyItemLoading` , sobald die enthaltenen Bilder (normalerweise nur eines) vollständig geladen sind. Wird nie entfernt.
`gridzyItemInitialToVisible`	Wird gesetzt, sobald das Element zum ersten Mal beginnt zu erscheinen. Wird entfernt, sobald das Element vollständig sichtbar ist.
`gridzyItemVisible`	Wird gesetzt, sobald das Element vollständig sichtbar ist. Wird entfernt, sobald das Element zu verschwinden beginnt.
`gridzyItemVisibleToHidden`	Wird gesetzt, sobald das Element zu verschwinden beginnt. Wird entfernt, sobald das Element vollständig ausgeblendet ist.
`gridzyItemHidden`	Wird gesetzt, sobald das Element vollständig ausgeblendet ist. Wird entfernt, sobald das Element beginnt zu erscheinen.
`gridzyItemHiddenToVisible`	Wird gesetzt, sobald das Element zu erscheinen beginnt (außer beim ersten Erscheinen – siehe Klasse `gridzyItemInitialToVisible` ). Wird entfernt, sobald das Element vollständig sichtbar ist.
`gridzyItemVisibleToVisible`	Wird gesetzt, sobald sich etwas im Raster geändert hat, das Element selbst aber sichtbar war und bleibt. Wird entfernt, sobald die Änderungsanimation beendet ist.

Standardmäßig sind der Prozessindikator und die Animationen für erscheinende und verschwindende Bilder durch die Gridzy-Haupt-CSS-Datei vordefiniert.

Mit den oben genannten CSS-Klassen kannst du deine eigenen Prozessindikatoren und Animationen gestalten. Wage einen Blick in die Gridzy-Haupt-CSS-Datei, um zu verstehen, was du überschreiben musst. Keine Angst, dort ist alles gut dokumentiert.

Laden optimieren

Wenn du viele Bilder verwendest, kann es eine gute Idee sein, Gridzy dabei zu helfen, das Raster schneller aufzubauen.

Springende Bilder verhindern

Gridzy benötigt zur Berechnung des Rasters unbedingt das Seitenverhältnis aller Bilder. Diese Tatsache führt zu springenden Elementen, wenn einige Bilder fertig sind und andere nicht. Je mehr Bilder vorhanden sind, desto störender kann dieser Effekt sein.

Um dieses Verhalten zu verhindern, lege einfach die Attribute width und height für alle img Elemente fest. Es ist wichtig, für jedes einzelne Bild die richtigen Werte festzulegen, da die Bilder sonst verzerrt werden. Die richtigen Werte sind die ursprüngliche Breite und Höhe des jeweiligen Bildes:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Danach kann Gridzy das Raster sofort berechnen, ohne dass die tatsächliche Größe der Bilder bekannt sein muss.

Lazy Loading

Um nur Bilder zu laden, die sich innerhalb des sichtbaren Bereichs befinden, folge einfach diesen Schritten:

Füge width und height wie oben beschrieben ein (achte darauf, die richtigen Werte zu verwenden)
Ersetze alle src Attribute durch data-gridzylazysrc wie unten gezeigt (wenn du auch srcset Attribute hast, ersetze diese durch data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Nach diesen Schritten werden die Bilder geladen, sobald sie sich in der Nähe oder innerhalb des sichtbaren Bereichs befinden.

Prozessindikator

Der Prozessindikator ist das kleine animierte Symbol, das erscheint, während das Bild geladen wird. Wenn du Untertitel und Skins verwendest, wird der Prozessindikator automatisch angezeigt. Andernfalls sind einige Anpassungen erforderlich:

Setze jedes img Element in ein div Element
(oder in ein beliebiges anderes Element – weitere Informationen findest du unter semantisches HTML )
Füge jedem img -Element die Klasse gridzyImage hinzu

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Danach solltest du die Prozessindikatoren sehen, wenn das Laden der Bilder einige Zeit dauert.

Filter

Filter in Gridzy sind ziemlich einfach, aber leistungsstark. Egal, welche Art von Filter du benötigst, es ist sehr wahrscheinlich, dass es realisierbar ist. Alles, was du brauchst, ist ein bisschen CSS und ein paar HTML-Formularelemente …

Hier ist ein Funktionsbeispiel:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Lass' es uns Schritt für Schritt aufbauen

1. Zuerst benötigen wir die übliche HTML-Struktur von Gridzy und legen Klassennamen für alle Galerieelemente fest, damit wir sie anschließend filtern können

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

In diesem Beispiel verwenden wir nur eine Klasse für jedes Element. Man kann aber auch mehrere Klassen für ein Element festlegen, wenn dieses über mehrere Filter auffindbar sein soll.

2. Dann fügen wir einige Buttons hinzu, über die wir die Filter ändern können.

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Anstelle der Buttons kannst du auch andere Formularelemente wie Kontrollkästchen, Optionsfelder, Auswahlfelder usw. verwenden.

Wie du siehst, sind die Werte der Buttons normale CSS-Selektoren. Sobald wir fertig sind, werden durch einen Klick auf einen solchen Button die Bilder angezeigt, die diesem CSS-Selektor entsprechen. Technisch gesehen wird die Option filter einfach auf diesen Wert gesetzt.

Du kannst auch viel komplexere Selektoren verwenden. Beispielsweise würde :not(.animals) auch funktionieren, ebenso wie .animals.people und .animals, .people .

3. Zuletzt geben wir die Buttons in einen div-Container und binden sie an die Gridzy-Galerie, indem wir die Option filterControls festlegen:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Wie man sieht, verwenden wir auch für die Option filterControls einen CSS-Selektor. Der div Container mit dem id-Attribut dient lediglich dazu, die Auswahl der Buttons über diesen CSS-Selektor zu vereinfachen.

Das war's!

Wenn du eine JavaScript-Lösung bevorzugst, sieh dir die API an.

API

Obwohl Gridzy eine eigene API hat, kann man die meisten Dinge auch ohne diese erledigen, indem man einfach das DOM manipuliert. Gridzy wird es bemerken und das Raster anpassen. Aber es gibt auch eine sehr mächtige API …

Manipulation des DOM

Für alle Document Object Model (DOM) Manipulationen benötigen wir zunächst das Containerelement:

// get the container element
var gridzyElement = document.querySelector('.gridzy');

Bilder hinzufügen

Es ist wichtig, das neue untergeordnete Element vollständig zu erstellen und zu füllen, bevor du es dem Containerelement hinzufügst. Andernfalls kann Gridzy die richtigen Abmessungen nicht erkennen.

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

Bilder entfernen

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

Optionen ändern

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

Weitere Informationen zur Manipulation des DOM findest du in den MDN-Webdokumenten . Dort ist auch eine Einführung in den DOM verfügbar.

Proprietäre API

Um die API zu verwenden, benötigen wir zunächst die Gridzy-Instanz, die an das Gridzy-Containerelement gebunden ist:

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

Option abrufen

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

Alle Optionen abrufen

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

Optionen festlegen

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

Filter anwenden

Beim Anwenden eines Filters wird lediglich die Option filter festgelegt, die jeder gültige CSS-Selektor sein kann:

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

Callback-Funktionen hinzufügen

Veraltet seit Version 2.4.0
Verwende stattdessen die modernen und flexibleren Events . Weitere Einzelheiten findest du im nächsten Abschnitt.

~~Gridzy.js 2 unterstützt einige Optionen für Callback-Funktionen. Diese können nur über die proprietäre API gesetzt werden, funktionieren aber genau wie andere Optionen:~~

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	~~Beschreibung~~
~~`onBeforeOptionsChanged`~~	~~Callback-Funktion, die direkt vor dem Festlegen von Optionen aufgerufen wird.~~
~~`onOptionsChanged`~~	~~Callback-Funktion, die direkt nach dem Setzen von Optionen aufgerufen wird.~~
~~`onBeforeRender`~~	~~Callback-Funktion, die direkt vor dem Rendern aufgerufen wird.~~
~~`onRender`~~	~~Callback-Funktion, die direkt nach dem Rendern aufgerufen wird.~~

Events verwenden

seit Version 2.4.0

Du kannst Gridzy-Events genau wie normale JavaScript-Events verwenden:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

Einige Events werden auf dem Gridzy-Containerelement ausgelöst und andere Events werden auf den einzelnen Elementen innerhalb des Containerelements ausgelöst.

Auf dem Gridzy-Containerelement ausgelöste Events:

	Beschreibung
`gridzyBeforeInit`	Wird vor der Initialisierung der Galerie ausgelöst.
`gridzyInit`	Wird nach der Initialisierung der Galerie ausgelöst.
`gridzyBeforeOptionsChanged`	Wird vor dem Festlegen von Optionen ausgelöst.
`gridzyOptionsChanged`	Wird nach dem Festlegen der Optionen ausgelöst.
`gridzyBeforeRender`	Wird vor dem Rendern ausgelöst.
`gridzyRender`	Wird nach dem Rendern ausgelöst.

Solltest du hier Events vermissen, sende bitte eine Supportanfrage .

event.target stellt das Gridzy-Containerelement bereit.
event.detail.instance stellt die Gridzy-Instanz bereit.

Auf Elementen ausgelöste Events:

	Beschreibung
`gridzyItemBeforeInit`	Wird vor der Elementinitialisierung ausgelöst.
`gridzyItemInit`	Wird nach der Elementinitialisierung ausgelöst.
`gridzyItemLoading`	Wird ausgelöst, wenn mit dem Laden des Elements begonnen wird.
`gridzyItemReady`	Wird ausgelöst, wenn das Element für die Rasterberechnung bereit ist. Das Seitenverhältnis ist also bekannt, aber das Bild wird möglicherweise noch geladen.
`gridzyItemComplete`	Wird ausgelöst, wenn das Bild vollständig geladen ist.

Solltest du hier Events vermissen, sende bitte eine Supportanfrage .

event.target stellt das entsprechende Item-Element bereit.
event.detail.instance stellt die Gridzy-Instanz bereit.

API – Global

Es gibt einige Funktionen, die unabhängig von Gridzy-Instanzen sind. Daher müssen wir vorher keine Instanz abrufen.

Standardoption abrufen

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

Alle Standardoptionen abrufen

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

Standardoptionen festlegen

Dies setzt nicht die Optionen aller bereits initialisierten Gridzy-Instanzen, sondern legt die Basis für neue Instanzen fest. Würde jedoch eine Option einer bestehenden Instanz über den Wert null zurückgesetzt, würde sie den neuen Standardwert verwenden.

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

Du kannst dies verwenden, um Optionen global festzulegen, sofern du es aufrufst, bevor der DOM bereit ist. Du musst Optionen also nicht mehr als Attribute festlegen.

Automatismen

Solange alle Automatismen von Gridzy.js 2 aktiv sind, sind die folgenden Methoden nicht erforderlich. Die Automatismen können jedoch ausgeschaltet werden, um Gridzy auf traditionellere Weise zu verwenden:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

Einige dieser Optionen können aus logischen Gründen nicht über data-gridzy- Attribute oder über setOptions() gesetzt werden:

	Standardwert	Beschreibung
`autoInitOnDomReady`	`true`	Erkennt Elemente mit der Klasse `gridzy` beim Laden der Seite und initialisiert sie. Einstellbar über `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Erkennt neue Elemente mit der Klasse `gridzy` sobald sie im DOM erscheinen und initialisiert sie. (zB bei der Verwendung von Seitenübergängen) Einstellbar über `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Erkennt, ob untergeordnete Elemente (Bilder) hinzugefügt oder entfernt werden, und aktualisiert das Raster automatisch. Einstellbar über `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definiert, ob die `data-gridzy-` Attribute generell verwendet werden oder nicht. Wenn dieser Wert `false` ist, können Optionen nur über die proprietäre API gesetzt werden. Einstellbar über `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Erkennt Änderungen an `data-gridzy-` Attributen und aktualisiert das Raster automatisch. Erkennt auch, ob die Klasse `gridzyAnimated` hinzugefügt oder entfernt wird und ob Änderungen an `style` auftreten. Wenn `useOptionAttributes` `false` ist, erkennt es nur Änderungen an `style` . Einstellbar über `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Erkennt Änderungen an `class` aller Kindelemente (Bilder). Relevant hinsichtlich Filtern. Einstellbar über `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver ab Version 2.5.0	`true`	Erkennt Änderungen der `src` Attribute aller Bilder. Relevant bei Verwendung mit React oder ähnlichen Bibliotheken. Einstellbar über `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver seit Version 2.6.0	`true`	Erkennt Änderungen der Elementbreite. Relevant im Hinblick auf Responsive Design. (Vor Version 2.6.0 wurde ein EventListener für window resize verwendet) Einstellbar über `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Manuell initialisieren

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

Zerstöre die Instanz

Grob gesagt das Gegenteil der Initialisierung von Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Untergeordnete Liste manuell synchronisieren

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

Ein einzelnes untergeordnetes Element manuell synchronisieren

Normalerweise nicht erforderlich, außer in sehr seltenen Fällen.

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

Attribute manuell synchronisieren

Beachte, dass die Option useOptionAttributes hierfür auf true gesetzt sein muss.

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

Rendern erzwingen

Normalerweise nicht nötig, auch wenn alle Automatismen ausgeschaltet sind

gridzyInstance.render();

WordPress Plugin

JavaScript-Bibliothek

Service