Vhesheni 2.x – Gridzy.Gallery

Webusaithi yo ṱalutshedzelwa nga vhuḓiitisi. Arali hu na zwine zwa sa vhe khagala, kha vha sedze maṅwalo a Luisimane.

Tshumiso ya Mutheo

Kha vha dzhenise faila dza Gridzy kha server yavho vha dzi engedze kha website yavho (kanzhi kha tshipiḓa tsha ṱhoho):

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

Engedza khoudu ya HTML (huṅwe na huṅwe kha tshipiḓa tsha muvhili):

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

Ndi zwenezwo! Ndi tsumbo i shumaho nga vhuḓalo. A hu ṱoḓei u thoma ho engedzeaho.

Nzudzanyo

Nḓila i leluwaho ya u dzudzanya Gridzy ndi, u sokou shumisa zwivhumbeo zwa HTML. U fanela u thoma fhedzi madzina a khetho nga data-gridzy- . Ngauralo, u setha khetho spaceBetween , engedzani pfaneleo ya 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>

Khetho Khulwane

	Mutengo wo ḓiimiselaho	Ṱhalutshedzo
`animate`	`true`	I ṱola arali zwifanyiso zwi tshi fanela u shumiswa musi giridi i tshi shanduka (sa tsumbo, musi hu tshi shandukiswa vhuhulwane ha fasiṱere ḽa burauza kana musi hu tshi vhewa tshiṱuḓi).
`layout`	`justified`	U ṱalusa nzudzanyo yo shumiswaho. Gridzy.js 2 i tikedza `justified` mbili dzo `waterfall` . Muṅwe na muṅwe wavho u na paramitha dzawe dza khetho dzo engedzwaho, dzine na nga dzi wana fhasi ha thebulu iyi.
`filter`	`*`	I ṱola uri ndi zwifanyiso zwifhio zwine zwa fanela u sumbedzwa. CSS-selector iṅwe na iṅwe i nga shumiswa sa ndeme hafha. Kanzhi i vhewa nga vhuḓiitisi nga kha `filterControls` (vhona khetho i tevhelaho). Kha vha sedze zwiṱuṱuwedzi
`filterControls`		I ṱola uri ndi zwithu zwifhio zwa fomo zwine zwa nga shumiswa u sefa zwifanyiso. Mukhethi wa CSS muṅwe na muṅwe, ane a nanga zwipiḓa zwa fomo ya HTML, a nga shumiswa sa ndeme hafha. Kha vha sedze zwiṱuṱuwedzi
`autoConsiderScrollBars`	`true`	U bvumba vhuphara vhu re hone arali dzi scroll bar dza bvelela kana dza ngalangala. Zwi dzulela u themendelwa u zwi litsha kha `true` nga nnḓa ha musi u ḓiitela uhu hu tshi vhanga thaidzo.

Justified dza u dzudzanya

	Mutengo wo ḓiimiselaho	Ṱhalutshedzo
`autoFontSize`	`false`	I ḓi-vhuyedzedza nga vhuḓiitisi pfaneleo ya vhuhulwane ha fonto ya bogisi ḽiṅwe na ḽiṅwe ho sedzwa vhuhulwane ha bogisi ḽa u thoma. Nga mvelele pfaneleo ya vhuhulwane ha fonto a yo ngo vhewa zwavhuḓi.
`desiredHeight`	`190`	I ṱalusa vhulapfu vhu ṱoḓeaho ha mitevhe ya zwithu. Vhulapfu ha vhukuma vhu ḓo vhaliwa zwi tshi bva kha vhuphara vhune ha vha hone na zwithu zwine zwa vha kha mutevhe.
`hideOnMissingImage`	`true`	I dzumba mabogisi ane a vha na zwifanyiso zwine zwa nga si kone u ḓadzwa.
`spaceBetween`	`4`	I ṱalusa tshikhala vhukati ha zwithu nga pixels.
`lastRowAlign` u bva kha mbekanyamushumo ya 2.3.0	`justified`	I ṱalusa vhuḓifari ha mutevhe wa u fhedzisela. Mitengo yo tendelwaho ndi `left` , `center` , `right` na `justified` .
`singleRowAlign` u bva kha mbekanyamushumo ya 2.3.0	`justified`	I ṱalusa vhuḓifari arali hu na mutevhe muthihi fhedzi. Mitengo yo tendelwaho ndi `left` , `center` , `right` na `justified` .
~~`fillLastRow`~~ ~~u bva kha mbekanyamushumo ya 2.1.0~~	~~`true`~~	YO BVISWA ubva kha vhesheni ya 2.4.0 (ZWO ṰANGANEDZWA u bva kha vhesheni ya 2.3.0 ) U dzudzanya zwifanyiso u itela uri mutevhe wa u fhedzisela u dzule wo ḓala tshoṱhe. Arali ni tshi dzudzanya u engedza zwifanyiso nga nḓila i bvelelaho, zwi nga vha muhumbulo wavhuḓi u dzima hezwi. A zwi dzhii mvelelo kha mithara nthihi (vhona `fillSingleRow` ).
`fillSingleRow` u bva kha mbekanyamushumo ya 2.1.0	~~`true`~~	YO BVISWA ubva kha vhesheni ya 2.4.0 (ZWO ṰANGANEDZWA u bva kha vhesheni ya 2.3.0 ) Arali hu na mutevhe muthihi fhedzi, i dzudzanya zwifanyiso u itela uri mutevhe u dzule wo ḓala tshoṱhe. Arali zwi tshi nga itea uri ni vhe na tshifanyiso tshithihi kana zwivhili fhedzi kha gallery, zwi nga vha muhumbulo wavhuḓi u dzima hezwi.

Waterfall

	Mutengo wo ḓiimiselaho	Ṱhalutshedzo
`autoFontSize`	`false`	I ḓi-vhuyedzedza nga vhuḓiitisi pfaneleo ya vhuhulwane ha fonto ya bogisi ḽiṅwe na ḽiṅwe ho sedzwa vhuhulwane ha bogisi ḽa u thoma. Nga mvelele pfaneleo ya vhuhulwane ha fonto a yo ngo vhewa zwavhuḓi.
`desiredWidth`	`250`	I ṱalusa vhuphara vhu ṱoḓeaho ha khoḽomo. Vhuphara ha vhukuma vhu ḓo vhalelwa zwi tshi bva kha vhuphara vhune ha vha hone na tshivhalo tsha dzi kholomo.
`hideOnMissingImage`	`true`	I dzumba mabogisi ane a vha na zwifanyiso zwine zwa nga si kone u ḓadzwa.
`horizontalOrder`	`false`	I ṱalusa uri zwipiḓa zwo vhewa nga nḓila yo khwaṱhaho tshipiḓa tshithihi kha khoḽomu iṅwe na iṅwe u bva kha tsha monde u ya kha tsha u ḽa, nga murahu ha zwenezwo zwi thoma hafhu kha khoḽomu ya tsha monde vhukuma yo ḓiimisaho nga yoṱhe kha khoḽomu ifhio ine ya vha na fhethu huhulwane. Nga nḓila yo ḓoweleaho zwithu zwi ḓo dzula zwo vhewa kha khoḽomu ine ya vha na vhulapfu vhuṱukusa.
`spaceBetween`	`4`	I ṱalusa tshikhala vhukati ha zwithu nga 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`.

Dziṅwe Khetho dza Nṱha

U wana dziṅwe khetho dza mvelaphanḓa, sedzani API .

HTML ya semantiki

Tshivhumbeo tsha HTML tsho leluwaho tsha Gridzy ndi hetshi:

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

Naho zwo ralo, Gridzy i a tendelana vhukuma nahone u nga shumisa hu ṱoḓaho u vha tshiṅwe na tshiṅwe tshivhumbeo tsha HTML. Hu na mbuno dzi si gathi fhedzi dzine ra fanela u dzi ṱhogomela:

Ṅwana muṅwe na muṅwe wa tshipiḓa tsha khontheina u imela tshithu tshithihi kha giridi.
Zwoṱhe tshipiḓa tsha khontheina na vhana vhatsho zwi nga vha lushaka luṅwe na luṅwe lwa thegi, u fana na ul na li (fhedzi humbulani u vusuludza zwithu zwo ḓitikaho ngazwo zwa burauza).
Arali tshipiḓa tsha img tshi si ṅwana o livhaho tshone tshiṋe, tshi ṱoḓa kiḽasi ya gridzyImage .

Ngauralo hezwi zwi dovha zwa vha tshivhumbeo tsha HTML tshi shumaho:

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

Zwihuluhulu arali ni tshi ṱoḓa u engedza zwiṱoho, ni ṱoḓa tshivhumbeo tsha HTML tsha nṱhesa. U guda zwo engedzeaho nga hazwo, sedzani kha Captions & Skins .

Zwiṱoho & Makumba

Arali ni tshi ṱoḓa u engedza zwiṱoho kha gaḽeri yaṋu, ni fanela u ṱalusa mbonalo. Nga zwenezwo, hu na maṅwe makumba o ṱalutshedzwaho hu tshee nga phanḓa. Lukanda luṅwe na luṅwe lu re na faela ya CSS. U fanela u engedza faela iyi nga nnḓa ha faela khulwane dza Gridzy (kanzhi kha tshipiḓa tsha ṱhoho):

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

Zwiṅwe hafhu ni ṱoḓa tshivhumbeo tsha HTML tsha nṱhesa:

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

Arali ni tshi khou ḓivhudzisa nga ha tshivhumbeo tsha HTML, sedzani Semantic HTML .

Kha ṱhalutshedzo ni nga shumisa lushaka luṅwe na luṅwe lwa thegi, khwaṱhisedzani uri i na kiḽasi ya gridzyCaption . Elemente img i ṱoḓa kiḽasi ya gridzyImage .

Tsumbo i re afho nṱha i sumbedza gridzySkinClassic . U shumisa inwe yo fhambanaho, kha vha bvise dzina la lukanda nga linwe la hedzi:

Makumba o katelwaho

	Kiḽasi dzi re hone
Lukanda lu si na tshithu ndi mathomo avhuḓi a u sika lukanda lwaṋu . mbonalo ya vhutshilo	`gridzySkinBlank`
gridzySkinClassic mbonalo ya vhutshilo	`gridzySkinClassic` `gridzySkinClassicLight`(YO ṰANGANEDZWA u bva kha vhesheni ya 2.6.0)
gridzySkinFullOverlay mbonalo ya vhutshilo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(YO ṰANGANEDZWA u bva kha vhesheni ya 2.6.0)
gridzySkinLift mbonalo ya vhutshilo	`gridzySkinLift` `gridzySkinLiftLight`(YO ṰANGANEDZWA u bva kha vhesheni ya 2.6.0)
gridzySkinMagnifier mushumo wa u ṱanḓavhudza a wo ngo katelwa mbonalo ya vhutshilo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(YO ṰANGANEDZWA u bva kha vhesheni ya 2.6.0)

Makumba oṱhe a re afho nṱha a ṱoḓa fhedzi faela ya CSS, fhedzi hu na makumba o engedzeaho ane a dovha a ṱoḓa faela ya JavaScript:

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

	Kiḽasi dzi re hone
gridzySkinBlur a zwi shumi kha IE mbonalo ya vhutshilo	`gridzySkinBlur` `gridzySkinBlurLight`(YO ṰANGANEDZWA u bva kha vhesheni ya 2.6.0)
gridzySkinCard mbonalo ya vhutshilo	`gridzySkinCard` `gridzySkinCardLight`(YO ṰANGANEDZWA u bva kha vhesheni ya 2.6.0)

Khetho dza lukanda

U bva kha mbekanyamushumo ya 2.6.0 hu na Khetho dza u dzudzanya makumba o fhaṱiwaho. U ya nga lukanda lwo khetheaho u nga setha muvhala wa murahu, muvhala wa maṅwalo na murunzi wa maṅwalo. U fanela u shumisa pfaneleo dza CSS sa zwine wa nga zwi vhona hafha:

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

Kha vha sedze dzitshanduko dzi tikedzwaho na ndeme dza mvelele dza lukanda luṅwe na luṅwe hafha:

gridzySkinClassic

Tshanduko	Mutengo wo ḓiimiselaho	Mafhungo
`--background`	`rgba(0, 0, 0, .7)`	I tendela ndeme ya murahu ya CSS iṅwe na iṅwe
`--color`	`rgb(255, 255, 255)`	u tendela ndeme ya muvhala wa CSS
`--text-shadow`	`none`	u tendela ndeme ya murunzi wa maṅwalo a CSS

gridzySkinFullOverlay

Tshanduko	Mutengo wo ḓiimiselaho	Mafhungo
`--background`	`rgba(0, 0, 0, .7)`	I tendela ndeme ya murahu ya CSS iṅwe na iṅwe
`--color`	`rgb(255, 255, 255)`	u tendela ndeme ya muvhala wa CSS
`--text-shadow`	`none`	u tendela ndeme ya murunzi wa maṅwalo a CSS

gridzySkinLift

Tshanduko	Mutengo wo ḓiimiselaho	Mafhungo
`--background`	`rgba(0, 0, 0, .7)`	I tendela ndeme ya murahu ya CSS iṅwe na iṅwe
`--color`	`rgb(255, 255, 255)`	u tendela ndeme ya muvhala 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)`	u tendela ndeme ya murunzi wa maṅwalo a CSS

gridzySkinMagnifier

Tshanduko	Mutengo wo ḓiimiselaho	Mafhungo
`--background`	`rgba(0, 0, 0, .7)`	I tendela ndeme ya murahu ya CSS iṅwe na iṅwe
`--color`	`rgb(255, 255, 255)`	u tendela ndeme ya muvhala wa CSS

Lukanda ulu a lu tikedzi --text-shadow

gridzySkinBlur

Tshanduko	Mutengo wo ḓiimiselaho	Mafhungo
`--background`	`rgba(0, 0, 0, .7)`	I tendela ndeme ya murahu ya CSS iṅwe na iṅwe
`--color`	`rgb(255, 255, 255)`	u tendela ndeme ya muvhala wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	u tendela ndeme ya murunzi wa maṅwalo a CSS

gridzySkinCard

Tshanduko	Mutengo wo ḓiimiselaho	Mafhungo
`--background`	`rgba(0, 0, 0, 1)`	I tendela ndeme ya murahu ya CSS iṅwe na iṅwe
`--color`	`rgb(255, 255, 255)`	u tendela ndeme ya muvhala wa CSS
`--text-shadow`	`none`	u tendela ndeme ya murunzi wa maṅwalo a CSS

Makumba oṱhe o ṱalutshedzwaho phanḓa a tikedza fhedzi ṱhalutshedzo dza maṅwalo o leluwaho. Unga sika makumba au vhukuma na ane avha uri o ṱangana. Kha vha sedze kha Tshitaila tsha Gridzy .

Tshitaila tsha Gridzy

Arali hu si na lukanda lwo ṱalutshedzwaho lune lwa tendelana na zwine na zwi ṱoḓa, ni nga ḓiitela tshitaila tshaṋu.

Nḓila ine ya vha uri yo leluwa ndi u thoma wa kopolola lukanda lune lwa vha hone wa lu ṱanganya na zwine wa zwi ṱoḓa. Lukanda lwo ṱalutshedzwaho hu tshee nga phanḓa gridzySkinBlank kanzhi lu ḓo ṋea mutheo wavhuḓi khathihi na maṅwalo avhuḓi kha faila 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;
}

Kha faila ya CSS ni ḓo wana kilasi dza gridzySkinBlank , gridzyImage na gridzyCaption . Gridzy yone ine a i ṱoḓi hedzi kilasi. Dzi ya shuma fhedzi kha u ita zwitaila ngauralo unga dzi bvisa kana wa dzi ṋea dzina ḽiswa arali u tshi khou funa.

U engedza kha zwenezwo ni ḓo wana kiḽasi ya CSS gridzyItem . Gridzy i setha kilasi iyi nga vhuḓiitisi kha vhana vhoṱhe vho livhaho vha tshipiḓa tshihulwane tsha khontheina. Ngauralo, ni nga shumisa kilasi iyi u ita tshitaila tsha zwithu zwa gaḽeri yaṋu.

Muhumbulo Zwithu Zwa Ndeme .

Zwi re ngomu ha tshithu zwi fanela u fhindula nga vhuḓalo. Ṱhogomelani uri vhuhulwane ha elemennde vhu ḓo shanduka vhukuma. Shumisani ndeme dza phesenthe nṱhani ha ndeme dza pixel. Nahone sedzani khetho ya nzudzanyo ya Gridzy autoFontSize , ine ya vhofha vhuhulwane ha fonto kha vhuhulwane ha bogisi ḽa tshithu.
Tshithu tshiṅwe na tshiṅwe tshi fanela u vha na tshivhumbeo tsho ṱalutshedzwaho zwavhuḓi. Aspect ratio ya tshithu a i nga ḓo vhuya ya shanduka nahone i a ṱoḓea u itela u vhalela giridi. Ngauralo arali tshithu tshi si na nḓila yo ṱalutshedzwaho zwavhuḓi nga vhuḓiitisi, tshi ṱalutshedzeni phanḓa nga tshanḓa (tsumbo nga css).

Kha zwiṅwe zwiimo, zwi nga vha zwo leluwa u ita tshitaila tsha zwi re ngomu ha zwithu phanḓa ha musi Gridzy a tshi thoma. U sokou bvisa kiḽasi ya gridzy kana faela ya javascript ya Gridzy lwa tshifhinganyana u itela hezwi.

Ndi zwenezwo! Ndi zwone zwine wa zwi ṱoḓa u itela u fhaṱa lukanda lwau vhukuma. Vhunzhi ha makumba o ṱalutshedzwaho phanḓa ha shumisi zwinzhi u fhira hezwi.

Fhedzi hu nga vha na zwinzhi arali ni tshi funa ...

Makumba a Nṱha

Gridzy i shumisa kilasi nnzhi dza CSS u fhira gridzyItem fhedzi . Vhunzhi hazwo zwi ḓo ḓi setha nga zwone zwiṋe nahone u nga zwi shumisa kha u ita zwitaila na zwone.

Kiḽasi dza Khontheina Khulwane

Dzina ḽa Kiḽasi	Ṱhalutshedzo
`gridzy` u setha nga tshanḓa	Gridzy u wana nga vhuḓiitisi zwithu zwi re na kiḽasi iyi nahone a zwi thoma.
`gridzyAnimated`	I ḓo setiwa nga vhuḓiitisi arali khetho ya `animate` i `true` . Arali kilasi iyi yo vhewa nga tshanḓa, khetho ya `animate` i ḓo ḓi-ita `true` na yone (nga nnḓa ha arali yo vhewa nga ho livhaho kha `false` ).

Kiḽasi dza zwithu

Dzina ḽa Kiḽasi	Ṱhalutshedzo
`gridzyItem`	I ḓo vhewa nga u ṱavhanya musi tshithu tshi tshi thoma maitele a u thoma. A zwi nga ḓo vhuya zwa bviswa.
`gridzyItemInitializing`	I ḓo vhewa nga u ṱavhanya musi tshithu tshi tshi thoma maitele a u thoma. I ḓo dzhielwa vhudzulo nga `gridzyItemReady` nga u ṱavhanya musi tshithu tsho no thomiwa nga vhuḓalo. A zwi ambi uri zwifanyiso zwo ḓala tshoṱhe (vhona `gridzyItemLoading` ), fhedzi tshithu tsho lugela u vhonala.
`gridzyItemReady`	I ḓo dzhiela vhudzulo `gridzyItemInitializing` nga u ṱavhanya musi tshithu tsho no thomiwa nga vhuḓalo. A zwi nga ḓo vhuya zwa bviswa. A zwi ambi uri zwifanyiso zwo ḓala (vhona `gridzyItemComplete` ), fhedzi tshithu tsho lugela u vhonala.
`gridzyItemLoading`	I ḓo vhewa nga u ṱavhanya musi tshithu tshi tshi thoma maitele a u thoma. I ḓo dzhielwa vhudzulo nga `gridzyItemComplete` nga u ṱavhanya musi zwifanyiso zwi re ngomu (kanzhi ndi tshithihi fhedzi) zwo no ḓala tshoṱhe.
`gridzyItemComplete`	I ḓo dzhiela vhudzulo `gridzyItemLoading` nga u ṱavhanya musi zwifanyiso zwi re ngomu (kanzhi ndi tshithihi fhedzi) zwo no ḓala tshoṱhe. A zwi nga ḓo vhuya zwa bviswa.
`gridzyItemInitialToVisible`	I ḓo vhewa nga u ṱavhanya musi tshithu tshi tshi thoma u bvelela lwa u thoma. I ḓo bviswa nga u ṱavhanya musi tshithu tshi tshi vhonala tshoṱhe.
`gridzyItemVisible`	I ḓo vhewa nga u ṱavhanya musi tshithu tshi tshi vhonala tshoṱhe. I ḓo bviswa nga u ṱavhanya musi tshithu tshi tshi thoma u ngalangala.
`gridzyItemVisibleToHidden`	I ḓo vhewa nga u ṱavhanya musi tshithu tshi tshi thoma u ngalangala. I ḓo bviswa nga u ṱavhanya musi tshithu tsho no dzumbama tshoṱhe.
`gridzyItemHidden`	I ḓo vhewa nga u ṱavhanya musi tshithu tsho no dzumbama tshoṱhe. I ḓo bviswa nga u ṱavhanya musi tshithu tshi tshi thoma u vhonala.
`gridzyItemHiddenToVisible`	I ḓo vhewa nga u ṱavhanya musi tshithu tshi tshi thoma u vhonala (nga nnḓa ha u bvelela lwa u thoma – sedzani kiḽasi ya `gridzyItemInitialToVisible` ). I ḓo bviswa nga u ṱavhanya musi tshithu tshi tshi vhonala tshoṱhe.
`gridzyItemVisibleToVisible`	I ḓo vhewa nga u ṱavhanya musi tshiṅwe tshithu kha giridi tshi tshi shanduka, fhedzi tshithu tshone tshiṋe tsho vha tshi hone nahone tshi dzule tshi tshi vhonala. I ḓo bviswa nga u ṱavhanya musi animation ya tshanduko yo no fhela.

Nga nḓila yo ḓoweleaho tshisumbedzi tsha maitele na zwifanyiso zwi tshi khou bvelela na zwine zwa ngalangala zwo ṱalutshedzwa phanḓa nga faela khulwane ya CSS ya Gridzy.

Nga kilasi idzi dza CSS dzo bulwaho afho nṱha ni nga ita tshitaila tshaṋu tsha tshumiso ya maitele na zwifanyiso. Dare u sedza kha faila ya CSS khulwane ya Gridzy, u pfesesa zwine na ḓo tea u zwi fhirisa. Ahuna nyofho, zwothe zwo nwaliwa zwavhudi henefho.

Kha vha khwinise u ḓadza

Arali na shumisa zwifanyiso zwinzhi, zwi nga vha muhumbulo wavhuḓi u thusa Gridzy u fhaṱa giridi nga u ṱavhanya.

Thivhela u fhufha ha zwifanyiso

Gridzy u ṱoḓa tshoṱhe aspect ratio ya zwifanyiso zwoṱhe u itela u vhalela giridi. Hedzi mbuno dzi ita uri hu vhe na zwithu zwine zwa fhufha arali zwiṅwe zwifanyiso zwo lugela ngeno zwiṅwe zwi songo lugela. Musi hu na zwifanyiso zwinzhi, mvelelo iyi i nga sinyusa vhukuma.

U thivhela vhuḓifari uhu, kha vha vhee pfaneleo width na height ha zwithu zwoṱhe img . Ndi zwa ndeme u vhea ndeme dzo teaho dza tshifanyiso tshiṅwe na tshiṅwe nga tshithihi, arali zwi songo ralo zwifanyiso zwi ḓo khakhiswa. Mitengo yo teaho ndi vhuphara ha u thoma na vhulapfu ha tshifanyiso tsho teaho:

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

Nga murahu ha zwenezwo Gridzy a nga vhalela giridi nga u ṱavhanya hu si na ṱhoḓea ya u ḓivha vhuhulwane ha vhukuma ha zwifanyiso.

U ḓadza nga vhulenda

U dzhia zwifanyiso fhedzi zwine zwa vha kha viewport i vhonalaho, tevhelani aya maga:

Dzhenisani pfaneleo width na height sa zwe zwa ṱalutshedzwa afho nṱha (itani vhungoho ha uri ni shumisa ndeme dzo teaho)
Dzhiani vhudzulo ha pfaneleo dzoṱhe src nga data-gridzylazysrc sa zwe zwa sumbedzwa afho fhasi (arali ni na pfaneleo srcset na dzone, dzi bviseni nga 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>

Nga murahu ha aya maga zwifanyiso zwi ḓo ḓala nga u ṱavhanya musi zwi tsini kana nga ngomu ha viewport.

Tshisumbedzi tsha maitele

Tshiga tsha maitele ndi tshiga tshiṱuku tshine tsha vhonala musi tshifanyiso tshi tshi khou ḓala. Arali na shumisa zwiṱoho & makumba , tshiga tsha maitele tshi ḓo sumbedzwa nga tshoṱhe. Arali zwi songo ralo u ṱoḓa dziṅwe tshanduko:

Vheani tshipiḓa tshiṅwe na tshiṅwe tsha img kha tshipiḓa tsha div
(kana kha tshiṅwe tshipiḓa – sedzani HTML ya semantiki u itela zwinzhi)
Engedza kiḽasi ya gridzyImage kha tshipiḓa tshiṅwe na tshiṅwe tsha 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>

Nga murahu ha zwenezwo u fanela u vhona zwisumbedzi zwa maitele arali zwifanyiso zwi tshi dzhia tshifhinga u ḓala.

Zwiṱuṱuwedzi

Filters kha Gridzy dzi ya vha dzo leluwa vhukuma fhedzi dzi na maanḓa. Naho u tshi khou toda filter ya mufuda ufhio, zwi ya konadzea vhukuma uri i kone u bvelela. Zwine na zwi ṱoḓa ndi, CSS ṱhukhu na zwithu zwi si gathi zwa fomo ya HTML ...

Tsumbo ya mushumo ndi heyi:

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

Kha Ri I Fhate Nga Vhukando Nga Vhukando

1. Tsha u thoma ri ṱoḓa tshivhumbeo tsho ḓoweleaho tsha HTML tsha Gridzy na u vhea madzina a kilasi kha zwithu zwoṱhe zwa gaḽeri uri ri kone u zwi sefa nga murahu .

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

Kha tsumbo iyi ri shumisa kilasi nthihi fhedzi kha tshipiḓa tshiṅwe na tshiṅwe. Fhedzi ni nga dovha na setha kilasi nnzhi dza tshipiḓa tshithihi, arali tshipiḓa itsho tshi tshi fanela u wanala nga kha zwiṱuṱuwedzi zwinzhi.

2. Nga murahu ri engedza dziṅwe buthano dzine ngadzo ra nga shandula dzifilithara then .

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

Nṱhani ha mabammbiri, ni nga dovha na shumisa zwiṅwe zwithu zwa fomo u fana na mabogisi a u ṱola, mabammbiri a radio, masimu a khethaho na zwiṅwe-vho.

Sa zwine na nga zwi vhona, ndeme dza mabammbiri ndi vhakhethi vha CSS vho ḓoweleaho. Musi ri tshi tou fhedza, u puṱedza kha buthano ḽo raloho zwi ḓo sumbedza zwifanyiso zwine zwa tshimbidzana na tshenetsho tshikhethi tsha CSS. Nga thekhinikhala i sokou setha khetho filter kha ndeme iyi.

U nga dovha wa shumisa zwikhethi zwo serekanaho vhukuma. Sa tsumbo :not(.animals) zwi nga shuma na zwone, khathihi na .animals.people na .animals, .people .

3. Tsha u fhedzisela, ri ṱanganya mabammbiri kha tshigoḓelo tsha div nahone ra a vhofha kha gaḽeri ya Gridzy, nga u vhea khetho ya 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>

Sa zwine na nga zwi vhona, ri dovha ra shumisa tshikhethi tsha CSS tsha khetho ya filterControls . Khontheina div i re na pfaneleo id i shuma fhedzi u ita uri mabammbiri a leluwe u khetha nga kha khetho yeneyo ya CSS.

Ndi zwenezwo!

Arali ni tshi takalela thandululo ya JavaScript, sedzani API .

API

Naho Gridzy ina API yayo, zwithu zwinzhi zwi nga itwa hu si nayo, nga u tou shumisa DOM. Gridzy o do zwi vhona a dzudzanya giridi. Fhedzi hu dovha ha vha na API i re na maanḓa vhukuma ...

U shumisa DOM

Kha u shumiswa hoṱhe ha Modele wa Tshithu tsha Dokhumennde (DOM) ri thoma nga u ṱoḓa tshipiḓa tsha khontheina:

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

Engedza zwifanyiso

Ndi zwa ndeme u fhaṱa nga vhuḓalo na u ḓadza tshipiḓa tshiswa tsha ṅwana phanḓa ha musi ni tshi tshi engedza kha tshipiḓa tsha khontheina. Arali zwi songo ralo Gridzy a nga si kone u vhona zwikalo zwo teaho.

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

Kha vha bvise zwifanyiso

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

Shandukisani Khetho

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

Zwinzhi nga ha u shumisa DOM ni nga zwi wana kha MDN web docs . Hu dovha ha vha na Marangaphanḓa a DOM ane a vha hone.

API ya vhuṋe

U shumisa API, ri thoma nga u ṱoḓa tsumbo ya Gridzy, ine ya vhofhekana na tshipiḓa tsha khontheina ya Gridzy:

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

Kha vha wane khetho

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

Kha vha wane khetho dzoṱhe

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

Setha Khetho

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

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

Shumisani Sefo

U shumisa tshiṱuḓi ndi u sokou setha filter tsha khetho tshine tsha nga vha tshikhethi tshiṅwe na tshiṅwe tshi shumaho tsha CSS:

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

Engedza Mishumo ya u Founela murahu

ZWO ṰANGANEDZWA u bva kha vhesheni ya 2.4.0
Shumisani Zwiitea zwa musalauno na zwine zwa tendelana na zwiimo nṱhani hazwo. Sedzani tshipiḓa tshi tevhelaho u itela u wana zwidodombedzwa.

~~Gridzy.js 2 i tikedza dziṅwe khetho dza mishumo ya u vhidza murahu. Dzi nga vhewa fhedzi nga kha API ya vhuṋe, fhedzi u fana na dziṅwe khetho:~~

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

	~~Ṱhalutshedzo~~
~~`onBeforeOptionsChanged`~~	~~Mushumo wa u vhidza murahu une wa vhidzwa thwii phanḓa ha u vhea zwikhetho.~~
~~`onOptionsChanged`~~	~~Mushumo wa u vhidza murahu une wa vhidzwa thwii nga murahu ha u vhea zwikhetho.~~
~~`onBeforeRender`~~	~~Mushumo wa callback une wa vhidzwa thwii phanḓa ha u ṋekedza.~~
~~`onRender`~~	~~Mushumo wa callback une wa vhidzwa thwii nga murahu ha u ṋekedza.~~

Shumisani Zwiitea

u bva kha mbekanyamushumo ya 2.4.0

Ni nga shumisa zwiitea zwa Gridzy u fana na zwiitea zwo ḓoweleaho zwa 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.
});

Zwiṅwe zwiitea zwi fhiswa kha tshipiḓa tsha khontheina tsha Gridzy nahone zwiṅwe zwiitea zwi fhiswa kha zwipiḓa zwa tshithu nga tshithihi nga ngomu ha tshipiḓa tsha khontheina.

Zwiitea zwo fhiswaho kha tshipiḓa tsha khontheina ya Gridzy:

	Ṱhalutshedzo
`gridzyBeforeInit`	Mililo phanḓa ha u thomiwa ha gaḽeri.
`gridzyInit`	Mililo nga murahu ha u thomiwa ha gallery.
`gridzyBeforeOptionsChanged`	Mililo phanḓa ha u vhea zwikhetho.
`gridzyOptionsChanged`	Mililo nga murahu ha u vhea zwikhetho.
`gridzyBeforeRender`	Mililo phanḓa ha u ṋekedza.
`gridzyRender`	Mililo nga murahu ha u ṋekedza.

Arali vha tshi nga xelelwa nga zwiitea zwiṅwe na zwiṅwe hafha, kha vha rumele khumbelo ya thikhedzo .

event.target i ṋetshedza tshipiḓa tsha khontheina ya Gridzy.
event.detail.instance i ṋetshedza tsumbo ya Gridzy.

Zwiitea zwo fhiswaho kha zwithu zwa zwithu:

	Ṱhalutshedzo
`gridzyItemBeforeInit`	Mililo phanḓa ha u thomiwa ha tshithu.
`gridzyItemInit`	Mililo nga murahu ha u thomiwa ha tshithu.
`gridzyItemLoading`	I fhisa musi tshithu tshi tshi thoma u ḓala.
`gridzyItemReady`	I fhisa musi tshithu tsho no lugela u vhalelwa ha giridi. Ngauralo aspect ratio i a ḓivhea, fhedzi tshifanyiso tshi nga kha ḓi vha tshi tshi khou ḓala.
`gridzyItemComplete`	I fhisa musi tshifanyiso tsha tshithu tsho ḓala.

Arali vha tshi nga xelelwa nga zwiitea zwiṅwe na zwiṅwe hafha, kha vha rumele khumbelo ya thikhedzo .

event.target i ṋetshedza tshipiḓa tsha tshithu tsho teaho.
event.detail.instance i ṋetshedza tsumbo ya Gridzy.

API – Ḽifhasi

Hu na miṅwe mishumo ine ya ḓiimisa nga yoṱhe kha tsumbo dza Gridzy. Ngauralo a ri ṱoḓi u wana tsumbo phanḓa.

Kha vha wane Khetho ya Default

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

Kha vha wane Khetho dzoṱhe dza 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');

Setha Khetho dza Mvelele

Hezwi a zwi vhei khetho dza tsumbo dzoṱhe dza Gridzy dzo no thomiwaho, fhedzi zwi ṱalusa mutheo wa tsumbo ntswa. Naho zwo ralo, arali khetho ya tsumbo i re hone i tshi ḓo dzudzanywa hafhu nga kha ndeme ya null , i ḓo shumisa ndeme ntswa ya mvelele.

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

Ni nga shumisa hezwi u vhea zwikhetho ḽifhasini ḽoṱhe, arali na zwi vhidza phanḓa ha musi DOM i tshi lugela. Ngauralo a no ngo tsha ṱoḓa u vhea zwikhetho sa zwivhumbeo.

Vhuḓiiteli

Sa vhunga zwithu zwoṱhe zwine zwa ḓiitela zwa Gridzy.js 2 zwi tshi khou shuma, a hu na ṱhoḓea ya nḓila dzi re afho fhasi. Fhedzi dzi automatisms dzi nga dzimiwa u itela u shumisa Gridzy nga nḓila ya mvelele:

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

Dziṅwe dza khetho idzi a dzi nga vhewi nga kha pfaneleo data-gridzy- kana nga kha setOptions() , nga ṅwambo wa zwiitisi zwi pfalaho:

	Mutengo wo ḓiimiselaho	Ṱhalutshedzo
`autoInitOnDomReady`	`true`	I ṱhogomela zwithu zwi re na kiḽasi `gridzy` kha u ḓadza siaṱari na u zwi thoma. I nga dzudzanywa nga kha `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Muvhoni wa Mutasheni	`true`	I ṱhogomela zwithu zwiswa zwi re na class `gridzy` nga u ṱavhanya musi zwi tshi bvelela kha DOM na u zwi thoma. (tsumbo kha u shumisa tshanduko dza masiaṱari) I nga dzudzanywa nga kha `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Muvhoni wa Mutasheni	`true`	I ṱhogomela arali zwithu zwa ṅwana (zwifanyiso) zwo engedzwa kana zwo bviswa, na u khwinisa giridi nga vhuḓiitisi. I nga vhewa nga kha `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	I ṱalusa arali zwivhumbeo `data-gridzy-` zwi tshi shumiswa nga u angaredza kana hai. Arali hezwi zwi `false` khetho dzi nga vhewa fhedzi nga kha API ya vhuṋe. I nga vhewa nga kha `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Muvhoni wa Mutasheni	`true`	I ṱhogomela tshanduko dza pfaneleo dza `data-gridzy-` , na u khwinisa giridi nga vhuḓiitisi. I dovha ya ṱhogomela arali kiḽasi ya `gridzyAnimated` yo engedzwa kana yo bviswa na arali tshanduko dza pfaneleo `style` dzi tshi itea. Arali `useOptionAttributes` i `false` , i ṱhogomela fhedzi tshanduko dza pfaneleo `style` . I nga vhewa nga kha `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Muvhoni wa Mutasheni	`true`	U ṱhogomela tshanduko dza pfaneleo dza `class` dza zwipiḓa zwoṱhe zwa ṅwana (zwifanyiso). Zwi a kwama malugana na zwiṱuṱuwedzi. I nga vhewa nga kha `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Muvhoni wa Mutasheni u bva kha mbekanyamushumo ya 2.5.0	`true`	I ṱhogomela tshanduko dza pfaneleo dza `src` dza zwifanyiso zwoṱhe. Zwi a kwama musi zwi tshi shumiswa na React kana dziḽaiburari dzi fanaho. I nga vhewa nga kha `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Shandukisa vhuhulwane ha muvhoni u bva kha mbekanyamushumo ya 2.6.0	`true`	U ṱhogomela tshanduko dza vhuphara ha elemennde. Zwi kwamaho malugana na u ḓivhadza zwine zwa fhindula. (Phanḓa ha mbekanyamushumo ya 2.6.0 ho vha hu tshi shumiswa muthetshelesi wa zwiitea zwa u shandukisa vhuhulwane ha fasiṱere) I nga vhewa nga kha `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Thomani nga tshanḓa

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

U fhelisa tsumbo

Roughly said, zwo fhambanaho na u thoma Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sync Mutevhe wa Vhana nga Zwanḓa

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

Sync Elemente ya Ṅwana muthihi nga tshanḓa

Kanzhi azwi ṱoḓei, nga nnḓa ha kha zwithu zwine zwa vha uri azwi tou ḓivhea vhukuma.

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

Sync pfaneleo nga tshanḓa

Ṱhogomelani uri khetho ya useOptionAttributes i tea u vha true kha hezwi.

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

U kombetshedza u ṋekedza

Kanzhi a zwi ṱoḓei, naho zwishumiswa zwoṱhe zwo dzimiwa .

gridzyInstance.render();