Gridzy.Gallery
JavaScript-biblioteek
Wonderlikste foto-ervaring wat ek gevind het. Uiteindelik verstaan iemand hoe om dit REG te doen!
Milo Persic – 'n gebruiker van die biblioteek
Vinnige insig
1 minuut video-tutoriaal
Leer dit binne 'n minuut:
Basiese gebruik
Konfigurasie
Filters
Voorkoms
Byskrif Styles
Vooraf gedefinieerde onderskrifstyle vir maklike vinnige oplossings
Beweeg die prente om die gekonfigureerde onderskrifstyl te sien. Speel met die knoppies en kleurkiesers om die gewysde ingeboude styl op te stel.
Merkers en filters
Om jou beelde op 'n meer gestruktureerde manier te vertoon
Die ingeboude filterstelsel is uiters buigsaam. Die feit dat CSS-kiesers vir filtering gebruik word, maak feitlik enige tipe filter moontlik.
Hoogs versoenbaar
Gebruikbaar met baie ligbokse
Kombineer die galery met enige ligkas. Die waarskynlikheid dat dit versoenbaar is, is byna 100%. Klik op die prente om die PhotoSwipe-ligkas as 'n voorbeeld te sien.
Daar is blogartikels met klaargemaakte kodebrokkies:
Hoogs buigsaam
Skep pasgemaakte style
As jy vertroud is met CSS, kan jy die gallery-items styleer soos jy wil.
CSS van getoonde voorbeeld:
/* 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;
}Gebruik enige HTML
Jy kan byna enige HTML gebruik. Daar is net baie min beperkings. Die voorbeelde wat hier getoon word, lewer albei dieselfde visuele resultaat.
Voorbeeld 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>Voorbeeld 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>Meer nuttige kenmerke
Lui laai
Laai jou bekykte beelde vinniger
Dit laai slegs die beelde wat naby die sigbare area is. Dus meer bandwydte vir sigbare beelde.
API
Laat jou toe om baie meer te doen
Dit laat jou toe om beelde programmaties by te voeg en te verwyder, opsies te verander of op gebeurtenisse te reageer.
Uitbreidings
Verskaf jou oplossings vir individuele scenario's
Dit is 'n versameling blogartikels wat mettertyd groei en nuttige kodebrokkies bevat om Gridzy.Gallery maklik uit te brei.
Gebruiker oor die biblioteek
Kom ons gaan aan die gang!
Klik op die knoppie om na die planne te kyk!