Hu'ahu'a 2.x – Gridzy.Gallery

Ua iriti-oioi-hia te tahua itenati. A hi'o na i te mau papa'iraa Beretane mai te mea e, aita te hoê mea i maramarama maitai.

Faaohiparaa tumu

A tuu i te mau hoho'a Gridzy i ni'a i ta outou tahua itenati e a tuu i te reira i ni'a i ta outou tahua itenati (i roto ihoa râ i te tuhaa upoo):

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

Tāpiri i te waehere HTML (i te mau vahi atoa i roto i te tuhaa o te 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 te reira ïa! E hi'oraa maitai roa te reira. Aita e haamataraa taa ê e titauhia.

Ta'iraa

Te ravea mâmâ roa a'e no te haamau i te Gridzy, o te faaohiparaa ïa i te mau huru HTML. E mea ti'a noa ia outou ia faaohipa i data-gridzy- no te haamata i te mau i'oa o te mau maitiraa. No reira, no te tautu'a i te spaceBetween , a tapiri noa i te huru 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>

Ngā ma'itiraa rahi

	Faufaa taunoa	Tuʻaroʻa
`animate`	`true`	Te faataa ra e, e ti'a anei ia faaohipa i te mau hoho'a ha'uti ia taui ana'e te ana'iraa (mai te i'oa, ia taui ana'e te rahi o te matapihi o te rave'a hi'opo'araa e aore râ, ia tauihia te hoê taviri).
`layout`	`justified`	Te faataa ra i te faanahoraa i faaohipahia. E turu te Gridzy.js 2 i na `waterfall` taa ê e piti `justified` . E mau rave'a taa ê ta ratou tata'itahi, o ta outou e nehenehe e ite i raro a'e i teie tabula.
`filter`	`*`	E faataa eaha te mau hoho'a e ti'a ia faaitehia. E nehenehe te mau CSS-selector atoa e faaohipahia ei faufaa i ô nei. I te rahiraa o te taime, e haamau-oioi-hia ïa na roto i `filterControls` (a hi'o i te maitiraa i muri nei). Hi'opo'a i te mau tātari
`filterControls`		Te faataa ra eaha te mau hu'ahu'a e nehenehe e faaohipahia no te tātari i te mau hoho'a. E nehenehe te mau CSS atoa o te maiti i te mau hu'ahu'a HTML, e faaohipahia ei faufaa i ô nei. Hi'opo'a i te mau tātari
`autoConsiderScrollBars`	`true`	No te tohu i te rahi e vai ra mai te peu e e itehia aore ra e moe te mau auri oviri. E faaitoito-pinepine-hia ia vaiiho i te reira ia `true` mai te peu e aita teie ohipa e faatupu i te mau fifi.

Justified

	Faufaa taunoa	Tuʻaroʻa
`autoFontSize`	`false`	Ia au i te rahi o te afata matamua, e faaapî oioi oia i te rahi o te mau afata tata'itahi. Aita te huru o te font-size i haamau-maitai-hia.
`desiredHeight`	`190`	E faataa te reira i te teitei o te mau anairaa hu'ahu'a e hinaarohia. E tata'ihia te teitei mau ia au i te rahi e vai ra e te mau hu'ahu'a i roto i te anairaa.
`hideOnMissingImage`	`true`	Te huna ra te mau afata e te mau hoho'a o te ore e nehenehe e faautahia.
`spaceBetween`	`4`	E faataa te reira i te atearaa i rotopu i te mau hu'ahu'a i roto i te mau pixels.
`lastRowAlign` mai te huriraa 2.3.0 mai â	`justified`	Te faataa ra i te huru o te anairaa hopea. Te vai ra te mau mana'o tumu i fariihia `left` , `center` , `right` , e `justified` .
`singleRowAlign` mai te huriraa 2.3.0 mai â	`justified`	E faataa te reira i te haerea mai te peu e hoê ana'e ana'iraa parau. Te vai ra te mau mana'o tumu i fariihia `left` , `center` , `right` , e `justified` .
~~`fillLastRow`~~ ~~mai te huriraa 2.1.0~~	~~`true`~~	TAMUA mai te huriraa 2.4.0 mai â (UA FAAORAA mai te huriraa 2.3.0 mai â ) A faanaho i te mau hoho'a ia faaî roa te anairaa hopea i te mau taime atoa. E nehenehe e riro ei mana'o maitai ia tapea i te reira mai te peu e e hinaaro outou e faaô atu i te mau hoho'a. Aita e ohipa i ni'a i te mau anairaa hoê (hi'o `fillSingleRow` ).
`fillSingleRow` mai te huriraa 2.1.0	~~`true`~~	TAMUA mai te huriraa 2.4.0 mai â (UA FAAORAA mai te huriraa 2.3.0 mai â ) Mai te mea e hoê ana'e anairaa, e faanaho oia i te mau hoho'a ia î roa te anairaa. E nehenehe e riro ei mana'o maitai ia patoi i te reira mai te peu e hoê aore ra e piti ana'e hoho'a ta outou i roto i te piha.

Waterfall

	Faufaa taunoa	Tuʻaroʻa
`autoFontSize`	`false`	Ia au i te rahi o te afata matamua, e faaapî oioi oia i te rahi o te mau afata tata'itahi. Aita te huru o te font-size i haamau-maitai-hia.
`desiredWidth`	`250`	Te faataa ra i te rahi o te mau tia e hinaarohia ra. E tata'ihia te rahi mau ia au i te rahi e vai ra e te numera o te mau pou.
`hideOnMissingImage`	`true`	Te huna ra te mau afata e te mau hoho'a o te ore e nehenehe e faautahia.
`horizontalOrder`	`false`	Te faataa ra e e tuuhia te mau hu'ahu'a hoê noa hu'ahu'a i roto i te tiaraa atoa mai te aui e tae atu i te atau, e i muri iho e haamata faahou i roto i te tiaraa i te pae aui roa ' ' e, noa ' tu eaha te vahi i reira te tiaraa e vai ra. Ei hi'oraa, e tuu-noa-hia te mau hu'ahu'a i roto i te tiaraa teitei iti roa ' ' e.
`spaceBetween`	`4`	E faataa te reira i te atearaa i rotopu i te mau hu'ahu'a i roto i te mau pixels.
`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`.

Te mau maitiraa rahi a'e

Hi'o i te API no te tahi atu mau maitiraa aravihi.

HTML

Teie te faanahoraa HTML ohie roa a'e o Gridzy:

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

Teie râ, e mea ohie roa ia Gridzy e e nehenehe ta outou e faaohipa i te tahi atu mau faanahoraa HTML. E mea iti noa te mau mana'o e ti'a ia hi'opo'a:

E faahoho'a te tamarii tata'itahi o te mau hu'ahu'a i te hoê tuhaa i roto i te ana'iraa.
E nehenehe te mau hu'ahu'a e ta'na mau tamarii e riro ei mau huru tapa'o atoa, mai ul e li (a feruri noa i te faaho'i-faahou-raa mai i te mau rave'a hi'opo'araa).
E mea titauhia te piha haapiiraa gridzyImage mai te mea e, e ere te hoê hu'ahu'a img i te tamarii ti'amâ.

No reira, teie atoa te hoê faanahoraa HTML ohipa:

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

E mea titauhia te hoê faanahoraa HTML aravihi mai te peu iho â râ e e hinaaro outou e tuu i te mau parau papa'i. No te ite hau atu â no ni'a i te reira, a hi'o i te mau papa'iraa e te mau iri .

Te mau papa'iraa e te mau iri

E mea ti'a ia outou ia faataa i te hoho'a mai te mea e, e hinaaro outou e tuu i te mau papa'iraa i roto i ta outou piha. No reira, te vai ra te tahi mau iri i faataahia na mua ' ' e. E kōnae CSS to te iri tata'itahi. Taa ê noa'tu i te mau hoho'a Gridzy rahi (i roto ihoa râ i te tuhaa upoo):

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

Hau atu â, e titauhia te hoê faanahoraa HTML aravihi:

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

Mai te mea e, te uiui ra outou no ni'a i te haamauraa HTML, a hi'o i te Semantic HTML .

A haapapû noa e, te vai ra te gridzyCaption i roto i te piha haapiiraa, e nehenehe ta outou e faaohipa i te mau huru tapa'o atoa no te papa'iraa. E mea titauhia te gridzyImage no te piha haapiiraa no te hu'ahu'a img .

Te faaite nei te hi'oraa i ni'a nei ia outou i te iri gridzySkinClassic . No te faaohipa i te tahi atu, a mono i te i'oa o te iri i te hoê o teie mau mea:

Te mau iri

	Te mau piha haapiiraa e roaa mai
gridzySkin te hoê vahi haamataraa maitai no te hamani i to oe iho iri hi'opo'araa ora	`gridzySkinBlank`
gridzySkinClassic hi'opo'araa ora	`gridzySkinClassic` `gridzySkinClassicLight`(UA FAAORAA mai te huriraa 2.6.0 mai â)
gridzySkinFullOverlay hi'opo'araa ora	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(UA FAAORAA mai te huriraa 2.6.0 mai â)
gridzySkinLift hi'opo'araa ora	`gridzySkinLift` `gridzySkinLiftLight`(UA FAAORAA mai te huriraa 2.6.0 mai â)
gridzySkinMagnifier aita te ohipa zoom i faaôhia hi'opo'araa ora	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(UA FAAORAA mai te huriraa 2.6.0 mai â)

E mea titauhia noa te hoê kōnae CSS no te mau iri atoa i ni'a nei, tera râ, te vai ra te tahi atu mau iri o te titau atoa i te hoê kōnae JavaScript:

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

	Te mau piha haapiiraa e roaa mai
gridzySkinBlur aita e ohipa ra i roto i te IE hi'opo'araa ora	`gridzySkinBlur` `gridzySkinBlurLight`(UA FAAORAA mai te huriraa 2.6.0 mai â)
gridzySkinCard hi'opo'araa ora	`gridzySkinCard` `gridzySkinCardLight`(UA FAAORAA mai te huriraa 2.6.0 mai â)

Te mau ma'itiraa iri

Mai te huriraa 2.6.0 mai â, te vai ra te mau rave'a no te haamau i te mau iri i roto. E nehenehe ta outou e taui i te tae o te hoho'a i muri, te tae o te papa'iraa, e te 'o'e o te papa'iraa, ia au i te iri taa ê. E mea ti'a ia outou ia faaohipa i te mau hoho'a CSS mai ta outou e nehenehe e ite i ô nei:

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

Hi'opo'a i te mau tauiraa e te mau mana'o tumu no te iri tata'itahi i ô nei:

gridzySkinClassic

Tauiraa	Faufaa taunoa	Ma'ohi
`--background`	`rgba(0, 0, 0, .7)`	e faati'a i te mau faufaa atoa CSS
`--color`	`rgb(255, 255, 255)`	e faati'a i te mau uaraa ta'i CSS atoa
`--text-shadow`	`none`	e faati'a i te mau faufaa atoa o te papa'iraa CSS

gridzySkinFullOverlay

Tauiraa	Faufaa taunoa	Ma'ohi
`--background`	`rgba(0, 0, 0, .7)`	e faati'a i te mau faufaa atoa CSS
`--color`	`rgb(255, 255, 255)`	e faati'a i te mau uaraa ta'i CSS atoa
`--text-shadow`	`none`	e faati'a i te mau faufaa atoa o te papa'iraa CSS

gridzySkinLift

Tauiraa	Faufaa taunoa	Ma'ohi
`--background`	`rgba(0, 0, 0, .7)`	e faati'a i te mau faufaa atoa CSS
`--color`	`rgb(255, 255, 255)`	e faati'a i te mau uaraa ta'i CSS atoa
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	e faati'a i te mau faufaa atoa o te papa'iraa CSS

gridzySkinMagnifier

Tauiraa	Faufaa taunoa	Ma'ohi
`--background`	`rgba(0, 0, 0, .7)`	e faati'a i te mau faufaa atoa CSS
`--color`	`rgb(255, 255, 255)`	e faati'a i te mau uaraa ta'i CSS atoa

Aita teie iri e turu ra i --text-shadow

gridzySkinBlur

Tauiraa	Faufaa taunoa	Ma'ohi
`--background`	`rgba(0, 0, 0, .7)`	e faati'a i te mau faufaa atoa CSS
`--color`	`rgb(255, 255, 255)`	e faati'a i te mau uaraa ta'i CSS atoa
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	e faati'a i te mau faufaa atoa o te papa'iraa CSS

gridzySkinCard

Tauiraa	Faufaa taunoa	Ma'ohi
`--background`	`rgba(0, 0, 0, 1)`	e faati'a i te mau faufaa atoa CSS
`--color`	`rgb(255, 255, 255)`	e faati'a i te mau uaraa ta'i CSS atoa
`--text-shadow`	`none`	e faati'a i te mau faufaa atoa o te papa'iraa CSS

E turu noa te mau iri atoa i faataahia na mua ' ' e i te mau papai papai ohie. E nehenehe ta outou e hamani i to outou iho mau iri e te fifi a'e. A hi'o na i te Style Gridzy .

Te huru Gridzy

Mai te mea e aita e iri i faataahia na mua ' ' e e au i to outou mau hinaaro, e nehenehe outou e hamani i ta outou iho iri.

Te ravea mâmâ roa ' ' e, o te tata'uraa ïa i te hoê iri o te vai ra e te faaauraa i te reira ia au i to oe iho mau hinaaro. I te rahiraa o te taime, e horo'a te iri gridzySkinBlank i te hoê niu maitai e te hoê papa'iraa maitai i roto i te buka 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;
}

E ite oe i te mau piha haapiiraa gridzySkinBlank , gridzyImage e gridzyCaption i roto i te kōnae CSS. Aita o Gridzy iho e hinaaro i teie mau piha haapiiraa. E faaohipa-noa-hia te reira no te faanehenehe, e no reira, mai te mea e, e hinaaro outou, e nehenehe ta outou e tatara e aore râ, e i'oa faahou i te reira.

Hau atu â, e ite outou i te piha haapiiraa CSS gridzyItem . E haamau oioi noa o Gridzy i teie piha haapiiraa i te mau tamarii atoa o te hu'ahu'a rahi. No reira, e nehenehe ta outou e faaohipa i teie piha haapiiraa no te faanaho i te mau tao'a o ta outou piha.

Te mau mea faufaa rahi

E mea ti'a ia pahono maitai te mau mea e vai ra i roto i te tumu parau. A feruri na e e taui mau â te rahi o te hu'ahu'a. A faaohipa i te mau faito i nia i te hanere eiaha râ i te mau faito pixel. E hi'o i te rave'a Gridzy autoFontSize , o te taati nei i te rahi o te huru papa'iraa i ni'a i te rahi o te afata.
E ti'a i te mau mea atoa ia faataa maitai i te hoê faito hoho'a. Eita roa ' tu te faito o te tao'a e taui e e titauhia no te tata'u i te ana'iraa. No reira, mai te mea e, aita te hoê tao'a e farii i te hoê faito hoho'a, a faataa i te reira na roto i te rima (mai te css).

I te tahi mau taime, e mea ohie a'e paha ia papai i te mau mea e vai ra i roto i te mau mea hou a haamata ' i o Gridzy. No te reira, e tia ia tatara i te gridzy o te piha haapiiraa aore ra te buka javascript Gridzy no te hoê taime poto.

O te reira ïa! O te reira ana'e ta outou e hinaaro no te patu i to outou iho iri. Aita te rahiraa o te mau iri i faataahia na mua ' ' e e faaohipa ra i te reira.

Tera râ, e nehenehe e rave rahi atu â mai te mea e, e hinaaro outou ...

Te mau iri aravihi

E rave rahi a'e mau piha haapiiraa CSS ta Gridzy e faaohipa nei i gridzyItem ana'e. E haamau - oioi - hia te rahiraa o ratou, e e nehenehe atoa outou e faaohipa i te reira no te faanehenehe.

Te mau piha haapiiraa rahi

I'oa o te piha haapiiraa	Tuʻaroʻa
`gridzy` no te tautu'a rima	E imi noa o Gridzy i te mau tuhaa o teie piha haapiiraa e e haamata oia i te reira.
`gridzyAnimated`	E haamau-oioi-hia mai te peu e e `true` te maitiraa `animate` . Mai te mea e, e haamauhia teie piha haapiiraa na roto i te rima, e riro atoa te ma'itiraa `animate` `true` (maori râ mai te mea e, ua haamauhia te reira ei `false` ).

Te mau piha haapiiraa

I'oa o te piha haapiiraa	Tuʻaroʻa
`gridzyItem`	E tauihia te reira i te taime noa a haamata ' i te ohipa haamataraa. Eita roa ' tu e iriti - ê - hia.
`gridzyItemInitializing`	E tauihia te reira i te taime noa a haamata ' i te ohipa haamataraa. E monohia te reira e te `gridzyItemReady` i muri noa'e i te haamataraa taatoa o te tao'a. E ere te auraa e, ua î roa te mau hoho'a (hi'o `gridzyItemLoading` ), ua ineine râ te reira no te itehia.
`gridzyItemReady`	E mono te reira i `gridzyItemInitializing` i muri noa'e i te haamata-roa-raa o te tao'a. Eita roa ' tu e iriti - ê - hia. E ere te auraa e, ua î roa te mau hoho'a (hi'o `gridzyItemComplete` ), tera râ, ua ineine te reira no te itehia.
`gridzyItemLoading`	E tauihia te reira i te taime noa a haamata ' i te ohipa haamataraa. E monohia te reira e `gridzyItemComplete` i te taime a faauta ' i te mau hoho'a i roto (hoê ana'e).
`gridzyItemComplete`	E mono te reira i `gridzyItemLoading` ia oti noa'tu te mau hoho'a i roto i te reira (hoê ana'e). Eita roa ' tu e iriti - ê - hia.
`gridzyItemInitialToVisible`	E tauihia te reira ia haamata noa te reira i te itehia i te taime matamua. E iriti - oioi - hia te reira ia ite - roa - hia te reira.
`gridzyItemVisible`	E haamauhia ïa i te taime noa a ite - maitai - hia ' i te tao'a. E iriti - oioi - hia te reira ia haamata noa te tao'a i te moe.
`gridzyItemVisibleToHidden`	E haamauhia ïa ia haamata noa te tao'a i te moe. E iriti - ê - hia te reira ia huna - roa - hia te tao'a.
`gridzyItemHidden`	E haamauhia ïa i muri noa ' ' e i te hunahia roa ' tu te tao'a. E iriti-ê-hia ïa ia haamata noa te reira i te itehia.
`gridzyItemHiddenToVisible`	E haamauhia ïa i te taime noa a haamata ai te tao'a i te itehia (hi'o i te piha haapiiraa `gridzyItemInitialToVisible` maori râ te iteraa i te taime matamua). E iriti - oioi - hia te reira ia ite - roa - hia te reira.
`gridzyItemVisibleToVisible`	E tauihia te reira i te taime a taui ai te hoê mea i roto i te ana'iraa, tera râ, e vai noa te reira e e vai noa te reira. E iriti-ê-hia te reira ia oti noa te tauiraa o te hoho'a.

Ei hi'oraa, ua faataahia te tapao o te ohipa e te mau hoho'a no te mau hoho'a e itehia mai e e moe ê atu i roto i te buka CSS rahi Gridzy.

Na roto i teie mau piha haapiiraa CSS i faahitihia i ni'a, e nehenehe ta outou e hamani i ta outou iho mau tapa'o e te mau hoho'a ha'uti. A hi'o i roto i te buka CSS rahi no Gridzy no te ite eaha te titauhia ia outou ia faaore. Eiaha e mǎta'u, ua papa'ihia te mau mea atoa i reira.

Faaite i te hopoi'araa

E nehenehe e riro ei mana'o maitai ia tauturu ia Gridzy ia patu oioi i te ana'iraa mai te peu e e faaohipa outou i te mau hoho'a e rave rahi.

A arai i te hororaa i te mau hoho'a

No te tata'u i te ana'iraa, e titau mau o Gridzy i te faito o te mau hoho'a atoa. E faatupu teie mau mea i te mau hu'ahu'a mai te peu e ua ineine te tahi mau hoho'a e te tahi atu aita. Te rahi noa ' tura te mau hoho'a, te rahi noa ' tura ïa te riri o teie faahopearaa.

No te arai i teie haerea, a haamau noa i te mau huru width e height no te mau img atoa. Mea faufaa roa ia haamau i te mau mana'o tumu no te mau hoho'a tataitahi, mai te peu e aita, e haafifihia te mau hoho'a. Te mau faito ti'a, o te rahi ïa e te teitei matamua o te mau hoho'a:

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

I muri iho, e nehenehe o Gridzy e tata'u oioi i te ana'iraa ma te ore e hinaaro e ite i te rahi mau o te mau hoho'a.

Te hopoi'araa Lazy

A rave noa i teie mau taahiraa avae no te faauta noa i te mau hoho'a i roto i te vahi hi'oraa:

A faaô i te mau huru width e height mai tei faaitehia i ni'a (a haapapû e, e faaohipa outou i te mau auraa ti'a)
Mai tei faaitehia i raro nei, a mono i te mau huru src atoa e data-gridzylazysrc (mai te mea e, e mau huru srcset atoa ta outou, a mono i te reira e 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>

I muri a'e i teie mau taahiraa avae, e faautahia te mau hoho'a i te taime a fatata ' i ratou aore ra i roto i te vahi hi'oraa.

Faaiteraa no te ohipa

Te tapa'o o te ohipa, o te tapa'o ïa na'ina'i o te itehia i te taime a faautahia ' i te hoho'a. E faaite-oioi-hia te tapao o te ohipa mai te peu e e faaohipa outou i te mau papa'iraa e te mau iri . Aita ana'e, e titauhia te tahi mau tauiraa:

A tuu i te mau img atoa i roto i te hoê hu'ahu'a div
(e aore râ, i roto i te tahi atu mau mea, a hi'o i te HTML no te tahi atu mau mea)
A tapiri i te piha haapiiraa gridzyImage i te mau img atoa

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

I muri iho i te reira, e ti'a ia outou ia hi'o i te mau tapa'o o te ohipa mai te mea e, e titauhia te taime no te faauta i te mau hoho'a.

Ngā tātari

E mea ohie roa te mau tātari i roto i te Gridzy, e mea puai râ. Peneia'e e nehenehe te reira e itehia noa ' tu eaha te huru taviri e hinaarohia e oe. Te mau mea atoa ta outou e hinaaro, o te hoê ïa CSS iti e te tahi mau hu'ahu'a HTML ...

Teie te hoê hi'oraa maitai:

<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 patu tatou i te reira taahiraa i te taahiraa

1. A tahi, e titauhia te faanahoraa HTML matauhia no Gridzy e te i'oa o te mau piha haapiiraa no te mau tao'a atoa ia nehenehe ia tatou ia hi'opo'a i te reira i muri iho

<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 roto i teie hi'oraa, hoê noa piha haapiiraa ta tatou e faaohipa no te mau hu'ahu'a atoa. Teie râ, mai te peu e e itehia taua hu'ahu'a ra na roto i te mau tâpûraa e rave rahi, e nehenehe atoa outou e haamau i te mau piha haapiiraa e rave rahi no te hoê noa hu'ahu'a.

2. I muri iho, e tuu tatou i te tahi mau pato'i no te taui i te mau tātari

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

E nehenehe atoa outou e faaohipa i te tahi atu mau hoho'a mai te mau afata hi'opo'araa, te mau taviri radio, te mau vahi ma'itihia, e te tahi atu â eiaha râ i te mau pato'i.

Mai ta outou e nehenehe e ite, e mea matauhia te mau mana'o tumu o te mau taviri CSS. Ia oti noa tatou, e faaite mai te hoê patoiraa i nia i te hoê taviri mai te reira te huru i te mau hoho'a e au i taua CSS ra. I te pae no te ture, e haamau noa te reira i te maitiraa filter i nia i teie faufaa.

E nehenehe atoa outou e faaohipa i te mau ravea maitiraa fifi a'e. Ei hi'oraa :not(.animals) e ohipa, e tae noa'tu i .animals.people e .animals, .people .

3. I te pae hopea, e tuu tatou i te mau pato'i i roto i te hoê farii div e e here i te reira i roto i te piha Gridzy na roto i te tautu'araa i te ma'itiraa 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>

Mai ta outou e nehenehe e ite, te faaohipa atoa nei matou i te hoê CSS no te ma'itiraa filterControls . No te faaohipa noa i te afata div e te huru id no te faaohie i te mau patoi i te maitiraa na roto i taua CSS ra.

O te reira ïa!

Hi'o i te API mai te mea e, e hinaaro outou i te hoê faatitiaifaroraa JavaScript.

API

E nehenehe te rahiraa o te mau mea e ravehia na roto noa i te faaohiparaa i te DOM, noa ' tu e API to Gridzy iho. E ite o Gridzy i te reira e e taui oia i te ana'iraa. Tera râ, te vai ra atoa te hoê API puai roa ...

Te faaohiparaa i te DOM

E mea titauhia na mua roa te mau hu'ahu'a no te mau rave'a atoa no te mau papa'iraa (DOM) :

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

Tāpiri nga whakaahua

E mea faufaa roa ia patu e ia faaî i te hu'ahu'a tamarii apî hou a tuu ai i te reira i roto i te hu'ahu'a. Aita ana'e, eita ta Gridzy e nehenehe e ite i te mau faito ti'a.

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

Tangohia nga whakaahua

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

Taui i te mau maitiraa

// 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 nehenehe ta outou e ite i te mau haamaramaramaraa hau no ni'a i te faaohiparaa i te DOM i te mau parau papa'i MDN . Te vai ra atoa te hoê omuaraa parau no ni'a i te DOM .

API

No te faaohipa i te API, e titauhia na mua roa te hi'oraa Gridzy, tei taaihia i te hu'ahu'a Gridzy:

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

Titi i te maitiraa

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

A farii i te mau maitiraa atoa

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

Tauturu i te mau maitiraa

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

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

Faaohipa i te tātari

Te faaohiparaa i te hoê tātari, o te haamauraa ïa i te filter maitiraa o te nehenehe e riro ei maitiraa CSS tano:

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

Tāpiri i te mau ohipa piiraa

TE FAAORAA mai te huriraa 2.4.0 mai â
A faaohipa râ i te mau ohipa apî e te tauiui a'e. No te mau haamaramaramaraa taa maitai, a hi'o i te tuhaa muri iho.

~~E turu te Gridzy.js 2 i te tahi mau maitiraa no te mau ohipa piiraa. Mai te tahi atu mau rave'a, e nehenehe ta ratou e tauihia na roto ana'e i te API:~~

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

	~~Tuʻaroʻa~~
~~`onBeforeOptionsChanged`~~	~~Te hoê ohipa piiraa e anihia hou a haamau ai i te mau maitiraa.~~
~~`onOptionsChanged`~~	~~Te ohipa piiraa e anihia i muri noa ' ' e i te haamauraa i te mau maitiraa.~~
~~`onBeforeRender`~~	~~Te ohipa piiraa e anihia hou a huri ai.~~
~~`onRender`~~	~~Te ohipa piiraa e anihia i muri noa ' ' e i te huriraa.~~

A faaohipa i te mau ohipa

mai te huriraa 2.4.0 mai â

E nehenehe ta outou e faaohipa i te mau ohipa Gridzy mai te mau ohipa JavaScript matauhia:

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

E pupuhihia te tahi mau ohipa i nia i te hu'ahu'a Gridzy, area te tahi atu mau ohipa ra, e pupuhihia ïa i nia i te mau hu'ahu'a tataitahi i roto i te hu'ahu'a.

Te mau ohipa i tupu i ni'a i te mau hu'ahu'a Gridzy:

	Tuʻaroʻa
`gridzyBeforeInit`	Te mau auahi hou te haamataraa o te fare tahua.
`gridzyInit`	Te mau auahi i muri a'e i te haamataraa o te fare tahua.
`gridzyBeforeOptionsChanged`	Te mau auahi hou a haamau ai i te mau maitiraa.
`gridzyOptionsChanged`	Te mau auahi i muri a'e i te haamauraa i te mau maitiraa.
`gridzyBeforeRender`	Te mau auahi hou a horoa ' i.
`gridzyRender`	Te mau auahi i muri a'e i te huriraa.

A hapono mai i te hoê aniraa patururaa mai te mea e, ua ere outou i te tahi mau ohipa i ô nei.

E horo'a te event.target i te hu'ahu'a Gridzy.
E horo'a event.detail.instance i te hi'oraa Gridzy.

Te mau ohipa i tupu i ni'a i te mau hu'ahu'a:

	Tuʻaroʻa
`gridzyItemBeforeInit`	Te mau auahi hou te haamataraa o te tao'a.
`gridzyItemInit`	Te mau auahi i muri a'e i te haamataraa o te tao'a.
`gridzyItemLoading`	E tupu te auahi ia haamata ana'e te tao'a i te faauta.
`gridzyItemReady`	E auahi ia ineine ana'e te tao'a no te tata'uraa i te ana'iraa. No reira, ua itehia te faito o te hoho'a, tera râ, e nehenehe â te hoho'a e faautahia.
`gridzyItemComplete`	E tupu te auahi ia faauta - taa - ê - hia te hoho'a.

A hapono mai i te hoê aniraa patururaa mai te mea e, ua ere outou i te tahi mau ohipa i ô nei.

E horo'a event.target i te mau hu'ahu'a.
E horo'a event.detail.instance i te hi'oraa Gridzy.

API – Ao nei

Te vai ra te tahi mau ohipa tei taa ê i te mau hi'oraa Gridzy. Eiaha râ tatou e farii i te hoê hi'oraa na mua ' tu.

Titiro i te maitiraa taunoa

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

A farii i te mau maitiraa atoa

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

Tautu'a i te mau ma'itiraa taunoa

Eita te reira e haamau i te mau maitiraa no te mau hi'oraa Gridzy atoa tei haamata a'ena, te faataa ra râ te reira i te niu no te mau hi'oraa apî. Teie râ, mai te peu e e faaho'i-faahou-hia mai te hoê maitiraa o te hoê hi'oraa o te vai ra na roto i te faufaa null , e faaohipa te reira i te faufaa apî.

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

Mai te mea e, e niuniu outou i te reira hou a ineine ai te DOM, e nehenehe ta outou e faaohipa i te reira no te haamau i te mau ma'itiraa na te ao nei. Eiaha râ outou e haamau faahou i te mau maitiraa ei mau huru.

Te mau matini roro uira

Aita e titauhia te mau rave'a i raro nei mai te mea e, te vai noa ra te mau matini roro uira atoa o Gridzy.js 2. Teie râ, e nehenehe te mau matini roro uira e tapeahia no te faaohipa ia Gridzy i roto i te hoê huru tahito a'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
});

Eita te tahi o teie mau ma'itiraa e nehenehe e haamauhia na roto i te mau rave'a data-gridzy- e aore râ, na roto i setOptions() , no te tahi mau tumu tano:

	Faufaa taunoa	Tuʻaroʻa
`autoInitOnDomReady`	`true`	E ite oia i te mau hu'ahu'a e te piha haapiiraa `gridzy` i ni'a i te api e e haamata i te reira. E nehenehe e tauihia na roto i `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Taata hi'opo'a i te tauiraa	`true`	I te taime noa a ite ai ratou i roto i te DOM, e ite oia i te mau mea apî e `gridzy` no te piha haapiiraa e e haamata i te reira. (mai te faaohiparaa i te mau tauiraa api) E nehenehe e tauihia na roto i `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Taata hi'opo'a i te tauiraa	`true`	E hi'opo'a oia e, ua amuihia'tu anei te mau hu'ahu'a tamarii (te mau hoho'a) e aore râ, ua iritihia, e e faaapî oioi oia i te ana'iraa. E nehenehe e tauihia na roto i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Te faataa ra e, e faaohipa-pinepine-hia anei te mau huru `data-gridzy-` e aore râ, aita. Mai te mea e, e mau maitiraa `false` teie, e nehenehe noa ïa e haamauhia na roto i te API. E nehenehe e tauihia na roto i `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Taata hi'opo'a i te tauiraa	`true`	E ite oia i te mau tauiraa o te mau huru `data-gridzy-` e e faaapî noa i te ana'iraa. E ite atoa mai te peu e e faaôhia aore ra e iriti - ê - hia te piha haapiiraa `gridzyAnimated` e mai te peu e e tupu te mau tauiraa `style` . Mai te mea e, e `false` `useOptionAttributes` , e ite noa oia i te mau tauiraa `style` . E nehenehe e tauihia na roto i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Taata hi'opo'a i te tauiraa	`true`	E ite oia i te mau tauiraa o `class` mau huru o te mau hu'ahu'a atoa o te tamarii (mau hoho'a). E mea faufaa no nia i te mau filter. E nehenehe e tauihia na roto i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Taata hi'opo'a i te tauiraa mai te huriraa 2.5.0 mai â	`true`	E ite oia i te mau tauiraa o te mau huru `src` o te mau hoho'a atoa. E mea faufaa ia faaohipahia te reira e te mau buka React aore ra te tahi atu mau buka. E nehenehe e tauihia na roto i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Hi'opo'a mai te huriraa 2.6.0	`true`	E ite oia i te mau tauiraa o te rahi o te hu'ahu'a. Mea faufaa no nia i te opuaraa pahonoraa. (Na mua a'e i te huriraa 2.6.0, ua faaohipahia te hoê taata faaroo no te taui i te rahi o te matapihi) E nehenehe e tauihia na roto i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Tīmata na roto i te rima

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

A haamou i te hi'oraa

Te taa-ê-raa o te haamataraa ia Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Faata'i i te tapura tamarii

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

Faata'i rima i te hoê tamarii hoê

I te rahiraa o te taime, aita e titauhia, maoti noa te mau tupuraa ohie roa.

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

Faata'i i te mau huru

A tapao na e, e mea ti'a ia true te ma'itiraa useOptionAttributes no te reira.

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

Te horo'araa i te puai

I te rahiraa o te taime, aita e titauhia, noa ' tu e ua tapeahia te mau ravea atoa

gridzyInstance.render();

Tāpiri WordPress

Fare buka JavaScript

Ha'api'iraa