Verzija 2.x – Gridzy.Gallery

Web stranica je automatski prevedena. Ako nešto nije jasno, pogledajte englesku dokumentaciju.

Osnovna upotreba

Prenesite Gridzy datoteke na svoj poslužitelj i dodajte ih na svoju web stranicu (obično u odjeljak head):

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

Dodajte HTML kôd (bilo gdje u odjeljku tijela):

<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>

To je to! To je potpuno funkcionalan primjer. Nije potrebna dodatna inicijalizacija.

Konfiguracija

Najlakši način za konfiguriranje Gridzyja je korištenje HTML atributa. Samo prije naziva opcija trebate staviti data-gridzy- . Dakle, da postavite opciju spaceBetween , samo dodajte atribut 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>

Glavne opcije

	Zadana vrijednost	Opis
`animate`	`true`	Određuje hoće li se animacije koristiti kada se rešetka mijenja (na primjer, kada mijenjate veličinu prozora preglednika ili kada postavljate filtar).
`layout`	`justified`	Definira korišteni izgled. Gridzy.js 2 podržava dva različita izgleda `justified` i `waterfall` . Svaki od njih ima svoje dodatne parametre opcija koje možete pronaći ispod ove tablice.
`filter`	`*`	Određuje koje slike treba prikazati. Ovdje se kao vrijednost može koristiti bilo koji CSS selektor. Obično se postavlja automatski putem `filterControls` (pogledajte sljedeću opciju). Provjerite Filtre
`filterControls`		Određuje koji se elementi obrasca mogu koristiti za filtriranje slika. Ovdje se kao vrijednost može koristiti bilo koji CSS selektor koji odabire elemente HTML obrasca. Provjerite Filtre
`autoConsiderScrollBars`	`true`	Za predviđanje dostupne širine ako se trake za pomicanje pojave ili nestanu. Uvijek se preporučuje da ga ostavite na `true` osim ako ovaj automatizam ne uzrokuje probleme.

Justified Mogućnosti izgleda

	Zadana vrijednost	Opis
`autoFontSize`	`false`	Automatski ažurira svojstvo veličine fonta svakog okvira na temelju izvorne veličine okvira. Svojstvo veličine fonta prema zadanim postavkama nije eksplicitno postavljeno.
`desiredHeight`	`190`	Definira željenu visinu redova elemenata. Stvarna visina će se izračunati ovisno o dostupnoj širini i elementima u redu.
`hideOnMissingImage`	`true`	Skriva okvire koji sadrže slike koje se ne mogu učitati.
`spaceBetween`	`4`	Definira udaljenost između elemenata u pikselima.
`lastRowAlign` od verzije 2.3.0	`justified`	Definira ponašanje zadnjeg reda. Dopuštene vrijednosti su `left` , `center` , `right` i `justified` .
`singleRowAlign` od verzije 2.3.0	`justified`	Definira ponašanje ako postoji samo jedan jedini red. Dopuštene vrijednosti su `left` , `center` , `right` i `justified` .
~~`fillLastRow`~~ ~~od verzije 2.1.0~~	~~`true`~~	UKLONJENO od verzije 2.4.0 (ZASTARJELO od verzije 2.3.0 ) Raspoređuje slike tako da je zadnji red uvijek potpuno ispunjen. Ako planirate dinamički dodavati slike, bilo bi dobro deaktivirati ovo. Nema učinka na pojedinačne retke (pogledajte `fillSingleRow` ).
`fillSingleRow` od verzije 2.1.0	~~`true`~~	UKLONJENO od verzije 2.4.0 (ZASTARJELO od verzije 2.3.0 ) ~~Ako postoji samo jedan red, raspoređuje slike tako da je red uvijek potpuno ispunjen. Ako se može dogoditi da imate samo jednu ili dvije slike u galeriji, bilo bi dobro deaktivirati ovu opciju.~~

Waterfall Opcije izgleda

	Zadana vrijednost	Opis
`autoFontSize`	`false`	Automatski ažurira svojstvo veličine fonta svakog okvira na temelju izvorne veličine okvira. Svojstvo veličine fonta prema zadanim postavkama nije eksplicitno postavljeno.
`desiredWidth`	`250`	Definira željenu širinu stupaca. Stvarna širina će se izračunati ovisno o dostupnoj širini i broju stupaca.
`hideOnMissingImage`	`true`	Skriva okvire koji sadrže slike koje se ne mogu učitati.
`horizontalOrder`	`false`	Definira da se elementi postavljaju striktno po jedan element u svakom stupcu s lijeva na desno, zatim ponovno počinje u krajnjem lijevom stupcu neovisno u kojem stupcu ima više mjesta. Prema zadanim postavkama elementi će uvijek biti postavljeni u stupac s najmanjom visinom.
`spaceBetween`	`4`	Definira udaljenost između elemenata u pikselima.
`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`.

Više naprednih opcija

Za naprednije opcije pogledajte API .

Semantički HTML

Najjednostavnija HTML struktura Gridzyja je ova:

<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>

Međutim, Gridzy je vrlo fleksibilan i možete koristiti gotovo bilo koju drugu HTML strukturu. Treba uzeti u obzir samo nekoliko točaka:

Svako dijete elementa spremnika predstavlja jednu stavku u mreži.
I element spremnika i njegova djeca mogu biti bilo koje vrste oznake, kao što su ul i li (samo razmislite o ponovnom postavljanju zadanih postavki preglednika).
Ako element img nije sam izravni dijete, potrebna mu je klasa gridzyImage .

Dakle, ovo je također radna HTML struktura:

<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>

Posebno ako želite dodati opise, potrebna vam je napredna HTML struktura. Kako biste saznali više o tome, pogledajte Captions & Skins .

Opisi i maske

Ako želite dodati naslove svojoj galeriji, morate definirati izgled. Stoga su dostupne neke unaprijed definirane maske. Svaka maska se sastoji od CSS datoteke. Morate dodati ovu datoteku uz glavne Gridzy datoteke (obično u odjeljak head):

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

Nadalje, potrebna vam je napredna HTML struktura:

<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>

Ako se pitate o strukturi HTML-a, pogledajte Semantički HTML .

Za naslov možete koristiti bilo koju vrstu oznake, samo provjerite ima li klasu gridzyCaption . Element img treba klasu gridzyImage .

Gornji primjer prikazuje kožu gridzySkinClassic . Da biste upotrijebili neki drugi, samo zamijenite naziv kože jednim od ovih:

Uključene maske

	Dostupni tečajevi
gridzySkinBlank dobra polazna točka za stvaranje vlastite kože pregled uživo	`gridzySkinBlank`
gridzySkinClassic pregled uživo	`gridzySkinClassic` `gridzySkinClassicLight`(ZASTARJELO od verzije 2.6.0)
gridzySkinFullOverlay pregled uživo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(ZASTARJELO od verzije 2.6.0)
gridzySkinLift pregled uživo	`gridzySkinLift` `gridzySkinLiftLight`(ZASTARJELO od verzije 2.6.0)
gridzySkinMagnifier funkcija zumiranja nije uključena pregled uživo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(ZASTARJELO od verzije 2.6.0)

Sve gore navedene maske trebaju samo CSS datoteku, ali postoje dodatne maske koje također zahtijevaju JavaScript datoteku:

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

	Dostupni tečajevi
gridzySkinBlur ne radi u IE pregled uživo	`gridzySkinBlur` `gridzySkinBlurLight`(ZASTARJELO od verzije 2.6.0)
gridzySkinCard pregled uživo	`gridzySkinCard` `gridzySkinCardLight`(ZASTARJELO od verzije 2.6.0)

Mogućnosti kože

Od verzije 2.6.0 postoje opcije za konfiguriranje ugrađenih maski. Ovisno o specifičnoj koži, možete postaviti boju pozadine, boju teksta i sjenu teksta. Samo trebate koristiti CSS prilagođena svojstva kao što možete vidjeti ovdje:

<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>

Ovdje provjerite podržane varijable i zadane vrijednosti za svaku masku:

gridzySkinClassic

Varijabilna	Zadana vrijednost	Informacija
`--background`	`rgba(0, 0, 0, .7)`	dopušta bilo koju vrijednost CSS pozadine
`--color`	`rgb(255, 255, 255)`	dopušta bilo koju vrijednost CSS boje
`--text-shadow`	`none`	dopušta bilo koju CSS vrijednost sjene teksta

gridzySkinFullOverlay

Varijabilna	Zadana vrijednost	Informacija
`--background`	`rgba(0, 0, 0, .7)`	dopušta bilo koju vrijednost CSS pozadine
`--color`	`rgb(255, 255, 255)`	dopušta bilo koju vrijednost CSS boje
`--text-shadow`	`none`	dopušta bilo koju CSS vrijednost sjene teksta

gridzySkinLift

Varijabilna	Zadana vrijednost	Informacija
`--background`	`rgba(0, 0, 0, .7)`	dopušta bilo koju vrijednost CSS pozadine
`--color`	`rgb(255, 255, 255)`	dopušta bilo koju vrijednost CSS boje
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	dopušta bilo koju CSS vrijednost sjene teksta

gridzySkinMagnifier

Varijabilna	Zadana vrijednost	Informacija
`--background`	`rgba(0, 0, 0, .7)`	dopušta bilo koju vrijednost CSS pozadine
`--color`	`rgb(255, 255, 255)`	dopušta bilo koju vrijednost CSS boje

Ova maska ne podržava --text-shadow

gridzySkinBlur

Varijabilna	Zadana vrijednost	Informacija
`--background`	`rgba(0, 0, 0, .7)`	dopušta bilo koju vrijednost CSS pozadine
`--color`	`rgb(255, 255, 255)`	dopušta bilo koju vrijednost CSS boje
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	dopušta bilo koju CSS vrijednost sjene teksta

gridzySkinCard

Varijabilna	Zadana vrijednost	Informacija
`--background`	`rgba(0, 0, 0, 1)`	dopušta bilo koju vrijednost CSS pozadine
`--color`	`rgb(255, 255, 255)`	dopušta bilo koju vrijednost CSS boje
`--text-shadow`	`none`	dopušta bilo koju CSS vrijednost sjene teksta

Sve unaprijed definirane maske podržavaju samo jednostavne tekstualne naslove. Možete kreirati vlastite i složenije maske. Molimo pogledajte Style Gridzy .

Stil Gridzy

Ako nijedna unaprijed definirana koža ne odgovara vašim potrebama, možete oblikovati vlastitu.

Najlakši način je prvo kopirati postojeći skin i prilagoditi ga vlastitim potrebama. Unaprijed definirana maska gridzySkinBlank obično bi bila dobra osnova kao i dobra dokumentacija u CSS datoteci:

/** 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;
}

U CSS datoteci pronaći ćete klase gridzySkinBlank , gridzyImage i gridzyCaption . Sam Gridzy ne treba ove tečajeve. Koriste se samo za oblikovanje i stoga ih možete ukloniti ili preimenovati ako želite.

Dodatno ćete pronaći CSS klasu gridzyItem . Gridzy automatski postavlja ovu klasu na sve izravne potomke glavnog elementa spremnika. Dakle, ovu klasu možete koristiti za stiliziranje stavki svoje galerije.

Pazite na važne stvari

Sadržaj stavke trebao bi biti u potpunosti odgovarajući. Uzmite u obzir da će se veličina elementa sigurno promijeniti. Koristite postotke umjesto vrijednosti piksela. I pogledajte opciju Gridzy rasporeda autoFontSize , koja vezuje veličinu fonta na veličinu okvira stavke.
Svaka stavka treba imati dobro definiran omjer širine i visine. Omjer slike stavke nikada se neće promijeniti i potreban je za izračun mreže. Dakle, ako stavka nema automatski dobro definiran omjer širine i visine, predefinirajte je ručno (npr. putem css-a).

U nekim slučajevima može biti lakše stilizirati sadržaj stavki prije nego što se Gridzy inicijalizira. Za ovo jednostavno privremeno uklonite klasu gridzy ili Gridzy javascript datoteku.

To je to! To je sve što trebate da izgradite svoju vlastitu kožu. Većina unaprijed definiranih skinova ne koristi više od ovoga.

Ali moglo bi ih biti više ako želite…

Napredne maske

Gridzy koristi više CSS klasa nego samo gridzyItem . Većina će se postaviti automatski i možete ih koristiti i za oblikovanje.

Glavne klase spremnika

Naziv klase	Opis
`gridzy` postaviti ručno	Gridzy automatski pronalazi elemente s ovom klasom i inicijalizira ih.
`gridzyAnimated`	Automatski će se postaviti ako je opcija `animate` `true` . Ako je ova klasa postavljena ručno, opcija `animate` također će automatski dobiti `true` (osim ako je izričito postavljena na `false` ).

Klase stavki

Naziv klase	Opis
`gridzyItem`	Bit će postavljeno čim stavka započne proces inicijalizacije. Nikada se neće ukloniti.
`gridzyItemInitializing`	Bit će postavljeno čim stavka započne proces inicijalizacije. Bit će zamijenjen `gridzyItemReady` čim se stavka u potpunosti inicijalizira. Ne znači da su slike potpuno učitane (pogledajte `gridzyItemLoading` ), ali je stavka spremna da postane vidljiva.
`gridzyItemReady`	Zamijenit će `gridzyItemInitializing` čim se stavka u potpunosti inicijalizira. Nikada se neće ukloniti. Ne znači da su slike u potpunosti učitane (pogledajte `gridzyItemComplete` ), ali je stavka spremna da postane vidljiva.
`gridzyItemLoading`	Bit će postavljeno čim stavka započne proces inicijalizacije. Bit će zamijenjen `gridzyItemComplete` čim se sadržane slike (obično samo jedna) potpuno učitaju.
`gridzyItemComplete`	Zamijenit će `gridzyItemLoading` čim se sadržane slike (obično samo jedna) potpuno učitaju. Nikada se neće ukloniti.
`gridzyItemInitialToVisible`	Bit će postavljeno čim se stavka počne pojavljivati prvi put. Uklonit će se čim predmet postane potpuno vidljiv.
`gridzyItemVisible`	Bit će postavljeno čim stavka bude u potpunosti vidljiva. Bit će uklonjeno čim stavka počne nestajati.
`gridzyItemVisibleToHidden`	Bit će postavljeno čim stavka počne nestajati. Bit će uklonjeno čim se stavka potpuno sakrije.
`gridzyItemHidden`	Bit će postavljeno čim se stavka potpuno sakrije. Bit će uklonjeno čim se stavka počne pojavljivati.
`gridzyItemHiddenToVisible`	Bit će postavljeno čim se stavka počne pojavljivati (osim kada se pojavljuje prvi put – pogledajte klasu `gridzyItemInitialToVisible` ). Uklonit će se čim predmet postane potpuno vidljiv.
`gridzyItemVisibleToVisible`	Bit će postavljeno čim se nešto u mreži promijeni, ali sama stavka je bila i ostala vidljiva. Bit će uklonjeno čim se animacija promjene završi.

Prema zadanim postavkama indikator procesa i animacije za slike koje se pojavljuju i nestaju unaprijed su definirane glavnom CSS datotekom Gridzy.

S ovim gore navedenim CSS klasama možete oblikovati svoj vlastiti indikator procesa i animacije. Usudite se pogledati u Gridzy glavnu CSS datoteku kako biste shvatili što biste morali nadjačati. Nema straha, tamo je sve dobro dokumentirano.

Optimiziraj učitavanje

Ako koristite mnogo slika, to bi mogla biti dobra ideja da pomognete Gridzyju da brže izgradi mrežu.

Spriječite skakanje slika

Gridzy apsolutno treba omjer širine i visine slike za izračunavanje mreže. Ova činjenica rezultira skakanjem elemenata ako su neke slike spremne, a druge nisu. Što je više slika, to ovaj efekt može biti dosadniji.

Kako biste spriječili ovo ponašanje, samo postavite atribute width i height za sve img elemente. Važno je postaviti ispravne vrijednosti za svaku pojedinačnu sliku, inače bi slike bile iskrivljene. Ispravne vrijednosti su izvorna širina i visina odgovarajuće slike:

<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>

Nakon toga Gridzy može odmah izračunati mrežu bez potrebe da zna stvarne veličine slika.

Lijeno učitavanje

Za učitavanje samo slika koje su u vidljivom prozoru, slijedite ove korake:

Umetnite atribute width i height kao što je gore opisano (uvjerite se da koristite točne vrijednosti)
Zamijenite sve src atribute s data-gridzylazysrc kao što je prikazano u nastavku (ako imate i srcset atribute, zamijenite ih s 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>

Nakon ovih koraka slike će se učitati čim se nađu blizu ili unutar okvira za prikaz.

Indikator procesa

Indikator procesa je mala animirana ikona koja se pojavljuje dok se slika učitava. Ako koristite opise i maske , indikator procesa prikazat će se automatski. Inače su vam potrebne neke prilagodbe:

Stavite svaki element img u element div
(ili u bilo koji drugi element – pogledajte semantički HTML za više)
Dodajte klasu gridzyImage svakom img elementu

<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>

Nakon toga trebali biste vidjeti indikatore procesa ako slikama treba vremena za učitavanje.

Filteri

Filtri u Gridzyju prilično su jednostavni, ali moćni. Bez obzira kakav filtar trebate, vrlo je vjerojatno da je izvediv. Sve što trebate je malo CSS-a i nekoliko HTML elemenata forme...

Evo funkcionalnog primjera:

<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>

Gradimo ga korak po korak

1. Prvo nam treba uobičajena HTML struktura Gridzyja i postavljanje naziva klasa za sve stavke galerije kako bismo ih kasnije mogli filtrirati

<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>

U ovom primjeru koristimo samo jednu klasu za svaki element. Ali također možete postaviti više klasa za jedan element, ako bi se taj element trebao pronaći putem više filtara.

2. Zatim dodamo neke gumbe preko kojih možemo promijeniti filtere

<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>

Umjesto gumba, također možete koristiti druge elemente obrasca kao što su potvrdni okviri, radio gumbi, polja za odabir i tako dalje.

Kao što vidite, vrijednosti gumba su uobičajeni CSS selektori. Čim završimo, klikom na takav gumb prikazat će se slike koje odgovaraju tom CSS selektoru. Tehnički jednostavno postavlja opciju filter na ovu vrijednost.

Također možete koristiti mnogo složenije selektore. Na primjer :not(.animals) također bi funkcioniralo, kao i .animals.people i .animals, .people .

3. Na kraju, kapsuliramo gumbe u div spremnik i povezujemo ih s Gridzy galerijom, postavljanjem opcije 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>

Kao što vidite, također koristimo CSS selektor za filterControls opciju. div spremnik s id atributom služi samo za lakše odabiranje gumba putem tog CSS selektora.

To je to!

Ako više volite JavaScript rješenje, pogledajte API .

API

Iako Gridzy ima vlastiti API, većina stvari se može učiniti bez njega, jednostavnim manipuliranjem DOM-a. Gridzy će to primijetiti i prilagoditi rešetku. Ali postoji i vrlo moćan API...

Manipuliranje DOM-om

Za sve manipulacije Document Object Modelom (DOM) prvo trebamo element spremnika:

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

Dodajte slike

Važno je u potpunosti izgraditi i ispuniti novi podređeni element prije nego što ga dodate elementu spremnika. Inače Gridzy ne može otkriti točne dimenzije.

// 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);

Ukloni slike

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

Promjena opcija

// 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');

Više o manipuliranju DOM-om možete pronaći u MDN web dokumentima . Dostupan je i Uvod u DOM .

Vlasnički API

Da bismo koristili API, prvo nam je potrebna Gridzy instanca, koja je vezana na Gridzy kontejnerski element:

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

Nabavite opciju

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

Dobijte sve opcije

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

Postavite opcije

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

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

Primijeni filtar

Primjena filtra samo je postavljanje filter opcije koji može biti bilo koji valjani CSS selektor:

// 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'
});

Dodajte funkcije povratnog poziva

ZASTARJELO od verzije 2.4.0
Umjesto toga koristite moderne i fleksibilnije događaje . Pogledajte sljedeći odjeljak za detalje.

~~Gridzy.js 2 podržava neke opcije za funkcije povratnog poziva. Mogu se postaviti samo putem vlasničkog API-ja, ali kao i druge opcije:~~

// 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.
  }
});

	~~Opis~~
~~`onBeforeOptionsChanged`~~	~~Funkcija povratnog poziva koja se poziva izravno prije postavljanja opcija.~~
~~`onOptionsChanged`~~	~~Funkcija povratnog poziva koja se poziva izravno nakon postavljanja opcija.~~
~~`onBeforeRender`~~	~~Funkcija povratnog poziva koja se poziva izravno prije iscrtavanja.~~
~~`onRender`~~	~~Funkcija povratnog poziva koja se poziva izravno nakon iscrtavanja.~~

Koristite događaje

od verzije 2.4.0

Gridzy događaje možete koristiti točno kao i uobičajene JavaScript događaje:

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.
});

Neki se događaji pokreću na elementu spremnika Gridzy, a drugi se događaji pokreću na pojedinačnim elementima stavke unutar elementa spremnika.

Događaji pokrenuti na elementu spremnika Gridzy:

	Opis
`gridzyBeforeInit`	Pali se prije pokretanja galerije.
`gridzyInit`	Pali se nakon pokretanja galerije.
`gridzyBeforeOptionsChanged`	Pali se prije postavljanja opcija.
`gridzyOptionsChanged`	Pali se nakon postavljanja opcija.
`gridzyBeforeRender`	Pali prije renderiranja.
`gridzyRender`	Pali se nakon renderiranja.

Ako propustite bilo koji događaj ovdje, pošaljite zahtjev za podršku .

event.target pruža element kontejnera Gridzy.
event.detail.instance pruža Gridzy instancu.

Događaji pokrenuti na elementima stavke:

	Opis
`gridzyItemBeforeInit`	Pali se prije inicijalizacije stavke.
`gridzyItemInit`	Pali se nakon inicijalizacije stavke.
`gridzyItemLoading`	Aktivira se kada se stavka počne učitavati.
`gridzyItemReady`	Aktivira se kada je stavka spremna za izračun mreže. Dakle, omjer je poznat, ali slika se možda još učitava.
`gridzyItemComplete`	Aktivira se kada se slika artikla potpuno učita.

Ako propustite bilo koji događaj ovdje, pošaljite zahtjev za podršku .

event.target pruža odgovarajući element stavke.
event.detail.instance pruža Gridzy instancu.

API – Globalno

Postoje neke funkcije koje su neovisne o Gridzy instancama. Dakle, ne trebamo dobiti instancu prije.

Preuzmi zadanu opciju

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

Preuzmite sve zadane opcije

// 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');

Postavite zadane opcije

Ovo ne postavlja opcije svih već inicijaliziranih Gridzy instanci, ali definira osnovu za nove instance. Međutim, ako bi se opcija postojeće instance resetirala putem vrijednosti null , koristila bi se nova zadana vrijednost.

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

Ovo možete koristiti za postavljanje opcija globalno, ako ga pozovete prije nego što DOM bude spreman. Dakle, više ne biste morali postavljati opcije kao atribute.

Automatizmi

Sve dok su svi automatizmi Gridzy.js 2 aktivni, nema potrebe za dolje navedenim metodama. Ali automatizmi se mogu isključiti kako bi se Gridzy koristio na tradicionalniji način:

// 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
});

Neke od ovih opcija ne mogu se postaviti putem data-gridzy- atributa ili putem setOptions() zbog logičnih razloga:

	Zadana vrijednost	Opis
`autoInitOnDomReady`	`true`	Otkriva elemente s klasom `gridzy` pri učitavanju stranice i inicijalizira ih. Može se postaviti putem `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Otkriva nove elemente s klasom `gridzy` čim se pojave u DOM-u i inicijalizira ih. (npr. o korištenju prijelaza stranica) Može se postaviti putem `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Otkriva jesu li podređeni elementi (slike) dodani ili uklonjeni i automatski ažurira rešetku. Može se postaviti putem `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definira koriste li se `data-gridzy-` atributi općenito ili ne. Ako je ovo `false` opcije se mogu postaviti samo putem vlasničkog API-ja. Može se postaviti putem `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Otkriva promjene `data-gridzy-` atributa i automatski ažurira rešetku. Također otkriva je li klasa `gridzyAnimated` dodana ili uklonjena te je li došlo do promjena atributa `style` . Ako je `useOptionAttributes` `false` , otkriva samo promjene atributa `style` . Može se postaviti putem `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Otkriva promjene atributa `class` svih podređenih elemenata (slika). Relevantno za filtere. Može se postaviti putem `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver od verzije 2.5.0	`true`	Otkriva promjene `src` atributa svih slika. Relevantno kada se koristi s Reactom ili sličnim bibliotekama. Može se postaviti putem `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver od verzije 2.6.0	`true`	Otkriva promjene širine elementa. Relevantno za responzivni dizajn. (Prije verzije 2.6.0 korišten je slušatelj događaja promjene veličine prozora) Može se postaviti putem `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inicijaliziraj ručno

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

Uništite instancu

Grubo rečeno, suprotno od inicijaliziranja Gridzyja.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkronizirajte popis djece ručno

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

Ručno sinkronizirajte jedan podređeni element

Obično nije potrebno, osim u vrlo rijetkim slučajevima.

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

Sinkroniziraj atribute ručno

Imajte na umu da opcija useOptionAttributes mora biti true za ovo.

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

Prisilno iscrtavanje

Obično nije potrebno, čak i ako su svi automatizmi isključeni

gridzyInstance.render();

WordPress dodatak

JavaScript knjižnica

Servis