Gridzy.Gallery
Bibliotèca JavaScript
L'experiéncia de fòto mai estonanta qu'ai trobada. Enfin qualqu'un compren cossí far aquò CORRÈT!
Milo Persic – un utilizaire de la bibliotèca
Apercebut rapid
Tutorial vidèo de 1 minuta
Aprenètz aquò en sonque una minuta:
Utilizacion de basa
Configuracion
Filtres
Aparicion
Estils de legenda
Estils de legendas predefinits per de solucions rapidas aisida
Passatz lo cursor sus las imatges per veire l'estil de legenda configurat. Jòga amb los botons e los selectors de colors per configurar l'estil incorporat mostrat.
Etiquetas e filtres
Per afichar vòstres imatges d'un biais mai estructurat
Lo sistèma de filtre incorporat es extrèmament sople. Lo fach que los selectors CSS son utilizats pel filtratge permet en realitat gaireben tot tipe de filtre.
Fòrça compatible
Utilizable amb fòrça Lightboxes
Combinatz la galariá amb quina lightbox que siá. La probabilitat qu'es compatibla es gaireben 100%. Clicatz sus las imatges per veire la bóstia de lutz PhotoSwipe coma exemple.
I a d'articles de blòg amb de fragments de còde prèstes:
Fòrça sople
Crear d'estils personalizats
Se coneissètz CSS, podètz estilizar los elements de la galariá coma volètz.
CSS de l'exemple mostrat :
/* 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;
}Utilizar quin HTML que siá
Podètz utilizar gaireben tot HTML. I a pas que fòrça paucas restriccions. Los exemples mostrats aicí produson totes dos lo meteis resultat visual.
Exemple 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>Exemple 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>Mai de foncionalitats utilas
Cargament mandra
Carga mai rapidament vòstres imatges visualizats
Aquò carga pas que los imatges que son pròches de l'airal visible. Doncas mai de largor de banda per d'imatges visibles.
API
Vos permet de far fòrça mai
Aquò vos permet d'apondre e de suprimir d'imatges programaticament, de cambiar d'opcions o de reagir a d'eveniments.
Extensions
Vos provesís de solucions per d'escenaris individuals
Es una colleccion d'articles de blòg que creisson amb lo temps e contenon de fragments de còde utils per alargar aisidament Gridzy.Gallery .
Utilizaire A prepaus de la Bibliotèca
Anem a far los afars!
Clicatz sul boton per consultar los plans!