Vuhundzuluxeri bya 2.x – Gridzy.Gallery

Website leyi yi hundzuluxeriwe hi ku tisungulela. Loko ku ri na leswi nga erivaleni, hi kombela u languta eka matsalwa ya Xinghezi.

Matirhiselo ya Masungulo

Layicha tifayela ta Gridzy eka sevha ya wena ivi u ti engetela eka webusayiti ya wena (hi ntolovelo eka xiyenge xa nhloko):

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

Engetela khodi ya HTML (kun’wana na kun’wana eka xiyenge xa miri):

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

Hi swona! Xexo i xikombiso lexi tirhaka hi ku helela. Ku hava ku sungula loku engetelekeke loku lavekaka.

Ku lulamisiwa ka swilo

Ndlela yo olova yo lulamisa Gridzy i, ku tirhisa ntsena swihlawulekisi swa HTML. U lava ntsena ku sungula mavito ya swihlawulekisi hi data-gridzy- . Kutani, ku veka nhlawulo wa spaceBetween , engetela ntsena xihlawulekisi xa 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>

Swihlawulekisi Swa Nkoka

	Nkoka wa Xihlawulekisi	Nhlamuselo
`animate`	`true`	Ku kumisisa loko swifaniso leswi hanyaka swi fanele ku tirhisiwa loko giridi yi cinca (xikombiso, loko ku cinca sayizi ya fasitere ra xihlamusela-marito kumbe loko ku vekiwa xisefo).
`layout`	`justified`	Ku hlamusela maendlelo lama tirhisiweke. Gridzy.js 2 yi seketela swivumbeko swimbirhi swo hambana `justified` na `waterfall` . Xin’wana na xin’wana xa swona xi na ti parameter ta xona to engetela ta xihlawuhlawu, leti u nga ti kumaka ehansi ka tafula leri.
`filter`	`*`	Ku boha leswaku hi swihi swifaniso leswi faneleke ku kombisiwa. CSS-selector yin’wana na yin’wana yi nga tirhisiwa tanihi nkoka laha. Hi ntolovelo yi vekiwa hi ku tisungulela hi ku tirhisa `filterControls` (vona nhlawulo lowu landzelaka). Languta eka Swisefo
`filterControls`		Ku kumisisa leswaku hi swihi swiaki swa xivumbeko leswi nga tirhisiwaka ku sefa swifaniso. Xihlawulekisi xin’wana na xin’wana xa CSS, lexi hlawulaka swiaki swa fomo ya HTML, xi nga tirhisiwa tanihi nkoka laha. Languta eka Swisefo
`autoConsiderScrollBars`	`true`	Ku vhumbha ku anama loku nga kona loko ti scroll bars ti humelela kumbe ti nyamalala. Swi tshama swi hlohleteriwa ku yi tshika yi ri `true` handle ka loko automatism leyi yi vanga swiphiqo.

Justified Swihlawulekisi swa Xivumbeko

	Nkoka wa Xihlawulekisi	Nhlamuselo
`autoFontSize`	`false`	Hi ku tisungulela yi pfuxeta nhundzu ya sayizi ya fonto ya bokisi rin’wana na rin’wana hi ku ya hi sayizi ya bokisi ro sungula. Hi ku tiyimisela nhundzu ya sayizi ya fonto a yi vekiwanga hi ku kongoma.
`desiredHeight`	`190`	Ku hlamusela ku tlakuka loku lavekaka ka tilayini ta swiaki. Ku leha ka xiviri ku ta hlayiwa ku ya hi ku anama loku nga kona na swiaki leswi nga eka layini.
`hideOnMissingImage`	`true`	Yi fihla mabokisi lama nga ni swifaniso leswi nga swi kotiki ku layicha.
`spaceBetween`	`4`	Ku hlamusela mpfhuka exikarhi ka swiaki hi tipikseli.
`lastRowAlign` ku sukela eka vuhundzuluxeri bya 2.3.0	`justified`	Ku hlamusela mahanyelo ya layini yo hetelela. Mimpimo leyi pfumeleriweke i `left` , `center` , `right` na `justified` .
`singleRowAlign` ku sukela eka vuhundzuluxeri bya 2.3.0	`justified`	Ku hlamusela mahanyelo loko ku ri na layini yin’we ntsena. Mimpimo leyi pfumeleriweke i `left` , `center` , `right` na `justified` .
~~`fillLastRow`~~ ~~ku sukela eka vuhundzuluxeri bya 2.1.0~~	~~`true`~~	YI SUSIWILE ku sukela eka vuhundzuluxeri bya 2.4.0 (YI TSHURIWILE ku sukela eka vuhundzuluxeri bya 2.3.0 ) Hlela swifaniso leswaku layini yo hetelela yi tshama yi tele hi ku helela. Loko u kunguhata ku engetela swifaniso hi ndlela leyi cinca-cincaka, swi nga va swinene ku herisa leswi. A swi teki vuyelo eka tilayini tin’we (vona `fillSingleRow` ).
`fillSingleRow` ku sukela eka vuhundzuluxeri bya 2.1.0	~~`true`~~	YI SUSIWILE ku sukela eka vuhundzuluxeri bya 2.4.0 (YI TSHURIWILE ku sukela eka vuhundzuluxeri bya 2.3.0 ) Loko ku ri ni layini yin’we ntsena, yi hlela swifaniso leswaku layini yi tshama yi tele hi ku helela. Loko swi nga endleka leswaku u va na xifaniso xin’we kumbe swimbirhi ntsena eka galari, swi nga va swinene ku herisa leswi.

Waterfall Swihlawulekisi swa Xivumbeko

	Nkoka wa Xihlawulekisi	Nhlamuselo
`autoFontSize`	`false`	Hi ku tisungulela yi pfuxeta nhundzu ya sayizi ya fonto ya bokisi rin’wana na rin’wana hi ku ya hi sayizi ya bokisi ro sungula. Hi ku tiyimisela nhundzu ya sayizi ya fonto a yi vekiwanga hi ku kongoma.
`desiredWidth`	`250`	Ku hlamusela ku anama loku lavekaka ka tikholomu. Ku anama ka xiviri ku ta hlayiwa ku ya hi ku anama loku nga kona na nhlayo ya tikholomu.
`hideOnMissingImage`	`true`	Yi fihla mabokisi lama nga ni swifaniso leswi nga swi kotiki ku layicha.
`horizontalOrder`	`false`	Yi hlamusela leswaku swiaki swi vekiwa hi ku kongoma xiaki xin’we eka kholomo yin’wana na yin’wana ku suka eximatsini ku ya exineneni, kutani yi sungula nakambe eka kholomo ya ximatsi swinene leyi tiyimeleke hi yoxe eka kholomo yihi leyi nga na ndhawu yo tala. Hi ku tiyimisela swiaki swi ta tshama swi vekiwile eka kholomo leyi nga na ku tlakuka lokutsongo swinene.
`spaceBetween`	`4`	Ku hlamusela mpfhuka exikarhi ka swiaki hi tipikseli.
`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`.

Swihlawulekisi Swin’wana Swa Le Henhla

Ku kuma swihlawulekisi swa xiyimo xa le henhla, languta API .

HTML ya semantiki

Xivumbeko xo olova xa HTML xa Gridzy hi lexi:

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

Kambe Gridzy yi cinca-cinca swinene naswona u nga tirhisa kwalomu ka xivumbeko xin’wana ni xin’wana xa HTML. Ku ni tinhla ti nga ri tingani ntsena leti hi faneleke hi ti kambisisa:

N’wana un’wana na un’wana wa xiaki xa xikhomela u yimela nchumu wun’we eka giridi.
Havumbirhi elemente ya xikhomela na vana va yona swi nga va muxaka wihi na wihi wa thegi, ku fana na ul na li (ehleketa ntsena ku tlhela u veka swihlawulekisi swa browser).
Loko elemente img yi nga ri n’wana wo kongoma hi yoxe, yi lava tlilasi gridzyImage .

Kutani lexi na xona i xivumbeko xa HTML lexi tirhaka:

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

Ngopfu-ngopfu loko u lava ku engetela switlhokovetselo, u lava xivumbeko xa HTML xa xiyimo xa le henhla. Ku dyondza swo tala hi swona, languta eka Captions & Skins .

Switlhokovetselo & Swikhumba

Loko u lava ku engetela switlhokovetselo eka galari ya wena, u fanele u hlamusela xivumbeko. Hikwalaho, madzovo man’wana lama hlamuseriweke ka ha ri emahlweni ya kumeka. Xikhumba xin’wana na xin’wana lexi vumbiwaka hi fayili ya CSS. U fanele ku engetela fayili leyi ku engetela eka tifayela letikulu ta Gridzy (hi ntolovelo eka xiyenge xa nhloko):

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

Ku tlula kwalaho u lava xivumbeko xa HTML xa xiyimo xa le henhla:

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

Loko u tivutisa hi xivumbeko xa HTML, languta eka Semantic HTML .

Eka xitlhokovetselo u nga tirhisa muxaka wihi na wihi wa thegi, tiyisisa ntsena leswaku yi na tlilasi ya gridzyCaption . Xiphemu xa img lava tlilasi ya gridzyImage .

Xikombiso lexi nga laha henhla xi ku komba nhlonge gridzySkinClassic . Ku tirhisa yin’wana, cinca ntsena vito ra nhlonge hi rin’wana ra leswi:

Ku Katsiwile Swikhumba

	Titlilasi Leti Nga Kona
gridzyXikhumbaBlank masungulo lamanene yo tumbuluxa nhlonge ya wena n’wini xivono xa le mahlweni lexi hanyaka	`gridzySkinBlank`
gridzySkinClassic xivono xa le mahlweni lexi hanyaka	`gridzySkinClassic` `gridzySkinClassicLight`(YI TSHURIWILE ku sukela eka vuhundzuluxeri bya 2.6.0)
gridzySkinFullOverlay xivono xa le mahlweni lexi hanyaka	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(YI TSHURIWILE ku sukela eka vuhundzuluxeri bya 2.6.0)
gridzySkinLift xivono xa le mahlweni lexi hanyaka	`gridzySkinLift` `gridzySkinLiftLight`(YI TSHURIWILE ku sukela eka vuhundzuluxeri bya 2.6.0)
gridzySkinMagnifier ntirho wa zoom a wu katsiwanga xivono xa le mahlweni lexi hanyaka	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(YI TSHURIWILE ku sukela eka vuhundzuluxeri bya 2.6.0)

Ti skin hinkwato leti nga laha henhla ti lava ntsena fayili ya CSS, kambe ku na ti skins to engetela leti tlhelaka ti lava fayili ya JavaScript:

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

	Titlilasi Leti Nga Kona
gridzySkinBlur a swi tirhi eka IE xivono xa le mahlweni lexi hanyaka	`gridzySkinBlur` `gridzySkinBlurLight`(YI TSHURIWILE ku sukela eka vuhundzuluxeri bya 2.6.0)
gridzySkinCard xivono xa le mahlweni lexi hanyaka	`gridzySkinCard` `gridzySkinCardLight`(YI TSHURIWILE ku sukela eka vuhundzuluxeri bya 2.6.0)

Swihlawulekisi swa Nkumba

Ku sukela eka version 2.6.0 ku na Ti Options to configure ti skins leti akiweke endzeni. Kuya hi nhlonge yokarhi unga veka muhlovo wa le ndzhaku, muvala wa tsalwa na ndzhuti wa tsalwa. U fanele ntsena ku tirhisa swihlawulekisi swa ntolovelo swa CSS tanihilaha u nga swi vonaka hakona laha:

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

Languta swilo leswi cinca-cincaka leswi seketeriwaka na mimpimo ya xiviri ya nhlonge yin’wana na yin’wana laha:

gridzySkinClassic

Ku cinca-cinca	Nkoka wa Xihlawulekisi	Marungula
`--background`	`rgba(0, 0, 0, .7)`	yi pfumelela nkoka wihi na wihi wa le ndzhaku wa CSS
`--color`	`rgb(255, 255, 255)`	yi pfumelela nkoka wihi na wihi wa muvala wa CSS
`--text-shadow`	`none`	yi pfumelela ntikelo wihi na wihi wa tsalwa-ndzhuti wa CSS

gridzySkinFullOverlay

Ku cinca-cinca	Nkoka wa Xihlawulekisi	Marungula
`--background`	`rgba(0, 0, 0, .7)`	yi pfumelela nkoka wihi na wihi wa le ndzhaku wa CSS
`--color`	`rgb(255, 255, 255)`	yi pfumelela nkoka wihi na wihi wa muvala wa CSS
`--text-shadow`	`none`	yi pfumelela ntikelo wihi na wihi wa tsalwa-ndzhuti wa CSS

gridzySkinLift

Ku cinca-cinca	Nkoka wa Xihlawulekisi	Marungula
`--background`	`rgba(0, 0, 0, .7)`	yi pfumelela nkoka wihi na wihi wa le ndzhaku wa CSS
`--color`	`rgb(255, 255, 255)`	yi pfumelela nkoka wihi na wihi wa muvala wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	yi pfumelela ntikelo wihi na wihi wa tsalwa-ndzhuti wa CSS

gridzySkinMagnifier

Ku cinca-cinca	Nkoka wa Xihlawulekisi	Marungula
`--background`	`rgba(0, 0, 0, .7)`	yi pfumelela nkoka wihi na wihi wa le ndzhaku wa CSS
`--color`	`rgb(255, 255, 255)`	yi pfumelela nkoka wihi na wihi wa muvala wa CSS

Xikhumba lexi a xi seketeli --text-shadow

gridzySkinBlur

Ku cinca-cinca	Nkoka wa Xihlawulekisi	Marungula
`--background`	`rgba(0, 0, 0, .7)`	yi pfumelela nkoka wihi na wihi wa le ndzhaku wa CSS
`--color`	`rgb(255, 255, 255)`	yi pfumelela nkoka wihi na wihi wa muvala wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	yi pfumelela ntikelo wihi na wihi wa tsalwa-ndzhuti wa CSS

gridzySkinCard

Ku cinca-cinca	Nkoka wa Xihlawulekisi	Marungula
`--background`	`rgba(0, 0, 0, 1)`	yi pfumelela nkoka wihi na wihi wa le ndzhaku wa CSS
`--color`	`rgb(255, 255, 255)`	yi pfumelela nkoka wihi na wihi wa muvala wa CSS
`--text-shadow`	`none`	yi pfumelela ntikelo wihi na wihi wa tsalwa-ndzhuti wa CSS

Swikhumba hinkwaswo leswi hlamuseriweke ka ha ri emahlweni swi seketela ntsena switlhokovetselo swo olova swa matsalwa. U nga endla madzovo ya wena swinene ni lama rharhanganeke swinene. Hi kombela u languta eka Style Gridzy .

Xitayili xa Gridzy

Loko ku nga ri na nhlonge leyi hlamuseriweke ka ha ri emahlweni leyi ringanaka ni swilaveko swa wena, u nga endla xitayili xa wena.

Ndlela yo olova i ku rhanga hi ku kopa nhlonge leyi nga kona ivi u yi pfumelelana ni swilaveko swa wena. gridzySkinBlank ya nhlonge leyi hlamuseriweke ka ha ri emahlweni hi ntolovelo yi ta nyika masungulo lamanene xikan’we na matsalwa lamanene eka fayili ya 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;
}

Eka fayili ya CSS u ta kuma titlilasi ta gridzySkinBlank , gridzyImage na gridzyCaption . Gridzy hi yoxe a yi lavi titlilasi leti. Ti tirhisiwa ntsena eka ku endla switayili naswona hikokwalaho unga ti susa kumbe ku ti thya vito lerintshwa loko u switsakela.

Ku engetela kwalaho u ta kuma tlilasi ya CSS gridzyItem . Gridzy yi veka tlilasi leyi hi ku tisungulela eka vana hinkwavo vo kongoma va elemente ya xikhomela-ndhawu lexikulu. Kutani, u nga tirhisa tlilasi leyi ku xitayili xa swilo swa galari ya wena.

Miehleketo Swilo Swa Nkoka

Leswi nga endzeni ka nchumu wolowo swi fanele swi hlamula hi ku helela. Xiya leswaku mpimo wa elemente wu ta cinca hakunene. Tirhisa mimpimo ya tiphesente ematshan’wini ya mimpimo ya tipikseli. Naswona languta eka nhlawulo wa layout ya Gridzy autoFontSize , leyi bohaka sayizi ya fonto eka sayizi ya bokisi ra nchumu.
Nchumu wun’wana ni wun’wana wu fanele wu va ni mpimo wa xivumbeko lowu hlamuseriweke kahle. Nhlayo ya xivumbeko xa nchumu a yi nge pfuki yi cincile naswona ya laveka ku hlayela giridi. Kutani loko nchumu wo karhi wu nga ri na hi ku tisungulela aspect ratio leyi hlamuseriweke kahle, wu hlamusele ka ha ri emahlweni hi voko (xikombiso hi ku tirhisa css).

Eka swiyimo swin’wana, swi nga olova ku xitayili xa leswi nga endzeni ka swilo Gridzy yi nga si sungula. Hi ku olova susa tlilasi ya gridzy kumbe fayili ya javascript ya Gridzy swa xinkarhana eka leswi.

Hi swona! Sweswo hi swona ntsena leswi u swi lavaka leswaku u aka nhlonge ya wena n’wini. Vunyingi bya madzovo lawa ya hlamuseriweke ka ha ri emahlweni a ya tirhisi swo tala ku tlula leswi.

Kambe ku nga va na swin'wana loko u swi tsakela ...

Swikhumba swa le Henhla

Gridzy yi tirhisa titlilasi to tala ta CSS ku tlula gridzyItem ntsena . Vunyingi bya tona ti ta setiwa hi ku tisungulela naswona u nga ti tirhisa ku endla switayili na wena.

Titlilasi ta Swikhomela-ndhawu leswikulu

Vito ra Tlilasi	Nhlamuselo
`gridzy` ku veka hi voko	Gridzy hi yoxe yi kuma swiaki leswi nga na tlilasi leyi ivi yi swi sungula.
`gridzyAnimated`	Yi ta vekiwa hi ku tisungulela loko option `animate` yi ri `true` . Loko tlilasi leyi yi vekiwile hi voko, nhlawulo wa `animate` wu ta tisungulela wu kuma `true` na wona (handle ka loko wu vekiwile hi ku kongoma eka `false` ).

Titlilasi ta Swilo

Vito ra Tlilasi	Nhlamuselo
`gridzyItem`	Yi ta vekiwa hi ku hatlisa loko nchumu wu sungula endlelo ro sungula. A yi nge pfuki yi susiwile.
`gridzyItemInitializing`	Yi ta vekiwa hi ku hatlisa loko nchumu wu sungula endlelo ro sungula. Yi ta siviwa hi `gridzyItemReady` hi ku hatlisa loko nchumu wu sunguriwile hi ku helela. A swi vuli leswaku swifaniso swi layichiwile hi ku helela (vona `gridzyItemLoading` ), kambe nchumu wu lunghekele ku vonaka.
`gridzyItemReady`	Yi ta siva `gridzyItemInitializing` hi ku hatlisa loko nchumu wu sunguriwile hi ku helela. A yi nge pfuki yi susiwile. A swi vuli leswaku swifaniso swi layichiwile hi ku helela (vona `gridzyItemComplete` ), kambe nchumu wu lunghekele ku vonaka.
`gridzyItemLoading`	Yi ta vekiwa hi ku hatlisa loko nchumu wu sungula endlelo ro sungula. Yi ta siviwa hi `gridzyItemComplete` hi ku hatlisa loko swifaniso leswi nga endzeni (hi ntolovelo xin’we ntsena) swi layichiwile hi ku helela.
`gridzyItemComplete`	Yi ta siva `gridzyItemLoading` hi ku hatlisa loko swifaniso leswi nga endzeni (hi ntolovelo xin’we ntsena) swi layichiwile hi ku helela. A yi nge pfuki yi susiwile.
`gridzyItemInitialToVisible`	Yi ta vekiwa hi ku hatlisa loko nchumu wolowo wu sungula ku humelela ro sungula. Yi ta susiwa hi ku hatlisa loko nchumu wolowo wu vonaka hi ku helela.
`gridzyItemVisible`	Yi ta vekiwa hi ku hatlisa loko nchumu wolowo wu vonaka hi ku helela. Yi ta susiwa hi ku hatlisa loko nchumu wolowo wu sungula ku nyamalala.
`gridzyItemVisibleToHidden`	Yi ta vekiwa hi ku hatlisa loko nchumu wolowo wu sungula ku nyamalala. Yi ta susiwa hi ku hatlisa loko nchumu wolowo wu fihliwile hi ku helela.
`gridzyItemHidden`	Yi ta vekiwa hi ku hatlisa loko nchumu wolowo wu fihliwile hi ku helela. Yi ta susiwa hi ku hatlisa loko nchumu wolowo wu sungula ku humelela.
`gridzyItemHiddenToVisible`	Yi ta vekiwa hi ku hatlisa loko nchumu wu sungula ku humelela (handle ka ku humelela ro sungula – vona tlilasi ya `gridzyItemInitialToVisible` ). Yi ta susiwa hi ku hatlisa loko nchumu wolowo wu vonaka hi ku helela.
`gridzyItemVisibleToVisible`	Yi ta vekiwa hi ku hatlisa loko nchumu wo karhi eka giridi wu cincile, kambe nchumu hi woxe a wu ri naswona wu tshama wu vonaka. Yi ta susiwa hi ku hatlisa loko ku cinca animation yi herile.

Hi ku tiyimisela xikombiso xa phurosese na swifaniso leswi hanyaka swa swifaniso leswi humelelaka na leswi nyamalala swi hlamuseriwile ka ha ri emahlweni hi fayili leyikulu ya CSS ya Gridzy.

Hi titlilasi leti ta CSS leti boxiweke laha henhla u nga ha xitayili xikombiso xa wena xa phurosese na swifaniso leswi hanyaka. Dare a look into the Gridzy main CSS file, ku twisisa leswi u nga ta boheka ku swi tlula. Ku hava ku chava, hinkwaswo swi tsariwile kahle kwalaho.

Optimize Ku Layicha

Loko u tirhisa swifaniso swo tala, swi nga va swinene ku pfuna Gridzy ku aka giridi hi ku hatlisa.

Sivela Ku Tlula Swifaniso

Gridzy yi lava hi ku hetiseka aspect ratio ya swifaniso hinkwaswo ku hlayela grid. Mhaka leyi yi endla leswaku ku tlula swiaki loko swifaniso swin’wana swi lunghekile kasi swin’wana swi nga lunghekanga. Loko ku ri ni swifaniso swo tala, vuyelo lebyi byi nga ha hlundzukisa swinene.

Ku sivela mahanyelo lawa, veka ntsena swihlawulekisi swa width na height eka swiaki hinkwaswo img . I swa nkoka ku veka mimpimo leyinene ya xifaniso xin’wana na xin’wana, handle ka sweswo swifaniso a swi ta soholotiwile. Mimpimo leyinene i ku anama ka masungulo na ku tlakuka ka xifaniso lexi faneleke:

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

Endzhaku ka sweswo Gridzy a nga hlayela giridi hi ku hatlisa handle ko lava ku tiva vukulu bya xiviri bya swifaniso.

Ku Layicha ka Vulolo

Ku layicha ntsena swifaniso leswi nga eka xivono lexi vonakaka, landzelela ntsena magoza lawa:

Nghenisa swihlawulekisi width na height tanihilaha swi hlamuseriweke hakona laha henhla (tiyisisa leswaku u tirhisa mimpimo leyinene) .
Cinca swihlawulekisi hinkwaswo src hi data-gridzylazysrc tanihilaha swi kombisiweke hakona laha hansi (loko u ri na swihlawulekisi srcset na swona, swi siva hi 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>

Endzhaku ka magoza lawa swifaniso swi ta layicha hi ku hatlisa loko swi ri ekusuhi kumbe endzeni ka xivono.

Xikombiso xa Maendlelo

Xikombiso xa endlelo i xifaniso lexitsongo lexi nga ni swifaniso leswi hanyaka lexi humelelaka loko xifaniso xi ri karhi xi layicha. Loko u tirhisa ti captions & skins , xikombiso xa phurosese xi ta kombisiwa hi ku tisungulela. Handle ka sweswo u lava mindzulamiso yo karhi:

Veka elemente yin’wana na yin’wana ya img eka elemente div
(kumbe eka elemente yin’wana na yin’wana – vona HTML ya semantiki ku kuma swo tala)
Engetelani tlilasi ya gridzyImage eka elemente yin’wana na yin’wana img

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

Endzhaku ka sweswo u fanele ku vona swikombiso swa maendlelo loko swifaniso swi teka nkarhi ku layicha.

Swisefo

Tifiltara eka Gridzy ti olovile swinene kambe ti na matimba. Ku nga khathariseki leswaku u lava muxaka wihi wa xisefo, swi nga ha endleka swinene leswaku ya lemuka. Leswi u swi lavaka i, CSS nyana na swiaki swi nga ri swingani swa fomo ya HTML ...

Hi lexi xikombiso lexi tirhaka:

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

A Hi Yi Akeni Goza hi Goza

1. Xo sungula hi lava xivumbeko xa HTML xa ntolovelo xa Gridzy naswona hi veka mavito ya titlilasi eka swilo hinkwaswo swa galari leswaku hi ta kota ku swi sefa endzhaku ka sweswo

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

Eka xikombiso lexi hi tirhisa ntsena tlilasi yin’we eka elemente yin’wana na yin’wana. Kambe u nga ha tlhela u veka titlilasi to tala ta xiaki xin’we, loko xiaki xexo xi fanele ku kumiwa hi ku tirhisa swisefo swo tala.

2. Kutani hi engetela swikomba-nkarhi swin’wana leswi hi nga cincaka swisefo ha swona

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

Ematshan’wini ya swikomba-nkarhi, u nga ha tlhela u tirhisa swiaki swin’wana swa fomo ku fana na mabokisi yo kambela, swikomba-nkarhi swa xiya-ni-moya, tinsimu to hlawula na swin’wana.

Hilaha u nga swi vonaka hakona, mimpimo ya swikomba-nkarhi i swihlawulekisi swa CSS leswi tolovelekeke. Hi ku hatlisa loko hi heta, ku tsindziyela eka buti yo tano swi ta kombisa swifaniso leswi fambisanaka ni xihlawulekisi xexo xa CSS. Hi tlhelo ra xithekiniki yi veka ntsena nhlawulo wa filter eka ntikelo lowu.

U nga ha tlhela u tirhisa swihlawulekisi leswi rharhanganeke swinene. Xikombiso :not(.animals) na yona a yi ta tirha, xikan'we na .animals.people na .animals, .people .

3. Xo hetelela, hi hlanganisa swikomba-nkarhi eka xigwitsirisi xa div ivi hi swi boha eka galari ya Gridzy, hi ku veka nhlawulo wa 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>

Hilaha u nga swi vonaka hakona, hi tlhela hi tirhisa xihlawulekisi xa CSS eka nhlawulo wa filterControls . Xikhomela-ndhawu xa div lexi nga na xihlawulekisi id xi tirha ntsena ku endla leswaku swikomba-nkarhi swi olova ku swi hlawula hi ku tirhisa xihlawulekisi xexo xa CSS.

Hi swona!

Loko u tsakela xitshunxo xa JavaScript, languta API .

API

Hambi leswi Gridzy yi nga na API ya yona, swilo swo tala swi nga endliwa handle ka yona, ntsena hi ku tirhisa DOM. Gridzy u ta swi xiya kutani a lulamisa gridi. Kambe ku tlhela ku va na API ya matimba swinene ...

Ku tirhisa DOM hi ndlela yo biha

Eka ti manipulations hinkwato ta Document Object Model (DOM) hi rhanga hi lava elemente ya container:

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

Engetelani Swifaniso

I swa nkoka ku aka hi ku hetiseka no tata elemente leyintshwa ya n’wana u nga si yi engetela eka elemente ya xikhomela. Handle ka sweswo Gridzy a nga swi koti ku vona swipimelo leswi faneleke.

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

Susa Swifaniso

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

Cinca Swihlawulekisi

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

Swin'wana mayelana na ku tirhisa DOM u nga swi kuma eka MDN web docs . Ku tlhela ku va na Xingheniso xa DOM lexi kumekaka.

API ya vulawuri

Ku tirhisa API, hi rhanga hi lava xikombiso xa Gridzy, lexi bohiweke eka elemente ya xikhomela xa Gridzy:

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

Kuma Nhlawulo

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

Kuma Swihlawulekisi Hinkwaswo

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

Seta Swihlawulekisi

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

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

Tirhisa Xisefo

Ku tirhisa xisefo i ku veka ntsena filter nhlawulo lexi nga vaka xihlawulekisi xihi na xihi xa CSS lexi tirhaka:

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

Engetela Mintirho ya Callback

YI TSANDZERIWILE ku sukela eka vuhundzuluxeri bya 2.4.0
Tirhisa Swiendlakalo swa manguva lawa na leswi cinca-cincaka swinene ematshan’wini ya sweswo. Vona xiyenge lexi landzelaka ku kuma vuxokoxoko.

~~Gridzy.js 2 yi seketela swihlawulekisi swin’wana swa mintirho ya callback. Swi nga vekiwa ntsena hi ku tirhisa API ya vulawuri, kambe ku fana na swihlawulekisi swin’wana:~~

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

	~~Nhlamuselo~~
~~`onBeforeOptionsChanged`~~	~~Ntirho wa callback lowu vitaniwaka hi ku kongoma emahlweni ko veka swihlawulekisi.~~
~~`onOptionsChanged`~~	~~Ntirho wa callback lowu vitaniwaka hi ku kongoma endzhaku ko veka swihlawulekisi.~~
~~`onBeforeRender`~~	~~Ntirho wa callback lowu vitaniwaka hi ku kongoma emahlweni ko hundziseriwa.~~
~~`onRender`~~	~~Ntirho wa callback lowu vitaniwaka hi ku kongoma endzhaku ka ku hundzuluxela.~~

Tirhisa Swiendlakalo

ku sukela eka vuhundzuluxeri bya 2.4.0

U nga tirhisa swiendlakalo swa Gridzy hi ku kongoma ku fana na swiendlakalo swa ntolovelo swa 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.
});

Swiendlakalo swin’wana swi duvuriwa eka xiaki xa xikhomela xa Gridzy naswona swiendlakalo swin’wana swi duvuriwa eka swiaki swa nchumu wun’we endzeni ka xiaki xa xikhomela.

Swiendlakalo leswi duvuriweke eka elemente ya xigwitsirisi xa Gridzy:

	Nhlamuselo
`gridzyBeforeInit`	Ndzilo emahlweni ka ku sunguriwa ka gallery.
`gridzyInit`	Ndzilo endzhaku ka ku sunguriwa ka gallery.
`gridzyBeforeOptionsChanged`	Fires before ku veka swihlawulekisi.
`gridzyOptionsChanged`	Fires endzhaku ko veka swihlawulekisi.
`gridzyBeforeRender`	Ndzilo wu nga si hundzuluxela.
`gridzyRender`	Ndzilo endzhaku ka ku hundzuluxela.

Loko u hundza eka swiendlakalo swihi na swihi laha, hi kombela u rhumela xikombelo xa nseketelo .

event.target yi nyika xiphemu xa xikhomela xa Gridzy.
event.detail.instance yi nyika xikombiso xa Gridzy.

Swiendlakalo leswi duvuriweke eka swiaki swa swilo:

	Nhlamuselo
`gridzyItemBeforeInit`	Ku pfurha emahlweni ka ku sunguriwa ka nchumu.
`gridzyItemInit`	Ku pfurha endzhaku ka ku sunguriwa ka nchumu.
`gridzyItemLoading`	Yi pfurha loko nchumu wu sungula ku layicha.
`gridzyItemReady`	Ku pfurha loko nchumu wu lunghekele ku hlayela ka giridi. Kutani aspect ratio ya tiviwa, kambe xifaniso xi nga ha va xa ha layicha.
`gridzyItemComplete`	Yi pfurha loko xifaniso xa nchumu xi layichiwile hi ku helela.

Loko u hundza eka swiendlakalo swihi na swihi laha, hi kombela u rhumela xikombelo xa nseketelo .

event.target yi nyika xiphemu xa nchumu lexi faneleke.
event.detail.instance yi nyika xikombiso xa Gridzy.

API – Misava hinkwayo

Kuna mintirho yin’wana leyi tiyimeleke hi yoxe eka swikombiso swa Gridzy. Kutani a swi bohi leswaku hi kuma xikombiso emahlweni ka sweswo.

Kuma Nhlawulo wa Xihlawulekisi

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

Kuma Swihlawulekisi Hinkwaswo Swa Xihlawulekisi

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

Seta Swihlawulekisi swa Xihlawulekisi

Leswi a swi veki swihlawulekisi swa swikombiso hinkwaswo swa Gridzy leswi se swi sunguriweke, kambe swi hlamusela xisekelo xa swikombiso leswintshwa. Kambe, loko nhlawulo wa xikombiso lexi nga kona wu ta tlhela wu vekiwa hi ku tirhisa ntikelo wa null , wu ta tirhisa ntikelo lowuntshwa wa xiviri.

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

U nga tirhisa leswi ku veka swihlawulekisi emisaveni hinkwayo, loko u swi vitana DOM yi nga si lungheka. Kutani a wu nga ta lava ku veka swihlawulekisi tanihi swihlawulekisi tanihi swihlawulekisi.

Swilo leswi tirhaka hi ku tirhisa michini

Loko ntsena ti-automatism hinkwato ta Gridzy.js 2 ti tirha, a ku na xilaveko xa tindlela leti nga laha hansi. Kambe ti automatisms tinga timiwa kuva ti tirhisa Gridzy hi ndlela ya ndhavuko swinene:

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

Swin’wana swa swihlawulekisi leswi a swi nge vekiwi hi ku tirhisa swihlawulekisi data-gridzy- kumbe hi ku tirhisa setOptions() , hikwalaho ka swivangelo leswi twisisekaka:

	Nkoka wa Xihlawulekisi	Nhlamuselo
`autoInitOnDomReady`	`true`	Ku kuma swiaki leswi nga na `gridzy` ya tlilasi eka ku layicha ka pheji no swi sungula. Swi vekiwa hi ku tirhisa `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver ya ku cinca ka swiaki swa xitekela	`true`	Ku kuma swiaki leswintshwa hi `gridzy` ya tlilasi hi ku hatlisa loko swi humelela eka DOM ivi a swi sungula. (xikombiso eka ku tirhisa ku cinca ka matluka) Swi vekiwa hi ku tirhisa `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver ya ku cinca ka swiaki swa xitekela	`true`	Ku kuma loko swiaki swa vana (swifaniso) swi engeteriwile kumbe ku susiwa, naswona yi pfuxeta giridi hi ku tisungulela. Swi vekiwa hi ku tirhisa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Ku hlamusela loko swihlawulekisi swa `data-gridzy-` swi tirhisiwa hi ku angarhela kumbe e-e. Loko leswi swi ri `false` swihlawulekisi swi nga vekiwa ntsena hi ku tirhisa API ya vulawuri. Swi vekiwa hi ku tirhisa `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver ya ku cinca ka swiaki swa xitekela	`true`	Ku kuma ku cinca ka swihlawulekisi `data-gridzy-` , naswona yi pfuxeta giridi hi ku tisungulela. Nakambe yi kuma loko tlilasi ya `gridzyAnimated` yi engeteriwile kumbe ku susiwa na loko ku cinca ka xihlawulekisi `style` ku humelela. Loko `useOptionAttributes` yi ri `false` , yi kuma ntsena ku cinca ka xihlawulekisi `style` . Swi vekiwa hi ku tirhisa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver ya ku cinca ka swiaki swa xitekela	`true`	Ku kuma ku cinca ka swihlawulekisi swa `class` swa swiaki hinkwaswo swa n’wana (swifaniso). Swi fanerile mayelana na swisefo. Swi vekiwa hi ku tirhisa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver ya ku cinca ka swiaki swa xitekela ku sukela eka vuhundzuluxeri bya 2.5.0	`true`	Ku kuma ku cinca ka swihlawulekisi `src` swa swifaniso hinkwaswo. Swi fanerile loko swi tirhisiwa na React kumbe tilayiburari to fana na tona. Swi vekiwa hi ku tirhisa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Cinca Vukulu bya Xihlamusela-marito ku sukela eka vuhundzuluxeri bya 2.6.0	`true`	Ku kuma ku cinca ka ku anama ka elemente. Swi fanerile mayelana na dizayini leyi hlamulaka. (Emahlweni ka vuhundzuluxeri bya 2.6.0 ku tirhisiwa muyingiseri wa xiendlakalo xo cinca sayizi ya fasitere) Swi vekiwa hi ku tirhisa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Sungula Hi Voko

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

Lovisa Xikombiso

Hi ku olova, leswi hambaneke ni ku sungula Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sync Nxaxamelo wa Vana hi Voko

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

Fambisanisa Xiphemu xa N’wana un’we hi Voko

Hi ntolovelo a swi laveki, handle ka swiyimo leswi nga tolovelekangiki swinene.

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

Hlanganisa Swihlawulekisi Hi Voko

Xiya leswaku nhlawulo wa useOptionAttributes wu fanele ku va true eka leswi.

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

Ku Hundzuluxela ka Matimba

Hi ntolovelo a swi laveki, hambiloko ti- automatism hinkwato ti timiwile

gridzyInstance.render();