Gridzy.Gallery
JavaScript Bibliothéik
Déi erstaunlechst Fotoerfahrung déi ech fonnt hunn. Endlech versteet een wéi dat RECHT ze maachen!
Milo Persic - e Benotzer vun der Bibliothéik
Schnell Asiicht
1 Minutt Video Tutorial
Léiert dëst an enger Minutt:
Basis Benotzung
Configuratioun
Filteren
Ausgesinn
Caption Styles
Virdefinéiert Iwwerschrëftstiler fir einfach séier Léisungen
Hover d'Biller fir de konfiguréierten Iwwerschrëftstil ze gesinn. Spillt mat de Knäppercher a Faarfpicker fir de ugewisenen agebaute Stil ze konfiguréieren.
Tags & Filters
Fir Är Biller méi strukturéiert ze weisen
Den agebaute Filtersystem ass extrem flexibel. D'Tatsaach datt CSS Selektor fir Filteren benotzt gëtt, erméiglecht tatsächlech bal all Typ vu Filter.
Héich kompatibel
Benotzbar mat ville Lightboxen
Kombinéiert d'Galerie mat all Lightbox. D'Wahrscheinlechkeet datt et kompatibel ass ass bal 100%. Klickt op d'Biller fir d'PhotoSwipe Lightbox als Beispill ze gesinn.
Héich flexibel
Erstellt personaliséiert Stiler
Wann Dir mat CSS vertraut sidd, kënnt Dir d'Galerieartikele stiléieren wéi Dir wëllt.
CSS vum gewisen Beispill:
/* 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;
}Benotzt all HTML
Dir kënnt bal all HTML benotzen. Et ginn nëmme ganz wéineg Restriktiounen. D'Beispiller hei gewisen souwuel produzéiere déi selwecht visuell Resultat.
Beispill 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>Beispill 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>Méi nëtzlech Funktiounen
Lazy Loading
Lued Är gekuckt Biller méi séier
Dëst lued nëmmen déi Biller déi no bei der sichtbarer Géigend sinn. Also méi Bandbreedung fir siichtbar Biller.
API
Erlaabt Iech vill méi ze maachen
Dëst erlaabt Iech Biller programmatesch ze addéieren an ze läschen, Optiounen z'änneren oder op Eventer ze reagéieren.
Erweiderungen
Bitt Iech Léisunge fir eenzel Szenarien
Et ass eng Sammlung vu Blogartikelen déi mat der Zäit wuessen an hëllefräich Code Snippets enthalen fir Gridzy.Gallery einfach ze verlängeren.
Benotzer Iwwer d'Bibliothéik
Komm mer op d'Geschäft!
Klickt op de Knäppchen fir d'Pläng ze kucken!