Gridzy.Gallery
Biblioteche JavaScript
La esperience fotografiche plui maraveose che o ves cjatât. Finalmentri cualchidun al capis come fâ chest DIRET!
Milo Persic - un utent de biblioteche
Intuizion svelte
Tutoriâl video di un minût
Impara chest intun minût:
Uso di base
Configurazion
Filtris
Aspiet
Stîi di descrizion
Stîi di didascalie predefinîts par soluzions facilis e sveltis
Passâ il cursôr su lis imagjins par viodi il stîl de didascalie configurât. Zuegâ cui tast e cui selezionadôrs di colôrs par configurâ il stîl integrât mostrât.
Etichetis e filtris
Par mostrâ lis vôs imagjins in mût plui struturât
Il sisteme di filtris integrât al è une vore flessibil. Il fat che i seletôrs CSS a son doprâts par filtrâ al permet in realtât cuasi ogni tip di filtri.
Altementri compatibil
Usabil cun tantis cjasis di lûs
Cumbinâ la galarie cun cualsisei cjase di lûs. La probabilitât che al sedi compatibil e je cuasi dal 100%. Clicâ su lis imagjins par viodi la cjase di lûs PhotoSwipe come esempli.
A son articui dal blog cun framents di codiç pronts:
Une vore flessibil
Creâ stîi personalizâts
Se tu cognossis il CSS, tu puedis stîlâ i elements de galerie come che tu volis.
CSS dal esempli mostrât:
/* 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;
}Utilizâ cualsisei HTML
Si pues doprâ cuasi ogni HTML. A son dome une vore pocjis restrizions. I esemplis mostrâts culì a produsin ducj i doi il stes risultât visîf.
Esempli 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>Esempli 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>Carateristichis plui utilis
Caricament pigr
Carica lis imagjins viodudis plui di corse
Chest al cjare dome chês imagjins che a son dongje de aree visibili. Cussì plui largjece di bande pes imagjins visibilis.
API
Al permet di fâ une vore di plui
Chest al permet di zontâ e rimovi imagjins in mût programmatic, cambiâ opzions o reagjî ai events.
Estensions
Ti furnìs soluzions par senaris individuâi
E je une racuelte di articui dal blog che a cressin cul timp e a contegnin framents di codiç utii par slargjâ cun facilitât Gridzy.Gallery .
Utent Su la Biblioteche
Cjapemo i afârs!
Clicâ sul botôn par viodi i progjets!