Gridzy.Gallery
Bibbliuteca JavaScript
La spirènzia fotugrafica cchiù straordinaria ca attruvau. Finarmenti qualchidunu capisci comu fari chistu GIUSTU!
Milo Persic – n'utenti dâ bibblioteca
Intuizzioni rapida
Tutoriali vìdiu di 1 minutu
Impara chistu nta nu minutu:
Usu di basi
Cunfigurazzioni
Filtri
Mpigna
Stili di didascalia
Stili di didascalii pridifinuti pi suluzzioni facili e viloci
Passa lu cursuri supra l'immaggini pi vìdiri lu stili di didascalia cunfiguratu. Gioca cchî pulsanti e li scigghitura di culura pi cunfigurari lu stili ncorpuratu mustratu.
Tagghi e filtri
Pi mustrari li vostri mmàggini nta na manera cchiù strutturata
Lu sistema di filtru ncorpuratu è assai flissìbbili. Lu fattu ca li silittura CSS vennu usati pi filtrari pirmetti quasi ogni tipu di filtru.
Assai cumpatibbili
Usabbili cu tanti Lightbox
Ammisca la gallerìa cu qualegghiè lightbox. La prubbabbilità ca è cumpatibbili è quasi dû 100%. Clicca ncapu l'immaggini pi vìdiri la casella di luci PhotoSwipe comu esempiu.
Ci su' artìculi di blog cu fragmenti di còdici pronti:
Assai flissìbbili
Crià stili pirsunalizzati
Si canusci lu CSS, po stilari l'uggetti dâ gallerìa comu voli.
CSS di l'esempiu mustratu:
/* 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;
}Usa qualegghiè HTML
Pudete usari quasi ogni HTML. Ci su sulu assái picca ristrizzioni. L'esempi mustrati ccà prudùcinu tutti dui lu stissu risultatu visivu.
Esempiu 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>Esempiu 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>Cchiù funziunalità utili
Caricamentu pigru
Carica cchiù velocimenti li mmàggini visti
Chistu càrica sulu chiḍḍi mmàggini ca su' vicini a l'aria visìbbili. Quinni cchiù larghizza di banda pi l'immaggini visìbbili.
API
Ti pirmetti di fari assái cchiù
Chistu ti cunzenti di junciri e livari mmàggini ‘n manera prugrammatica, canciari l'opzzioni o riaggiri a l'eventi.
Estensioni
Ti duna suluzzioni pi scinari singuli
È na raccolta di artìculi di blog ca crìsciunu nnô tempu e cuntèninu fragmenti di còdici utili pi allargari facilmenti Gridzy.Gallery .
Utenti Supra la Bibbliuteca
Accuminciamu a fari l'affari!
Clicca supra lu buttuni pi vìdiri li pruggetti!