Gridzy.Gallery
JavaScript-Bibliothek
Das erstaunlichste Fotoerlebnis, das ich je hatte. Endlich weiß jemand, wie man das RICHTIG macht!
Milo Persic – ein Benutzer der Bibliothek
Kurzer Einblick
1-minütiges Video-Tutorial
Erfahre in nur einer Minute:
Grundlegende Verwendung
Konfiguration
Filter
Aussehen
Beschriftungsstile
Vordefinierte Beschriftungsstile für einfache, schnelle Lösungen
Bewege den Mauszeiger über die Bilder, um den konfigurierten Beschriftungsstil anzuzeigen. Spiele mit den Buttons und Farbwählern, um den angezeigten integrierten Stil zu konfigurieren.
Tags und Filter
Zur strukturierteren Anzeige deiner Bilder
Das eingebaute Filtersystem ist äußerst flexibel. Dadurch, dass zur Filterung CSS-Selektoren verwendet werden, sind eigentlich nahezu beliebige Filtertypen möglich.
Hohe Kompatibilität
Mit vielen Lightboxen verwendbar
Kombiniere die Galerie mit jeder beliebigen Lightbox. Die Wahrscheinlichkeit der Kompatibilität liegt bei nahezu 100%. Klicke auf die Bilder, um die PhotoSwipe-Lightbox als Beispiel anzuzeigen.
Es gibt Blogartikel mit vorgefertigten Code-Snippets:
Äußerst flexibel
Erstelle eigene Stile
Wenn du mit CSS vertraut bist, kannst du die Galerieelemente nach deinen Wünschen gestalten.
CSS des gezeigten Beispiels:
/* CSS class: "gridzySkin-custom-sepia" */
@property --gridzySkin-custom-sepia--filter-sepia {
initial-value: 1;
inherits: true;
syntax: "<number>";
}
@property --gridzySkin-custom-sepia--filter-contrast {
initial-value: 1;
inherits: true;
syntax: "<number>";
}
.gridzySkin-custom-sepia > .gridzyItem {
position: relative;
overflow: unset;
margin: -10px;
border: 10px solid #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
border-radius: 10px;
}
.gridzySkin-custom-sepia > .gridzyItem *:not(.gridzyCaption) {
display: inline;
}
.gridzySkin-custom-sepia > .gridzyItem .gridzyCaption * {
display: initial;
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n) {
transform: rotate(-1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+1) {
transform: rotate(-.5deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+2) {
transform: rotate(1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+3) {
transform: rotate(.5deg);
}
.gridzySkin-custom-sepia .gridzyImage {
position: relative;
vertical-align: middle;
border-radius: 3px;
--gridzySkin-custom-sepia--filter-sepia: 1;
--gridzySkin-custom-sepia--filter-contrast: .7;
filter: sepia(var(--gridzySkin-custom-sepia--filter-sepia)) contrast(var(--gridzySkin-custom-sepia--filter-contrast));
transition: --gridzySkin-custom-sepia--filter-sepia .6s, --gridzySkin-custom-sepia--filter-contrast .6s;
}
.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyImage {
--gridzySkin-custom-sepia--filter-sepia: 0;
--gridzySkin-custom-sepia--filter-contrast: 1;
}
.gridzySkin-custom-sepia .gridzyCaption {
margin: 0;
padding: .5em;
position: absolute;
z-index: 1;
bottom: -.5em;
top: auto;
width: auto;
max-width: calc(100% - 2em);
height: fit-content;
max-height: 100%;
overflow: auto;
box-sizing: border-box;
background: rgba(238, 238, 238, .8);
color: #000;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
opacity: 0;
transition: opacity .3s;
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(3deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+1) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(-3deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+2) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(-1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n) .gridzyCaption {
left: calc(50% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+1) .gridzyCaption {
left: calc(54% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+2) .gridzyCaption {
left: calc(46% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+3) .gridzyCaption {
left: calc(52% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+4) .gridzyCaption {
left: calc(48% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyCaption {
opacity: 1;
}Beliebiges HTML verwenden
Du kannst nahezu jedes HTML verwenden. Es gibt nur sehr wenige Einschränkungen. Die hier gezeigten Beispiele führen beide zum gleichen visuellen Ergebnis.
Beispiel 1:
<ul class="gridzy gridzySkinClassic">
<li>
<a href="https://www.example.com/">
<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
<span class="gridzyCaption">example caption 1</span>
</a>
</li>
<li>
<a href="https://www.example.com/">
<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
<span class="gridzyCaption">example caption 2</span>
</a>
</li>
...
</ul>Beispiel 2:
<section class="gridzy gridzySkinClassic">
<figure>
<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
<figcaption class="gridzyCaption">example caption 1</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
<figcaption class="gridzyCaption">example caption 2</figcaption>
</figure>
...
</section>Weitere nützliche Funktionen
Lazy Loading
Lädt deine angezeigten Bilder schneller
Dadurch werden nur die Bilder geladen, die sich in der Nähe des sichtbaren Bereichs befinden. Dadurch wird mehr Bandbreite für sichtbare Bilder bereitgestellt.
API
Ermöglicht dir, noch viel mehr zu tun
Dadurch kannst du programmgesteuert Bilder hinzufügen und entfernen, Optionen ändern oder auf Events reagieren.
Erweiterungen
Bietet dir Lösungen für individuelle Szenarien
Es handelt sich um eine Sammlung von Blog-Artikeln, die mit der Zeit wachsen und hilfreiche Code-Schnipsel enthalten, um Gridzy.Gallery einfach zu erweitern.
Benutzer Über die Bibliothek
Kommen wir zur Sache!
Klick auf den Button, um dir die Pakete anzusehen!