Version 2.x – Gridzy.Gallery

Ua otometi lava ona faaliliuina le upegatafa'ilagi. Afai e iai se mea e le o manino, fa'amolemole va'ai ile fa'amatalaga fa'aPeretania.

Fa'aoga Fa'avae

Faʻapipiʻi faila Gridzy i lau 'auʻaunaga ma faʻaopopo i lau 'upega tafaʻilagi (e masani lava ile vaega ulu):

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

Faʻaopoopo le code HTML (soʻo se mea i le vaega o le tino):

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

O lena lava! O se fa'ata'ita'iga atoatoa lea. E le mana'omia se fa'ailoga fa'aopoopo.

Fa'atonuga

O le auala pito sili ona faigofie e faʻapipiʻi ai Gridzy o le, naʻo le faʻaaogaina o uiga HTML. E na'o oe e mana'omia le fa'ailoga igoa o le filifiliga ma data-gridzy- . O lea la, ina ia seti le spaceBetween le filifiliga, naʻo le faʻaopoopoina o le uiga 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>

Filifiliga Autu

	Tau Fa'atonu	Fa'amatalaga
`animate`	`true`	Fuafua pe tatau ona fa'aoga fa'afiafiaga pe a suia le fa'asologa (mo se fa'ata'ita'iga, pe a sui le fa'amalama o le su'esu'ega po'o le setiina o se faamama).
`layout`	`justified`	Fa'amatala le fa'aoga fa'aoga. Gridzy.js 2 e lagolagoina le fa'atulagaina eseese e lua `justified` ma `waterfall` . E tofu i latou ma a latou lava filifiliga fa'aopoopo, lea e mafai ona e mauaina i lalo o lenei laulau.
`filter`	`*`	Fuafua po'o fea ata e tatau ona fa'aalia. So'o se CSS-filifilia e mafai ona fa'aoga e fai ma taua iinei. E masani ona seti otometi e ala ile `filterControls` (silasila i le isi filifiliga). Siaki le filiga
`filterControls`		Fuafua po'o fea elemene e mafai ona fa'aoga e fa'amama ai ata. So'o se CSS filifilia, e filifilia elemene fomu HTML, e mafai ona fa'aoga e fai ma tau i'inei. Siaki le filiga
`autoConsiderScrollBars`	`true`	E va'ai le lautele o lo'o avanoa pe a aliali mai pe mou atu fo'i ta'ai. E fautuaina i taimi uma e tu'u i luga o `true` se'i vagana o lenei masini e mafua ai faafitauli.

Justified Filifiliga Fa'atulagaina

	Tau Fa'atonu	Fa'amatalaga
`autoFontSize`	`false`	Fa'afou fa'afou otometi le fa'afuainumera-tele o atigipusa ta'itasi e fa'atatau i le lapo'a muamua o le pusa. Ona o le faaletonu, e le o seti manino le meafaitino tetele.
`desiredHeight`	`190`	Fa'amatala le maualuga mana'omia o laina elemene. Ole maualuga moni ole a fa'atatau ile lautele ole avanoa ma elemene ile laina.
`hideOnMissingImage`	`true`	Natia pusa o lo'o i ai ata e le mafai ona utaina.
`spaceBetween`	`4`	Fa'amatala le mamao i le va o elemene i pika.
`lastRowAlign` talu mai le version 2.3.0	`justified`	Fa'amatala le amio a le laina mulimuli. O tau fa'ataga e `left` , `center` , `right` ma `justified` .
`singleRowAlign` talu mai le version 2.3.0	`justified`	Fa'amatala le amio pe a na'o le tasi le laina. O tau fa'ataga e `left` , `center` , `right` ma `justified` .
~~`fillLastRow`~~ ~~talu mai le version 2.1.0~~	~~`true`~~	AVEIA talu mai le version 2.4.0 (FA'ATAU talu mai le version 2.3.0 ) Fa'atulaga ata ina ia fa'atumu uma le laina mulimuli. Afai e te fuafua e faʻaopoopo ata faʻamalosi, atonu o se manatu lelei le faʻagata o lenei mea. E leai se aoga i laina tasi (silasila `fillSingleRow` ).
`fillSingleRow` talu mai le lomiga 2.1.0	~~`true`~~	AVEIA talu mai le version 2.4.0 (FA'ATAU talu mai le version 2.3.0 ) Afai e na'o le tasi le laina, na te fa'atulaga ata ina ia fa'atumu atoa le laina i taimi uma. Afai e mafai ona tupu e na o le tasi pe lua au ata i totonu o le faletusi, atonu o se manatu lelei le faʻagataina o lenei mea.

Waterfall Filifiliga Fa'atulagaina

	Tau Fa'atonu	Fa'amatalaga
`autoFontSize`	`false`	Fa'afou fa'afou otometi le fa'afuainumera-tele o atigipusa ta'itasi e fa'atatau i le lapo'a muamua o le pusa. Ona o le faaletonu, e le o seti manino le meafaitino tetele.
`desiredWidth`	`250`	Fa'amatala le lautele mana'omia o koluma. Ole lautele moni ole a fa'atatau ile lautele ole avanoa ma le numera o koluma.
`hideOnMissingImage`	`true`	Natia pusa o lo'o i ai ata e le mafai ona utaina.
`horizontalOrder`	`false`	Fa'amatala o elemene e tu'u sa'o le tasi elemene i koluma ta'itasi mai le agavale i le taumatau, ona toe amata lea i le pito i luga agavale koluma tuto'atasi lea e sili atu le nofoaga. E le mafai ona tuʻuina elemene i taimi uma i le koluma ma le maualuga aupito itiiti.
`spaceBetween`	`4`	Fa'amatala le mamao i le va o elemene i pika.
`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`.

Sili Atu Filifiliga

Mo nisi filifiliga sili atu, siaki le API .

HTML Semantic

Ole fausaga HTML faigofie ole Gridzy ole:

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

Ae ui i lea, Gridzy e matua fetuutuunai ma e mafai ona e faʻaogaina toetoe lava o isi fausaga HTML. E na'o ni nai vaega e mafaufau iai:

O tamaiti ta'ito'atasi o le koneteina e fa'atusalia ai se mea se tasi i le fa'asologa.
O le atigipusa elemene ma ana fanau e mafai ona avea ma soʻo se ituaiga faʻailoga, e pei o ul ma li (naʻo le mafaufau e toe setiina le faaletonu o le browser).
Afai o se elemene img e le o se tamaititi tuusao lava ia, e manaʻomia le vasega gridzyImage .

O lea foi o se fausaga HTML galue:

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

Ae maise pe afai e te manaʻo e faʻaopoopo faʻamatalaga, e te manaʻomia se fausaga HTML maualuga. Mo nisi fa'amatalaga e uiga i ai, va'ai i Fa'amatalaga & Pa'u .

Fa'amatalaga & Pa'u

Afai e te manaʻo e faʻaopoopo faʻamatalaga i lau faʻailoga, e tatau ona e faʻamalamalamaina foliga vaaia. O le mea lea, o lo'o maua ai nisi pa'u ua uma ona fa'avasegaina. Pa'u ta'itasi e iai se faila CSS. E manaʻomia lou faʻaopoopoina o lenei faila i le faʻaopoopoga i faila autu Gridzy (e masani lava ile vaega ulu):

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

E le gata i lea, e te manaʻomia se fausaga HTML maualuga:

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

Afai o loʻo e mafaufau e uiga i le fausaga HTML, vaʻai ile Semantic HTML .

Mo le faʻamatalaga e mafai ona e faʻaogaina soʻo se ituaiga o pine, ia mautinoa o loʻo i ai le vasega gridzyCaption . O le elemene img e manaʻomia le vasega gridzyImage .

O le faʻataʻitaʻiga o loʻo i luga o loʻo faʻaalia ai oe le paʻu gridzySkinClassic . Mo le fa'aogaina o se isi, na'o le suia o le igoa o le pa'u i se tasi o mea nei:

Fa'aaofia Pa'u

	Vasega Avanoa
gridzySkinBlank se amataga lelei mo le fatuina o se lava paʻu mua'i ola	`gridzySkinBlank`
gridzySkinClassic mua'i ola	`gridzySkinClassic` `gridzySkinClassicLight`(FA'ATAU talu mai le version 2.6.0)
gridzySkinFullOverlay mua'i ola	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(FA'ATAU talu mai le version 2.6.0)
gridzySkinLift mua'i ola	`gridzySkinLift` `gridzySkinLiftLight`(FA'ATAU talu mai le version 2.6.0)
gridzySkinMagnifier e le o aofia ai le fa'aogaina o le zoom mua'i ola	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(FA'ATAU talu mai le version 2.6.0)

O pa'u uma o lo'o i luga e mana'omia na'o se faila CSS, ae o lo'o iai pa'u fa'aopoopo e mana'omia ai fo'i se faila JavaScript:

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

	Vasega Avanoa
gridzySkinBlur e le galue i IE mua'i ola	`gridzySkinBlur` `gridzySkinBlurLight`(FA'ATAU talu mai le version 2.6.0)
gridzySkinCard mua'i ola	`gridzySkinCard` `gridzySkinCardLight`(FA'ATAU talu mai le version 2.6.0)

Filifiliga Pa'u

Talu mai le version 2.6.0 o loʻo i ai Filifiliga e faʻapipiʻi ai paʻu ua fausia. Fa'alagolago i le pa'u fa'apitoa e mafai ona e setiina le lanu o tua, lanu tusitusiga ma le ata lafoia. E na'o lou fa'aogaina o meatotino aganu'u CSS e pei ona e va'aia iinei:

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

Siaki le lagolago lagolago ma tau fa'aletonu mo pa'u ta'itasi iinei:

gridzySkinClassic

Fesuia'i	Tau Fa'atonu	Fa'amatalaga
`--background`	`rgba(0, 0, 0, .7)`	fa'ataga so'o se fa'asologa o le CSS
`--color`	`rgb(255, 255, 255)`	fa'atagaina so'o se tau lanu CSS
`--text-shadow`	`none`	fa'atagaina so'o se CSS fa'atauga-ata lafoia

gridzySkinFullOverlay

Fesuia'i	Tau Fa'atonu	Fa'amatalaga
`--background`	`rgba(0, 0, 0, .7)`	fa'ataga so'o se fa'asologa o le CSS
`--color`	`rgb(255, 255, 255)`	fa'atagaina so'o se tau lanu CSS
`--text-shadow`	`none`	fa'atagaina so'o se CSS fa'atauga-ata lafoia

gridzySkinLift

Fesuia'i	Tau Fa'atonu	Fa'amatalaga
`--background`	`rgba(0, 0, 0, .7)`	fa'ataga so'o se fa'asologa o le CSS
`--color`	`rgb(255, 255, 255)`	fa'atagaina so'o se tau lanu CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	fa'atagaina so'o se CSS fa'atauga-ata lafoia

gridzySkinMagnifier

Fesuia'i	Tau Fa'atonu	Fa'amatalaga
`--background`	`rgba(0, 0, 0, .7)`	fa'ataga so'o se fa'asologa o le CSS
`--color`	`rgb(255, 255, 255)`	fa'atagaina so'o se tau lanu CSS

E le lagolagoina e lenei pa'u --text-shadow

gridzySkinBlur

Fesuia'i	Tau Fa'atonu	Fa'amatalaga
`--background`	`rgba(0, 0, 0, .7)`	fa'ataga so'o se fa'asologa o le CSS
`--color`	`rgb(255, 255, 255)`	fa'atagaina so'o se tau lanu CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	fa'atagaina so'o se CSS fa'atauga-ata lafoia

gridzySkinCard

Fesuia'i	Tau Fa'atonu	Fa'amatalaga
`--background`	`rgba(0, 0, 0, 1)`	fa'ataga so'o se fa'asologa o le CSS
`--color`	`rgb(255, 255, 255)`	fa'atagaina so'o se tau lanu CSS
`--text-shadow`	`none`	fa'atagaina so'o se CSS fa'atauga-ata lafoia

O pa'u uma na mua'i fa'auiga e lagolagoina na'o fa'amatalaga faigofie. E mafai ona e faia ni au lava pa'u e sili atu ona lavelave. Fa'amolemole va'ai ile Style Gridzy .

Style Gridzy

Afai e leai se pa'u fa'ata'atia e fetaui ma ou mana'oga, e mafai ona e fa'ailoga lau oe lava pa'u.

O le auala pito sili ona faigofie o le kopi muamua o se paʻu o loʻo iai ma faʻafetaui i ou lava manaʻoga. Ole pa'u fa'avasega muamua gridzySkinBlank e masani lava ona maua ai se fa'avae lelei fa'apea fo'i ma fa'amaumauga lelei ile faila 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;
}

I le faila CSS e te maua ai vasega gridzySkinBlank , gridzyImage ma gridzyCaption . E le manaʻomia e Gridzy ia vasega. E na'o le fa'aaogaina mo le fa'aigoaina ma o lea e mafai ai ona e aveese pe toe fa'aigoa pe a e mana'o ai.

E le gata i lea o le ae mauaina le CSS class gridzyItem . Gridzy setiina lenei vasega otometi i tamaiti tuusao uma o le elemene autu pusa. O lea la, e mafai ona e fa'aogaina lenei vasega e fa'avasega ai mea o lau ata.

Mafaufau i Mea Taua

O mea o lo'o i totonu e tatau ona tali atoatoa. Mafaufau o le elemene elemene o le a mautinoa lava suia. Fa'aaoga tau pasene nai lo tau pika. Ma va'ai i le Gridzy layout option autoFontSize , lea e fusifusia ai le fa'amaufa'ailoga i luga ole lapo'a pusa mea.
O mea taitasi e tatau ona i ai se fua fa'avasega lelei. Ole fua ole mea ole a le suia ma e mana'omia e fa'atatau le fa'asologa. Afai la e le otometi ona fa'amanino lelei le fua fa'atatau o se mea, fa'ata'ita'i ma le lima (fa'ata'ita'iga ile css).

I nisi tulaga, atonu e sili atu ona faigofie le faʻavasegaina o mea o loʻo i totonu o mea aʻo leʻi amataina Gridzy. Na'o le aveese o le vasega gridzy po'o le Gridzy javascript faila mo sina taimi.

O lena lava! Pau lava le mea e te manaʻomia e fausia ai lou lava paʻu. O le tele o pa'u na mua'i fa'auigaina e le fa'aaogaina e sili atu nai lo lenei.

Ae e mafai ona sili atu pe a e fiafia ...

Pa'u Avatu

Gridzy fa'aaogaina le tele o vasega CSS nai lo na'o gridzyItem . O le tele o ia mea o le a faʻapipiʻiina otometi ma e mafai foi ona e faʻaogaina mo le faʻaogaina.

Vasega Autu o Koneteina

Igoa Vasega	Fa'amatalaga
`gridzy` e seti ma le lima	E otometi lava ona maua e Gridzy elemene i lenei vasega ma amataina.
`gridzyAnimated`	E otometi lava ona seti pe a `true` le filifiliga `animate` . Afai e setiina ma le lima lenei vasega, o le filifiliga `animate` o le a otometi lava ona `true` (se'i vagana ai ua matua seti i `false` ).

Vasega Mea

Igoa Vasega	Fa'amatalaga
`gridzyItem`	O le a setiina i le taimi lava e amata ai le mea e amata ai. O le a le aveesea lava.
`gridzyItemInitializing`	O le a setiina i le taimi lava e amata ai le mea e amata ai. O le a suia i le `gridzyItemReady` i le taimi lava e amata atoatoa ai le mea. O lona uiga e le faapea o ata ua uma ona utaina (va'ai `gridzyItemLoading` ), ae ua sauni le mea e iloa.
`gridzyItemReady`	O le a suia `gridzyItemInitializing` i le taimi lava e amata atoatoa ai le mea. O le a le aveesea lava. O lona uiga e le faapea o ata ua uma ona utaina (vaai `gridzyItemComplete` ), ae ua sauni le mea e iloa.
`gridzyItemLoading`	O le a setiina i le taimi lava e amata ai le mea e amata ai. O le a suia i le `gridzyItemComplete` i le taimi lava e uma ai le utaina o ata o loʻo iai (e masani lava naʻo le tasi).
`gridzyItemComplete`	O le a suia `gridzyItemLoading` i le taimi lava e uma ai le utaina o ata o loʻo iai (e masani lava naʻo le tasi). O le a le aveesea lava.
`gridzyItemInitialToVisible`	O le a setiina i le taimi lava e amata ai ona aliali mai le mea i le taimi muamua. O le a aveesea i le taimi lava e iloa uma ai le mea.
`gridzyItemVisible`	O le a seti i le taimi lava e iloa lelei ai le mea. O le a aveesea i le taimi lava e amata ona mou atu le mea.
`gridzyItemVisibleToHidden`	O le a setiina i le taimi lava e amata ai ona mou atu le mea. O le a aveesea i le taimi lava e natia atoa ai le mea.
`gridzyItemHidden`	O le a setiina i le taimi lava e natia atoa ai le mea. O le a aveesea i le taimi lava e amata ai ona aliali mai le mea.
`gridzyItemHiddenToVisible`	O le a setiina i le taimi lava e amata ai ona aliali mai le mea (sei vagana ai le faʻaalia i le taimi muamua - vaʻai le vasega `gridzyItemInitialToVisible` ). O le a aveesea i le taimi lava e iloa atoatoa ai le mea.
`gridzyItemVisibleToVisible`	O le a setiina i le taimi lava e suia ai se mea i le faasologa, ae o le mea lava ia sa i ai ma tumau pea ona iloa. O le a aveesea i le taimi lava e uma ai le suiga animation.

Ona o le faaletonu o le faailoga o le faagasologa ma le animations mo le aliali mai ma le mou atu ata ua muai faauigaina e le Gridzy autu CSS faila.

Faatasi ai ma nei vasega CSS o loʻo taʻua i luga e mafai ona e faʻavasega lau oe faʻailoga faʻagasologa ma faʻafiafiaga. Fa'amalosi e va'ai i le faila CSS autu Gridzy, ia malamalama i mea e tatau ona e fa'amalo. Leai se fefe, o mea uma o loʻo faʻamaumauina lelei iina.

Fa'atele le utaina

Afai e te faʻaaogaina le tele o ata, atonu o se manatu lelei le fesoasoani ia Gridzy e fausia vave le faʻasologa.

Taofi le osooso Ata

E matua mana'omia e Gridzy le fa'atusa o ata uma e fa'atatau ai le fa'asologa. O nei mea moni e mafua ai le osooso elemene pe afai o nisi ata ua saunia ae o isi e leai. O le tele o ata o loʻo i ai, o le sili atu o le faʻalavelave e mafai ona avea lenei aafiaga.

Ina ia puipuia lenei amio, na'o le seti o uiga width ma height mo elemene uma img . E taua le setiina o tau sa'o mo ata taitasi, a leai o le a fa'aseseina ata. O tau sa'o o le ulua'i lautele ma le maualuga o ata ta'itasi:

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

A mae'a, e mafai e Gridzy ona fa'atatau vave le fa'asologa e aunoa ma le mana'omia ona iloa le tele o ata.

Lave Loading

Ina ia uta na'o ata o lo'o i totonu o le va'aiga va'aia, mulimuli i laasaga nei:

Fa'aofi uiga width ma height e pei ona fa'amatalaina i luga (ia mautinoa e fa'aoga sa'o tau)
Suia uma uiga src i data-gridzylazysrc e pei ona faʻaalia i lalo (pe a iai foi au uiga srcset , sui i 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>

A maeʻa nei laasaga o le a faʻapipiʻiina ata i le taimi lava e latalata ai pe i totonu o le vaʻaiga.

Fa'ailoga Fa'agasologa

O le fa'ailoga o le fa'agasologa o le tama'i ata fa'amanino lea e fa'aalia a'o uta le ata. Afai e te faʻaogaina faʻamatalaga & paʻu , o le a faʻaalia otometi le faʻailoga o le faagasologa. A leai, e te manaʻomia ni suiga:

Tuu elemene img taitasi i totonu o se elemene div
(poʻo soʻo se isi elemene - vaʻai HTML semantic mo nisi mea)
Fa'aopoopo le vasega gridzyImage i elemene img ta'itasi

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

A maeʻa lena e tatau ona e vaʻai i faʻailoga o le faagasologa pe a faʻaalu se taimi e utaina ai ata.

Filifiliga

Filifiliga i Gridzy e faigofie tele ae mamana. Po o le a lava le ituaiga faamama e te manaʻomia, e foliga mai e mafai ona iloa. Pau lava le mea e te manaʻomia, o sina CSS ma nai elemene HTML ...

O se fa'ata'ita'iga fa'atino:

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

Tatou Fausiaina Laasaga ma lea Laasaga

1. Muamua matou te manaʻomia le fausaga HTML masani o Gridzy ma seti igoa o vasega mo mea uma faʻataʻitaʻiga ina ia mafai ona matou faamamaina mulimuli ane.

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

I lenei faʻataʻitaʻiga naʻo le tasi le vasega mo elemene taʻitasi. Ae e mafai foi ona e setiina ni vasega se tele mo se elemene e tasi, pe afai e tatau ona maua lena elemene e ala i le tele o filiga.

2. Ona tatou faaopoopo lea o ni faamau lea e mafai ona tatou suia ai le faamama i lena taimi

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

Nai lo fa'amau, e mafai fo'i ona e fa'aogaina isi fomu elemene e pei o pusa siaki, fa'amau leitio, filifili fanua ma isi.

E pei ona mafai ona e vaʻai, o tau o faʻamau e masani ona filifilia CSS. O le taimi lava e maeʻa ai, o le kiliki i luga o sea faʻamau o le a faʻaalia ata e fetaui ma le CSS filifilia. Fa'atekinisi e na'o le setiina o le filifiliga filter i lenei tau.

E mafai fo'i ona e fa'aogaina filifiliga sili atu ona lavelave. Mo se fa'ata'ita'iga :not(.animals) e aoga fo'i, fa'apea fo'i .animals.people ma .animals, .people .

3. I le mea mulimuli, matou te faʻapipiʻi faʻamau i totonu o se pusa div ma fusifusia i latou i le Gridzy gallery, e ala i le setiina o le filifiliga 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>

E pei ona mafai ona e vaʻai, matou te faʻaogaina foi le CSS filifilia mo le filifiliga filterControls . O le div container ma le id attribute e na'o le fa'afaigofieina o fa'amau ona filifili e ala i lena CSS filifili.

O lena lava!

Afai e te manaʻo i se fofo JavaScript, siaki le API .

API

E ui o Gridzy e iai lana API, o le tele o mea e mafai ona faia e aunoa ma lea, na o le faʻaogaina o le DOM. Gridzy o le a matauina ma fetuunai le faasologa. Ae o loʻo i ai foi se API malosi tele ...

Fa'atonu le DOM

Mo fa'ata'ita'iga uma a le Document Object Model (DOM) matou te mana'omia muamua le mea fa'apipi'i:

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

Faaopoopo Ata

E taua tele le fau atoa ma fa'atumu le elemene fou a le tamaititi ae e te le'i fa'aopoopoina i le elemene atigipusa. A leai e le mafai e Gridzy ona iloa le fua sa'o.

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

Aveese Ata

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

Suia Filifiliga

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

E uiga i le faʻaogaina o le DOM e mafai ona e mauaina ile MDN web docs . O lo'o iai fo'i se Fa'atomuaga ile DOM avanoa.

API fa'apitoa

Ina ia faʻaogaina le API, matou te manaʻomia muamua le Gridzy faʻataʻitaʻiga, lea e fusifusia i le Gridzy container element:

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

Maua le Filifiliga

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

Maua Filifiliga Uma

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

Seti Filifiliga

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

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

Fa'aaoga le Filter

O le fa'aogaina o se faamama ua na'o le setiina o le filter filifiliga e mafai ona avea ma so'o se tagata filifilia CSS aoga:

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

Fa'aopoopo Galuega Fa'afo'i

DEPRECATED talu mai le version 2.4.0
Fa'aoga mea fa'aonaponei ma sili atu ona fetu'utu'una'i Events nai lo. Va'ai le isi vaega mo fa'amatalaga.

~~E lagolagoina e Gridzy.js 2 nisi o filifiliga mo galuega toe fo'i. E mafai ona fa'atulagaina na'o le API fa'apitoa, ae pei lava o isi filifiliga:~~

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

	~~Fa'amatalaga~~
~~`onBeforeOptionsChanged`~~	~~Ole galuega toe fa'afo'i e vala'au sa'o a'o le'i fa'atulaga filifiliga.~~
~~`onOptionsChanged`~~	~~Ole galuega toe fo'i lea e vala'au sa'o pe a uma ona fa'atulaga filifiliga.~~
~~`onBeforeRender`~~	~~Ole galuega toe fo'i e vala'au sa'o a'o le'i faia.~~
~~`onRender`~~	~~Galuega toe fo'i e vala'au sa'o pe a mae'a fa'aliliu.~~

Fa'aaoga mea na tutupu

talu mai le version 2.4.0

E mafai ona e fa'aogaina mea tutupu Gridzy e pei lava o mea masani a 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.
});

O nisi mea e tutupu e fa'apupulaina i luga o le Gridzy container element ma isi mea tutupu e fa'ao i luga o mea ta'itasi elemene i totonu o le container element.

O mea na tutupu na fa'ao i luga o le Gridzy container element:

	Fa'amatalaga
`gridzyBeforeInit`	Mu a'o le'i amataina le faletusi.
`gridzyInit`	Fa'amu ina ua uma le fa'amataina o ata.
`gridzyBeforeOptionsChanged`	Fa'amu a'o le'i seti filifiliga.
`gridzyOptionsChanged`	E mu pe a uma ona seti filifiliga.
`gridzyBeforeRender`	Mu a'o le'i faia.
`gridzyRender`	Mu ina ua uma ona tuuina atu.

Afai e te misia ni mea na tutupu iinei, faʻamolemole lafo mai se talosaga lagolago .

event.target e maua ai le elemene atigipusa Gridzy.
event.detail.instance e maua ai le Gridzy instance.

O mea na tutupu na fa'aolaina i elemene aitema:

	Fa'amatalaga
`gridzyItemBeforeInit`	Mu a'o le'i amataina aitema.
`gridzyItemInit`	E mu pe a uma le fa'amataina o mea.
`gridzyItemLoading`	E mu pe a amata ona uta le mea.
`gridzyItemReady`	E mu pe a sauni le mea mo le fa'atulagaina o fa'asologa. O lea la ua iloa le fua faatatau, ae atonu o loʻo faʻapipiʻi pea le ata.
`gridzyItemComplete`	E mu pe a uma ona utaina le ata.

Afai e te misia ni mea na tutupu iinei, faʻamolemole lafo mai se talosaga lagolago .

event.target e maua ai le elemene meataitasi.
event.detail.instance e maua ai le Gridzy instance.

API – Global

E i ai nisi o galuega e tutoʻatasi mai Gridzy faʻataʻitaʻiga. E le mana'omia la ona tatou maua muamua se fa'ata'ita'iga.

Maua le Filifiliga Default

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

Maua uma Filifiliga Default

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

Seti Filifiliga Fa'atonu

E le fa'atulagaina filifiliga o mea uma Gridzy ua uma ona amataina, ae fa'amatalaina le fa'avae mo taimi fou. Ae peita'i, afai o se filifiliga o se fa'ata'ita'iga o lo'o iai o le a toe fa'afo'i e ala i le tau null , o le a fa'aaogaina le tau fa'aletonu fou.

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

E mafai ona e faʻaogaina lenei mea e seti ai filifiliga i le lalolagi atoa, pe a e valaʻau aʻo leʻi saunia le DOM. O lea e te le toe mana'omia ai le setiina o filifiliga e fai ma uiga.

Otometi

Afai lava o loʻo faʻaogaina uma masini a Gridzy.js 2, e leai se manaʻoga mo auala o loʻo i lalo. Ae e mafai ona tape le automatisms e faʻaoga Gridzy i se auala masani:

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

O nisi o nei filifiliga e le mafai ona seti e ala i data-gridzy- attributes poʻo le setOptions() , ona o mafuaaga talafeagai:

	Tau Fa'atonu	Fa'amatalaga
`autoInitOnDomReady`	`true`	Su'e elemene i le vasega `gridzy` i luga o le utaina o itulau ma amatalia. Fa'atonu e ala ile `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Su'e elemene fou i le vasega `gridzy` i le taimi lava e aliali mai ai i le DOM ma amatalia. (fa'ata'ita'iga ile fa'aogaina o suiga o itulau) Fa'atonu e ala ile `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Su'esu'e pe fa'aopoopo pe aveese elemene tama (ata), ma fa'afou le fa'asologa otometi. Settable e ala i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Fa'amatala pe o `data-gridzy-` uiga masani e fa'aaogaina pe leai. Afai e `false` lenei filifiliga e mafai ona seti na'o le API fa'apitoa. Settable e ala i `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Su'e suiga o `data-gridzy-` uiga, ma fa'afou le fa'asologa otometi. E iloa fo'i pe fa'aopoopo pe aveese le vasega `gridzyAnimated` ma pe a tupu suiga `style` . Afai e `false` `useOptionAttributes` , e iloa ai na'o suiga `style` . Settable e ala i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Su'e suiga o uiga `class` o elemene uma tamaiti (ata). Fa'atatau ile filiga. Settable e ala i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver talu mai le version 2.5.0	`true`	Su'e suiga o uiga `src` o ata uma. Fa'atatau pe a fa'aoga i le React po'o faletusi fa'apena. Settable e ala i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver talu mai le lomiga 2.6.0	`true`	Su'e suiga o le lautele o elemene. Fa'atatau ile mamanu tali. (A'o le'i fa'aogaina le fa'ata'ita'iga 2.6.0 sa fa'aogaina le fa'alogo fa'alogo fa'aaliga fa'amalama) Settable e ala i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Fa'amatamata ma le Manu'a

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

Fa'aleaga le Fa'ata'ita'iga

Fai mai, o le faafeagai o le amataina o Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Fa'atasi Lisi Tamaiti ma le Manu'a

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

Fa'atasi ma le Manu'a se Elemene Tamaiti Nofofua

E masani lava e le mana'omia, se'i vagana ai ni tulaga seasea.

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

Fa'atasi Uiga ma le Manu'a

Manatua o le useOptionAttributes filifiliga e tatau ona true mo lenei.

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

Fa'aola Fa'amalo

E masani lava e le mana'omia, tusa lava pe tape uma masini

gridzyInstance.render();

WordPress Plugin

Faletusi JavaScript

Auaunaga

Fa'aliliuga 2.x