Version 2.x – Gridzy.Gallery

El sito el xe stà tradoto automaticamente. Se calcossa no xe ciaro, varda ła documentasion in inglexe.

Uxo de baxe

Carica i file de Gridzy sul server e zontarli al sito web (de sołito neła sesion in testa):

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

Xonta el còdexe HTML (in ogni parte neła sesion del corpo):

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Xe tuto! Questo xe un exénpio funsionałe. No ghe xe bisogno de inisiałixasion in pì.

Configurasion

El modo pì façiłe pa configurare Gridzy xe doparar i atributi HTML. Te ghè soło da métar el prefiso dei nomi dełe opsion co data-gridzy- . Alora, pa métar l’opsion spaceBetween , basta zontar l’atributo data-gridzy-spaceBetween .

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Opsion prinsipałi

	Vałor predefinìo	Descrission
`animate`	`true`	Determina se le animazioni devono essere usate quando modifica la griglia (per esempio quando ridimensiona la finestra del browser o quando se imposta un filtro).
`layout`	`justified`	Definisse el layout doparà. Gridzy.js 2 el suporta i do diversi layout `justified` e `waterfall` . Ognuno de łori el ga i so parametri de opsion adisionałi, che te pol catar soto sta tabeła.
`filter`	`*`	El stabiłise quałi imagini łe ga da esar mostràe. Qualsiasi CSS-seletor el pol esar doparà come vałor qua. De sołito el vien meso automaticamente co `filterControls` (varda ła opsion dopo). Varda i Filtri
`filterControls`		Determina quałi ełementi del modèo i pol esar doparài pa filtrar łe imagini. Ogni sełesionador CSS, che el selesiona i ełementi del modèo HTML, el pol esar doparà come vałor qua. Varda i Filtri
`autoConsiderScrollBars`	`true`	Per preveder la larghezza disponibile se le bare de scorrimento compariscono o spariscono. Xe senpre mèjo łasarlo su `true` a manco che sto automatismo nol causa problemi.

Justified Opsion de layout

	Vałor predefinìo	Descrission
`autoFontSize`	`false`	El ajorna in modo automatico ła proprietà de dimension del caratere de ogni caseła in base ałe dimension de ła scatoa orixinałe. Par indebołimento ła proprietà font-size no ła xe stà mesa in modo ciaro.
`desiredHeight`	`190`	Definisse l'altesa desiderada dełe righe dei ełementi. L’altesa vera ła sarà calcołada in base ała larghesa disponibiłe e ai ełementi deła riga.
`hideOnMissingImage`	`true`	Sconde łe casełe che łe contien imagini che no łe xe stà caricae.
`spaceBetween`	`4`	Definisse ła distansa tra i ełementi in pixel.
`lastRowAlign` dalla versione 2.3.0	`justified`	Definisse el comportamento de l'ultima riga. I vałori permesi i xe `left` , `center` , `right` e `justified` .
`singleRowAlign` dalla versione 2.3.0	`justified`	Definisse il comportamento se c'è solo una sola riga. I vałori permesi i xe `left` , `center` , `right` e `justified` .
~~`fillLastRow`~~ ~~dalla versione 2.1.0~~	~~`true`~~	RIMOVOTO dalla versione 2.4.0 (DEPRECATÀ dalla versione 2.3.0 ) Dispone le imagini in modo che l'ultima riga sia sempre completamente riempia. Se te vol zontar imagini in modo dinamico, podarìa esar na bona idea disativarlo. No ga efeto su singołe righe (varda `fillSingleRow` ).
`fillSingleRow` dalla versione 2.1.0	~~`true`~~	RIMOVOTO dalla versione 2.4.0 (DEPRECATÀ dalla versione 2.3.0 ) Se c'è solo una riga, sistema le immagini in modo che la riga sia sempre completamente riempia. Se pol capitar che te ghè soło una o do imagini inte ła gałeria, podarìa esar na bona idea disativarla.

Waterfall Opsion de layout

	Vałor predefinìo	Descrission
`autoFontSize`	`false`	El ajorna in modo automatico ła proprietà de dimension del caratere de ogni caseła in base ałe dimension de ła scatoa orixinałe. Par indebołimento ła proprietà font-size no ła xe stà mesa in modo ciaro.
`desiredWidth`	`250`	Definisse ła larghezza dexiderà dełe cołone. Ła larghesa vera ła sarà calcołada in base a ła larghesa disponibiłe e al numaro de cołone.
`hideOnMissingImage`	`true`	Sconde łe casełe che łe contien imagini che no łe xe stà caricae.
`horizontalOrder`	`false`	Definisse che i elementi vengono messi rigorosamente un elemento in ogni colonna da sinistra a destra, poi riparte nella colonna più sinistra indipendente da quale colonna è più posto. Par difault i ełementi i sarà senpre messi inte ła cołona co l’altesa pì picoła.
`spaceBetween`	`4`	Definisse ła distansa tra i ełementi in pixel.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Opsion pì vansàe

Par opsion pì avansàe, varda l’ API .

HTML semantico

Ła strutura HTML pì sénplise de Gridzy ła xe questa:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Tutavia, Gridzy el xe tant flesibiłe e te pol doparar quasi tute łe altre struture HTML. Ghe xe soło pochi punti da tegner conto:

Ogni bocia de l’ełemento del contenidor el rapresenta un elemento inte ła grìglia.
Sia l'ełemento container che i so fioi i pol esar qualsiasi tipo de tag, come ul e li (basta pensar de resetar i predefinii del browser).
Se un ełemento img no l’è un bocia direto, el ga bisogno deła clase gridzyImage .

Quindi questa xe anca na strutura HTML che funsiona:

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

Soratuto se te vol zontar didascalie, te ghè bisogno de na strutura HTML avansà. Pa saver de pì, varda Captions & Skins .

Didascalie e Skin

Se te vol zontar didascalie ała gałeria, te ghè da definir l’aspeto. Par cui, ghe xe alcune skin predefinie. Ogni skin costituita da un file CSS. Bisogna zontar sto file in pì dei file prinsipałi de Gridzy (de sołito neła sesion testa):

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

In pì te ghè bisogno de na strutura HTML avansà:

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

Se te te domandi ła strutura HTML, varda HTML semantico .

Pa ła didascałia te pol doparar qualsiasi tipo de tag, basta assicurarte che el gabia ła clase gridzyCaption . L’ełemento img el ga bisogno deła clase gridzyImage .

L’exénpio sora el te mostra ła skin gridzySkinClassic . Pa dopararne uno difarente, basta sostituir el nome deła skin co uno de questi:

Skin incluse

	Lession disponibiłi
gridzySkinBlank un bon punto de partensa pa crear na skin anteprima dal vivo	`gridzySkinBlank`
gridzySkinClassic anteprima dal vivo	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATÀ dalla versione 2.6.0)
gridzySkinFullOverlay anteprima dal vivo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATÀ dalla versione 2.6.0)
gridzySkinLift anteprima dal vivo	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATÀ dalla versione 2.6.0)
gridzySkinMagnifier ła funsionałità de zoom no ła xe conprexa anteprima dal vivo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATÀ dalla versione 2.6.0)

Tute łe skin sora łe ga bisogno soło de un file CSS, ma ghe xe altre skin che łe ga bisogno anca de un file JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	Lession disponibiłi
gridzySkinBlur no funziona in IE anteprima dal vivo	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATÀ dalla versione 2.6.0)
gridzySkinCard anteprima dal vivo	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATÀ dalla versione 2.6.0)

Opsion deła pełe

Dalla versione 2.6.0 ci sono Opzioni per configurare le skin integrate. A seconda deła skin spesifega te pol métar el cołor del sfondo, el cołor del testo e l’ombra del testo. Te ghè soło da doparar łe proprietà personalixàe del CSS come che te pol védar qua:

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

Varda łe variàbiłi sostegnùe e i vałori predefinìi pa ogni skin qua:

gridzySkinClassic

Variabiłe	Vałor predefinìo	Informassion
`--background`	`rgba(0, 0, 0, .7)`	el permete qualsiasi vałor de sfondo CSS
`--color`	`rgb(255, 255, 255)`	el permete ogni vałor de cołor CSS
`--text-shadow`	`none`	el permete qualsiasi vałor de ombra de testo CSS

gridzySkinFullOverlay

Variabiłe	Vałor predefinìo	Informassion
`--background`	`rgba(0, 0, 0, .7)`	el permete qualsiasi vałor de sfondo CSS
`--color`	`rgb(255, 255, 255)`	el permete ogni vałor de cołor CSS
`--text-shadow`	`none`	el permete qualsiasi vałor de ombra de testo CSS

gridzySkinLift

Variabiłe	Vałor predefinìo	Informassion
`--background`	`rgba(0, 0, 0, .7)`	el permete qualsiasi vałor de sfondo CSS
`--color`	`rgb(255, 255, 255)`	el permete ogni vałor de cołor CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	el permete qualsiasi vałor de ombra de testo CSS

gridzySkinMagnifier

Variabiłe	Vałor predefinìo	Informassion
`--background`	`rgba(0, 0, 0, .7)`	el permete qualsiasi vałor de sfondo CSS
`--color`	`rgb(255, 255, 255)`	el permete ogni vałor de cołor CSS

Sta skin no ła suporta --text-shadow

gridzySkinBlur

Variabiłe	Vałor predefinìo	Informassion
`--background`	`rgba(0, 0, 0, .7)`	el permete qualsiasi vałor de sfondo CSS
`--color`	`rgb(255, 255, 255)`	el permete ogni vałor de cołor CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	el permete qualsiasi vałor de ombra de testo CSS

gridzySkinCard

Variabiłe	Vałor predefinìo	Informassion
`--background`	`rgba(0, 0, 0, 1)`	el permete qualsiasi vałor de sfondo CSS
`--color`	`rgb(255, 255, 255)`	el permete ogni vałor de cołor CSS
`--text-shadow`	`none`	el permete qualsiasi vałor de ombra de testo CSS

Tute łe skin predefinie łe suporta soło didascałie de testo sénplisi. Te pol crear łe toe skin pì conplese. Par piasér, varda Style Gridzy .

Stile Gridzy

Se no ghe xe na pełe predefinìa che ła va ben, te pol farte ła toa.

El modo pì façiłe xe prima copiar na skin che ghe xé xà e adatàrla ai so bisogni. Ła skin predefinia gridzySkinBlank de sołito ła fornise na bona base e na bona documentasion nel file CSS:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

Nel file CSS te gavarè łe clasi gridzySkinBlank , gridzyImage e gridzyCaption . Gridzy no ga bisogno de ste lession. Sono usati solo per styling e quindi potete toglierli o rinominare se volete.

In pì te gavarè ła clase CSS gridzyItem . Gridzy el mete sta clase automaticamente a tuti i bocia direti de l’ełemento prinsipałe del container. Alora, te pol doparar sta clase pa stiłixare i ogeti deła gałeria.

Mente robe inportanti

El contenuto de l’ogèto el ga da esar conpletamente responsivo. Tegner conto che ła dimension de l’ełemento ła canbiarà sicuramente. Dopara i vałori persentuałi invese de i pixel. E varda l’opsion de layout de Gridzy autoFontSize , che ła liga ła dimension del caratere a ła dimension deła caseła de l’ogèto.
Ogni ełemento el ga da vér un raporto de aspeto ben definìo. El raporto de aspeto de l’ogèto no canbiarà mai e el xe necesario pa calcołar ła grèa. Quindi se un voce non ha automaticamente una proporzione ben definita, predefinitela manualmente (ad esempio tramite css).

In serti caxi, pol esar pì façiłe stiłixare el contenuto dei ełementi prima che Gridzy el se inisiałixa. Basta rimuovere temporaneamente la classe gridzy o il file javascript Gridzy per questo.

Xe tuto! Xe tuto queło che te serve pa costruirte ła toa pełe. Ła major parte dełe skin predefinie no łe dopara pì de questo.

Ma ghe ne podaria esar de pì se te vol…

Skin avansà

Gridzy el dopara pì clasi CSS che soło gridzyItem . Ła major parte de łori i sarà inpostài automaticamente e te pol dopararli anca pa far el stiłe.

Classi de contenitori prinsipałi

Nome de ła clase	Descrission
`gridzy` da impostare manualmente	Gridzy el cata automaticamente i ełementi co sta clase e el li inisiałixa.
`gridzyAnimated`	El sarà meso automaticamente se l’opsion `animate` ła xe `true` . Se sta clase ła vien mesa manualmente, anca l’opsion `animate` ła deventarà automaticamente `true` (a parte se ła xe mesa a `false` ).

Classi de ogeti

Nome de ła clase	Descrission
`gridzyItem`	El sarà meso pena che l’ełemento el scominsia el proceso de inisiałixasion. No sarà mai cavà.
`gridzyItemInitializing`	El sarà meso pena che l’ełemento el scominsia el proceso de inisiałixasion. El sarà sostituìo da `gridzyItemReady` pena che l’ełemento el sarà inisiałixà. No vol dir che łe imagini łe sia conpletamente cariche (varda `gridzyItemLoading` ), ma l’ełemento el xe pronto pa esar vixibiłe.
`gridzyItemReady`	Sostituirà `gridzyItemInitializing` pena che l’elemento el sarà inisiałixà del tuto. No sarà mai cavà. No vol dir che łe imagini łe sia conpletamente cariche (varda `gridzyItemComplete` ), ma l’ełemento el xe pronto pa esar vixibiłe.
`gridzyItemLoading`	El sarà meso pena che l’ełemento el scominsia el proceso de inisiałixasion. Verrà sostituito da `gridzyItemComplete` appena le immagini contenute (de solito una sola) sarà completamente caricate.
`gridzyItemComplete`	Sostituirà `gridzyItemLoading` pena che łe imagini (de sołito soło una) łe sarà caricàe del tuto. No sarà mai cavà.
`gridzyItemInitialToVisible`	Verrà impostato appena la voce comincia a comparire la prima volta. Verrà rimosso appena la voce sarà completamente visibile.
`gridzyItemVisible`	Verrà impostato appena la voce sarà completamente visibile. Verrà rimosso appena la voce comincia a sparire.
`gridzyItemVisibleToHidden`	Verrà impostato appena la voce comincia a sparire. Verrà rimosso appena la voce sarà completamente nascosta.
`gridzyItemHidden`	Verrà impostato appena la voce sarà completamente nascosta. Verrà rimosso appena la voce comincia a comparire.
`gridzyItemHiddenToVisible`	El sarà meso pena che l’ełemento el scominsia a aparìr (a parte che el vegnarà fora ła prima volta – varda ła clase `gridzyItemInitialToVisible` ). Verrà rimosso appena la voce sarà completamente visibile.
`gridzyItemVisibleToVisible`	Verrà impostato appena qualcosa nella griglia cambiarà, ma la voce stessa era e restarà visibile. El sarà cavà pena che l’animasion del canbiamento ła sarà finìa.

Par indefinìa l’indicador de proceso e łe animasión pa łe imagini che łe se mostra e łe sparisse łe xe predefinie dal file CSS prinsipałe de Gridzy.

Co ste clasi CSS sora mensionàe te pol stiłixare el proprio indicador de proceso e łe animasión. Varda el file CSS prinsipałe de Gridzy, pa capìr cossa che te gavarìa da canbiar. Niente paura, tutto ben documentato lì.

Otimixar el caricamento

Se te dopara tante imagini, podarìa esar na bona idea jutar Gridzy a costruir ła griglia pì vełosemente.

No far saltar łe imagini

Gridzy el ga asołutamente bisogno del raporto de aspeto de tute łe imagini pa calcołar ła grèa. Sti fati i porta a saltar elementi se serte imàjini łe xe pronte e altre no. Pì imagini ghe xe, pì fastidioso pol esar sto efeto.

Pa evitar sto conportamento, basta métar i atributi width e height pa tuti i ełementi img . È importante impostare i valori corretti per ogni singola immagine, altrimenti le immagini sarebbero distortate. I vałori coreti i xe ła larghesa e l’altesa orixinałi deła rispetiva imàjine:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Dopo Gridzy el pol calcołar ła grìglia suito sensa aver da saver łe dimension reałi dełe imagini.

Carico pigro

Pa caricare soło łe imagini che łe xe inte ła vista vixibiłe, basta seguir sti pasi:

Inserì i atributi width e height come descrito sora (asicurateve de doparar i vałori coreti)
Sostituì tuti i atributi src co data-gridzylazysrc come mostrà soto (se te ghè anca i atributi srcset , sostituisi co data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Dopo sti pasi łe imagini łe se caricherà pena che łe sarà visin o drénto ła vista.

Indicator de proceso

L’indicador del proceso xe ła picoła icona animà che ła se mostra mentre l’imàjine ła xe drìo caricare. Se te dopara didascalie e skin , l’indicador del proceso el sarà mostrà in modo automatico. Altrimenti ti serve qualche regolazione:

Meti ogni ełemento img in un ełemento div
(o in qualsiasi altro ełemento – varda HTML semantico pa de pi)
Xonta ła clase gridzyImage a ogni ełemento img

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Dopo te gavarìa da vedar i indicatori del proceso se łe imagini łe ciapa tenpo pa caricarse.

Filtri

I filtri in Gridzy i xe bastansa senplisi ma potenti. No importa che tipo de filtro che te serve, xe molto probabiłe che el sia reałixàbiłe. Tuto quel che te serve xe un fià de CSS e un fià de ełementi HTML …

Eco un exénpio funsionałe:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Costruimolo Passo dopo Passo

1. Prima ghemo bisogno deła sołita strutura HTML de Gridzy e metare i nomi dełe clase pa tuti i elementi deła gałeria in modo da poderli filtrar dopo

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

In sto exénpio doparémo soło na clase pa ogni ełemento. Ma puoi anche impostare diverse classi per un singolo elemento, se quel elemento dovrebbe essere trovabile tramite di più filtri.

2. Po’ ghemo zontà qualche boton co cui podemo canbiar i filtri

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Invese dei botoni, te podarìa anca doparar altri ełementi del modèo come łe casełe, i botoni radio, i canpi de selesion e via cussì.

Come che te pol védare, i vałori dei botoni i xe i sołiti selesionadori CSS. Pena che gavemo finìo, un clic su un boton del xenere el mostrarà łe imagini che łe corisponde a chel sełetor CSS. Tecnicamente el mete soło che l’opsion filter a sto vałor.

Te pol anca doparar sełetori pì conplesi. Par exénpio :not(.animals) el funsionarìa anca, come anca .animals.people e .animals, .people .

3. Par finir, metemo i botoni in un container div e li ligamo ała gałeria de Gridzy, metendo l’opsion filterControls :

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Come che te pol védare, doparémo anca un sełetor CSS pa l’opsion filterControls . El container div co l’atributo id el serve soło pa rendare i botoni pì fasiłi da sełesionar co chel selesionador CSS.

Xe tuto!

Se te preferisi na sołusion JavaScript, varda l’ API .

API

Anca se Gridzy el ga ła so API, ła major parte dełe robe łe pol esar fate sensa de eła, soło manipolando el DOM. Gridzy se ne accorgerà e regolarà la griglia. Ma ghe xe anca na API potente …

Manipolasion del DOM

Pa tute łe manipolasion del Document Object Model (DOM) ghemo prima bisogno de l’ełemento container:

// get the container element
var gridzyElement = document.querySelector('.gridzy');

Xonta imagini

Xe inportante costruir e inpienìr el novo ełemento fiol prima de zontarlo al ełemento container. Altrimenti Gridzy non riesce a rilevare le dimensioni corrette.

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

Cava łe imagini

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

Canbia łe opsion

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

Pì so come manipolàr el DOM te pol catar nei documenti web MDN . Ghe xe anca na introdusion al DOM disponibiłe.

API proprietaria

Pa doparar l’API, prima ghemo bisogno de l’istansa de Gridzy, che ła xe łigà a l’ełemento del container de Gridzy:

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

Otegner l’opsion

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

Otegner tute łe opsion

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

Inposta łe opsion

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

Aplica el filtro

Aplicar un filtro vol dir soło métar el filter de opsion che pol esar un sełetor CSS valido:

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

Xonta funsion de richiamo

DEPRECATÀ dała version 2.4.0
Dopara invese i Eventi moderni e pì flesibiłi. Varda ła sesion dopo pa i detagli.

~~Gridzy.js 2 el suporta alcune opsion pa łe funsión de callback. I pol esar inpostài soło co l’API proprietaria, ma come altre opsion:~~

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	~~Descrission~~
~~`onBeforeOptionsChanged`~~	~~Funsion de richiamo che vien invocà diretamente prima de métar łe opsion.~~
~~`onOptionsChanged`~~	~~Funsion de richiamo che vien invocà diretamente dopo łe opsion de inpostasion.~~
~~`onBeforeRender`~~	~~Funsion de richiamo che vien invocà diretamente prima del rendering.~~
~~`onRender`~~	~~Funsion de richiamo che vien invocà diretamente dopo el rendering.~~

Dopara i eventi

dalla versione 2.4.0

Te pol doparar i eventi Gridzy come i sołiti eventi JavaScript:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

Serti eventi i vien fati su l’ełemento del container Gridzy e altri eventi i vien fati su i singołi ełementi de l’ełemento del container.

Eventi fati su l’ełemento del container Gridzy:

	Descrission
`gridzyBeforeInit`	Incendi prima de inisiałixasion deła gałeria.
`gridzyInit`	Incendi dopo l'iniziałixasion deła gałeria.
`gridzyBeforeOptionsChanged`	El s-ciopa prima de métar łe opsion.
`gridzyOptionsChanged`	El se inpisa dopo vér messo łe opsion.
`gridzyBeforeRender`	Incendi prima de render.
`gridzyRender`	Incendi dopo el rendering.

Se te perdi qualche evento qua, par piasér manda na domanda de suporto .

event.target el fornise l’ełemento del container Gridzy.
event.detail.instance el dà l’istansa de Gridzy.

Eventi fati su ełementi de ogeto:

	Descrission
`gridzyItemBeforeInit`	El s-ciopa prima de l’inisiałixasion de l’ołemento.
`gridzyItemInit`	Se s-ciopa dopo l’inisiałixasion de l’ołemento.
`gridzyItemLoading`	El se inpisa quando l’ełemento el scominsia a cargarse.
`gridzyItemReady`	El se inpisa co l’ełemento el xe pronto pa el calcoło deła griglia. El raporto de aspeto el xe conosùo, ma l’imagine ła pol esar oncora in carga.
`gridzyItemComplete`	El se inpisa co l’imagine de l’ogeto ła xe piena carica.

Se te perdi qualche evento qua, par piasér manda na domanda de suporto .

event.target el dà el rispetivo ełemento de l’ełemento.
event.detail.instance el dà l’istansa de Gridzy.

API – Globałe

Ghe xe alcune funsión che łe xe indipendenti dałe istanse de Gridzy. Cussì no ghemo da ciapàr un exénpio prima.

Otegner l’opsion predefinìa

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

Otegner tute łe opsion predefinìe

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

Impostare łe opsion predefinìe

Questo no el mete łe opsion de tute łe istanse de Gridzy xà inisiałixàe, ma el definìse ła base pa łe nove istanse. Tutavia, se na opsion de na istansa esistente ła vegnéa resetà co el vałor null , ła dopararìa el novo vałor predefinìo.

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

Te pol dopararlo pa métar łe opsion a liveło globałe, se te ło ciami prima che el DOM el sie pronto. Cussì no te gavarìa pì da métar łe opsion come atributi.

Automatismi

Fin che tuti i automatismi de Gridzy.js 2 i xe ativi, no ghe xe bisogno dei metodi soto. Ma i automatismi i pol esar spenti pa doparar Gridzy in modo pì tradisionałe:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

Alcune de ste opsion no łe pol esar inpostàe co i atributi data-gridzy- o co setOptions() , par motivi łogici:

	Vałor predefinìo	Descrission
`autoInitOnDomReady`	`true`	Rileva i elementi con classe `gridzy` al caricamento de la pagina e li inizializa. Setabiłe co `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	El cata i novi ełementi co ła clase `gridzy` pena che i vien fora nel DOM e i li inisiałixa. (par exénpio su l’uxo dełe transision de pàjine) Setabiłe co `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Rileva se i elementi fioli (immagini) sono aggiunti o rimossi, e aggiorna automaticamente la griglia. Setabiłe co `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definisse se i atributi `data-gridzy-` vengono generalmente usati o no. Se questo xe `false` łe opsion łe pol esar impostae soło co l’API proprietaria. Setabiłe co `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	El rileva i canbiamenti dei atributi `data-gridzy-` e el agiorna ła grìglia in modo automatico. El cata anca se ła clase `gridzyAnimated` ła vien zontà o cavà e se ghe xe canbiamenti de atributo `style` . Se `useOptionAttributes` l’è `false` , el cata soło canbiamenti de atributi `style` . Setabiłe co `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	El cata i canbiamenti dei atributi `class` de tuti i ełementi bocia (imagini). Rilevante riguardo i filtri. Setabiłe co `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver dalla versione 2.5.0	`true`	El cata i canbiamenti dei atributi `src` de tute łe imagini. Rilevante quando usato con React o biblioteche simili. Setabiłe co `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Ridimensionare l’Oservatore dalla versione 2.6.0	`true`	El cata i canbiamenti de ła larghezza de l’ełemento. Rilevante pa ła progetasion responsiva. (Prima deła version 2.6.0 vegnéa doparà un ascoltore de eventi de ridimensionamento de finestra) Setabiłe co `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inisiałixa manualmente

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

Desfar l’istansa

Detto groso modo, el contrario de inisiałixare Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sincronixa ła lista dei bocia manualmente

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

Sincronixa un singoło ełemento fioło manualmente

De solito non serve, salvo in casi rarissimi.

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

Sincronixa i atributi manualmente

Nota che l’opsion useOptionAttributes ła ga da esar true pa questo.

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

Forsa el rendemento

De solito non serve, anche se tutti i automatismi sono spenti

gridzyInstance.render();

Plugin de WordPress

Biblioteca JavaScript

Servissio

Versione 2.x