Ɲɛyirali fɛ, 2.x – Gridzy.Gallery

Site web nin bayɛlɛmana a yɛrɛ ma. Ni koo dɔ ma gwɛ, i b’a ɲini ka angɛlɛkan sɛbɛw lajɛ.

Baarakɛcogo jɔnjɔn

Gridzy ka sɛbɛw don i ka serveur kɔnɔ ani k’u fara i ka site web kan (a ka ca a la, u be sɔrɔ yɔrɔ min be kuun na):

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

HTML kode fara a kan (farikolo yɔrɔ o yɔrɔ la):

<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 lo! O ye misaliya dafanin dɔ ye. A ma ɲi ka yɛlɛmani wɛrɛ kɛ.

Labɛnni

Gridzy labɛncogo nɔgɔman ye, ka baara kɛ ni HTML ka jogow dɔrɔn lo ye. I ka kan ka sugandiliw tɔgɔw dɔrɔn lo sɛbɛ ni data-gridzy- ye. O la, ka spaceBetween sugandi, i ka data-gridzy-spaceBetween sifa dɔrɔn fara a kan.

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

Sugandili jɔnjɔnw

	Nafa min be sɔrɔ	Cogofɔli
`animate`	`true`	A b’a yira n’an ka ɲi ka baara kɛ ni animasiyɔnw ye n’an ka gɛrɛsi yɛlɛmana (misali la, n’an be navigatɛri ka fenɛtiri bonya yɛlɛmana wala n’an be filtɛri dɔ sigi).
`layout`	`justified`	A be baara kɛ ni labɛncogo min ye, o ɲɛfɔ. Gridzy.js 2 be `justified` ani `waterfall` dɛmɛ. U kelen kelen bɛɛ n’u ka paramɛtiri wɛrɛw be yen, i be se k’u sɔrɔ tablo nin jukɔrɔ.
`filter`	`*`	A b’a latigɛ jaa minw ka kan ka yira. CSS-sugandili sugu o sugu be se ka kɛ nafa ye yan. A ka c’a la, a be sigi a yɛrɛ ma `filterControls` sababu fɛ (a filɛ yɔrɔ wɛrɛ la). Aw ye Filtɛriw lajɛ
`filterControls`		A b’a yira fɛɛn minw be se ka kɛ ka jaaw filɛ. CSS sugandibaga sugu o sugu, min be HTML sɛbɛri fɛnw sugandi, o be se ka kɛ nafa ye yan. Aw ye Filtɛriw lajɛ
`autoConsiderScrollBars`	`true`	Ka bonya min be yen, o fɔ ka kɔn ni sɛrɛkiliw be bɔ wala u be tunu. A ka ɲi tuma bɛɛ k’a to `true` kan fɔɔ n’o otomatiki be gwɛlɛyaw lawuli.

Justified Labɛnni sugandiliw

	Nafa min be sɔrɔ	Cogofɔli
`autoFontSize`	`false`	A be kɛwali kelen kelen bɛɛ ka sɛbɛri hakɛ yɛlɛma a yɛrɛ ma ka kɛɲɛ ni kɛwali fɔlɔ hakɛ ye. Ka kɛɲɛ ni sɛbɛri hakɛ ye, o ma sigi ka gwɛ.
`desiredHeight`	`190`	A be fɛɛnw sɛrɛkiliw janya laɲini yira. A janya yɛrɛ yɛrɛ bena jati ka kɛɲɛ ni bonya min be yen ani fɛɛn minw be lɔgɔ kɔnɔ.
`hideOnMissingImage`	`true`	Jaaw minw tun tɛ se ka don, u be kɛsu minw kɔnɔ, u dogo.
`spaceBetween`	`4`	A be fɛɛnw ni ɲɔgɔn cɛ janya yira piksɛliw la.
`lastRowAlign` kabini a bɔyɔrɔ 2.3.0	`justified`	A be yɔrɔ laban ka jogo ɲɛfɔ. Ɲɛyirali fɛ, yɔrɔ minw be se ka kɛ, olu ye `left` , `center` , `right` ani `justified` ye.
`singleRowAlign` kabini a bɔyɔrɔ 2.3.0	`justified`	A be jogo ɲɛfɔ ni yɔrɔ kelen dɔrɔn lo be yen. Ɲɛyirali fɛ, yɔrɔ minw be se ka kɛ, olu ye `left` , `center` , `right` ani `justified` ye.
~~`fillLastRow`~~ ~~kabini a bɔyɔrɔ 2.1.0~~	~~`true`~~	A bɔra kabi 2.4.0 (A BE baara kɛ tugun kabi 2.3.0 ) A be jaaw labɛn cogo dɔ la walisa yɔrɔ laban ka fa pewu tuma bɛɛ. N’i b’a fɛ ka jaaw fara a kan cogo dɔ la, a be se ka kɛ hakilina ɲuman ye k’o baara dabila. A tɛ nɔɔ foyi to yɔrɔ kelen kelenw kan ( `fillSingleRow` lajɛ).
`fillSingleRow` kabini a bɔyɔrɔ 2.1.0	~~`true`~~	A bɔra kabi 2.4.0 (A BE baara kɛ tugun kabi 2.3.0 ) Ni lɔgɔ kelen dɔrɔn lo be yen, a be jaaw labɛn cogo dɔ la walisa lɔgɔ ka fa pewu tuma bɛɛ. N’a be se ka kɛ ko jaa kelen wala fila dɔrɔn lo b’i fɛ galeri kɔnɔ, a be se ka kɛ hakilina ɲuman ye k’o jaa datugu.

Waterfall Labɛnni sugandiliw

	Nafa min be sɔrɔ	Cogofɔli
`autoFontSize`	`false`	A be kɛwali kelen kelen bɛɛ ka sɛbɛri hakɛ yɛlɛma a yɛrɛ ma ka kɛɲɛ ni kɛwali fɔlɔ hakɛ ye. Ka kɛɲɛ ni sɛbɛri hakɛ ye, o ma sigi ka gwɛ.
`desiredWidth`	`250`	A be kolonw bonya min ɲinina, o ɲɛfɔ. A bonya yɛrɛ yɛrɛ bena jati ka kɛɲɛ ni bonya min be yen ani boon hakɛ ye.
`hideOnMissingImage`	`true`	Jaaw minw tun tɛ se ka don, u be kɛsu minw kɔnɔ, u dogo.
`horizontalOrder`	`false`	A b’a yira ko fɛɛnw be bila yɔrɔ kelen kelen bɛɛ la yɔrɔ kelen kelen bɛɛ la k’a ta numanbolo la ka taga kininbolo la, o kɔ, a be daminɛ tugun yɔrɔ min ka bon numanbolo la, yɔrɔ min na yɔrɔ ka ca. Ka kɛɲɛ ni sariya ye, fɛɛnw bena bila tuma bɛɛ yɔrɔ min na janya ka dɔgɔ ni yɔrɔ tɔɔw bɛɛ ye.
`spaceBetween`	`4`	A be fɛɛnw ni ɲɔgɔn cɛ janya yira piksɛliw la.
`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`.

Sugandili wɛrɛw minw be ɲɛtaga sɔrɔ

Ka fɛɛrɛ wɛrɛw sɔrɔ, API lajɛ .

HTML kɔrɔ

Gridzy ka HTML labɛncogo nɔgɔman ye nin ye:

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

Nka, Gridzy be se ka yɛlɛma yɛlɛma kosɔbɛ ani i be se ka baara kɛ ni HTML labɛncogo wɛrɛw ye. Fɛɛn damanin dɔrɔn lo be yen minw ka ɲi ka jateminɛ:

Konteyinɛri fɛɛn den kelen kelen bɛɛ be fɛɛn kelen lo yira gɛrɛsi kɔnɔ.
O yɔrɔ n’a deenw be se ka kɛ tagamasiɲɛ sifa bɛɛ ye, i n’a fɔ ul ani li (i ka miiri dɔrɔn ka navigatɛri ka defaults labɛn kokura).
Ni img fɛɛn dɔ tɛ denmisɛn yɛrɛ yɛrɛ ye, a mako be gridzyImage kilasi la.

O la, nin fana ye HTML labɛncogo dɔ ye min be baara kɛ:

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

Sanko n’i b’a fɛ ka kumadenw fara a kan, i mako be HTML labɛncogo ɲuman dɔ la. N’i b’a fɛ k’o koo lɔn ka ɲɛ, i ka Captions & Skins lajɛ.

Kapsiyɔnw ani farikolow

N’i b’a fɛ ka sɛbɛninw fara i ka galeri kan, i ka ɲi k’a yecogo ɲɛfɔ. O kama, farikolo dɔw be sɔrɔ minw kɔnna ka labɛn. O farikolo kelen kelen bɛɛ be ni CSS file ye. I ka ɲi k’o sɛbɛ fara Gridzy ka sɛbɛw kan (a ka ca a la, a be sɔrɔ kungolo yɔrɔ la):

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

Ka fara o kan, i mako be HTML labɛncogo ɲuman dɔ la:

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

N’i b’i yɛrɛ ɲiningara HTML labɛnnin koo la, i ka Semantic HTML lajɛ.

I be se ka baara kɛ ni tagamasiɲɛ sifa bɛɛ ye, i ka la a la ko gridzyCaption be yen. img fɛn mako be gridzyImage la.

O misaliya min be sanfɛ, o b’a yira i la ko farikolo gridzySkinClassic . Walisa ka baara kɛ ni dɔ wɛrɛ ye, i ka farikolo tɔgɔ yɛlɛma dɔrɔn ni nunu dɔ ye:

Farikolow be sɔrɔ a kɔnɔ

	Kalan minw be sɔrɔ
gridzy farigolo gwansan daminɛyɔrɔ ɲuman ye ka yɛrɛ farikolo dilan . ɲɛyirali	`gridzySkinBlank`
gridzySkinClassic ɲɛyirali ɲɛnama	`gridzySkinClassic` `gridzySkinClassicLight`(A BE baara kɛ tugun kabini a bɔra 2.6.0 la)
gridzySkinFullOverlay ɲɛyirali ɲɛnama	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(A BE baara kɛ tugun kabini a bɔra 2.6.0 la)
gridzySkinLift ɲɛyirali ɲɛnama	`gridzySkinLift` `gridzySkinLiftLight`(A BE baara kɛ tugun kabini a bɔra 2.6.0 la)
gridzySkinMagnifier zoom baarakɛcogo tɛ yen ɲɛyirali	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(A BE baara kɛ tugun kabini a bɔra 2.6.0 la)

O skinw bɛɛ mako be CSS file dɔrɔn lo la, nka skin wɛrɛw be yen minw fana mako be JavaScript file la:

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

	Kalan minw be sɔrɔ
gridzySkinBlur ti baara kɛ IE kɔnɔ . ɲɛyirali ɲɛnama	`gridzySkinBlur` `gridzySkinBlurLight`(A BE baara kɛ tugun kabini a bɔra 2.6.0 la)
gridzySkinCard ɲɛyirali ɲɛnama	`gridzySkinCard` `gridzySkinCardLight`(A BE baara kɛ tugun kabini a bɔra 2.6.0 la)

Farigolo sugandiliw

Kabi 2.6.0, Options be yen minw be se ka skins minw be sɔrɔ a kɔnɔ, u labɛn. Ka kɛɲɛ ni farikolo kɛrɛnkɛrɛnnin ye i be se ka kɔfɛla kulɛri, sɛbɛri kulɛri ani sɛbɛri suma sigi. I ka kan ka baara kɛ ni CSS ka fɛnw dɔrɔn lo ye i n’a fɔ i b’a ye cogo min na yan:

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

Aw ye yɛlɛmani minw dɛmɛna ani u ka sɔngɔw lajɛ farikolo kelen kelen bɛɛ la yan:

gridzySkinClassic

yɛlɛmafɛn	Nafa min be sɔrɔ	Kunnafoli
`--background`	`rgba(0, 0, 0, .7)`	a be CSS ka kɔfɛla nafa bɛɛ daga
`--color`	`rgb(255, 255, 255)`	a be CSS kulɛri sifa bɛɛ sɔn
`--text-shadow`	`none`	a be CSS sɛbɛri-suma nafa bɛɛ sɔn

gridzySkinFullOverlay

yɛlɛmafɛn	Nafa min be sɔrɔ	Kunnafoli
`--background`	`rgba(0, 0, 0, .7)`	a be CSS ka kɔfɛla nafa bɛɛ daga
`--color`	`rgb(255, 255, 255)`	a be CSS kulɛri sifa bɛɛ sɔn
`--text-shadow`	`none`	a be CSS sɛbɛri-suma nafa bɛɛ sɔn

gridzySkinLift

yɛlɛmafɛn	Nafa min be sɔrɔ	Kunnafoli
`--background`	`rgba(0, 0, 0, .7)`	a be CSS ka kɔfɛla nafa bɛɛ daga
`--color`	`rgb(255, 255, 255)`	a be CSS kulɛri sifa bɛɛ sɔn
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	a be CSS sɛbɛri-suma nafa bɛɛ sɔn

gridzySkinMagnifier

yɛlɛmafɛn	Nafa min be sɔrɔ	Kunnafoli
`--background`	`rgba(0, 0, 0, .7)`	a be CSS ka kɔfɛla nafa bɛɛ daga
`--color`	`rgb(255, 255, 255)`	a be CSS kulɛri sifa bɛɛ sɔn

Nin farigolo tɛ --text-shadow dɛmɛ

gridzySkinBlur

yɛlɛmafɛn	Nafa min be sɔrɔ	Kunnafoli
`--background`	`rgba(0, 0, 0, .7)`	a be CSS ka kɔfɛla nafa bɛɛ daga
`--color`	`rgb(255, 255, 255)`	a be CSS kulɛri sifa bɛɛ sɔn
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	a be CSS sɛbɛri-suma nafa bɛɛ sɔn

gridzySkinCard

yɛlɛmafɛn	Nafa min be sɔrɔ	Kunnafoli
`--background`	`rgba(0, 0, 0, 1)`	a be CSS ka kɔfɛla nafa bɛɛ daga
`--color`	`rgb(255, 255, 255)`	a be CSS kulɛri sifa bɛɛ sɔn
`--text-shadow`	`none`	a be CSS sɛbɛri-suma nafa bɛɛ sɔn

Skins minw bɛɛ kɔnna ka ɲɛfɔ, olu be sɛbɛnin nɔgɔmanw dɔrɔn lo dɛmɛ. I be se k’i yɛrɛ ka farikolow dilan ani u ka gwɛlɛ ka tɛmɛ fɔlɔ kan. A’ ye Style Gridzy lajɛ.

Gridzy cogoya

Ni farikolo yɔrɔ si ma kɔn ka labɛn ka bɛn n’i makoya ye, i be se k’i yɛrɛ ka farikolo dilan.

A ka nɔgɔ ka farikolo dɔ ladegi fɔlɔ ani k’a yɛlɛma ka kɛɲɛ n’i makoya ye. O skin gridzySkinBlank min tun kɔnna ka ɲɛfɔ, o tun bena to ka jusigilan ɲuman di ani sɛbɛ ɲuman min be sɔrɔ CSS file kɔnɔ:

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

CSS sɛbɛn kɔnɔ, i bena kalansen nunu sɔrɔ gridzySkinBlank , gridzyImage ani gridzyCaption . Gridzy yɛrɛ mako t’o kalanw na. U be kɛ ka fani don dɔrɔn ani o la, i be se k’u bɔ yen wala k’u tɔgɔ yɛlɛma n’i b’a fɛ.

Ka fara o kan, i bena CSS ka kilasi gridzyItem sɔrɔ. Gridzy be o kalan sigi a yɛrɛ ma ka ɲɛsin denmisɛnw bɛɛ ma minw be minanba kɔnɔ. O la, i be se ka baara kɛ n’o kalan ye k’i ka galeri ka fɛɛnw style.

I hakili to koo nafamanw na .

O fɛɛn kɔnɔkow ka ɲi ka bɛn ni fɛɛn bɛɛ ye. A’ y’a jati ko fɛɛnw bonya bena yɛlɛma siga t’a la. I ka baara kɛ ni kɛmɛsarada hakɛ ye sanni ka baara kɛ ni piksɛli hakɛ ye. Ani, Gridzy ka labɛncogo sugandi autoFontSize , min be sɛbɛri hakɛ siri fɛɛnw ka kɛsu hakɛ la.
Fɛɛn kelen kelen bɛɛ ka kan ka kɛ ni yɔrɔ dɔ ye min ɲɛfɔra ka ɲɛ. O fɛɛn ka yɔrɔ hakɛ tɛna yɛlɛma abada ani a mako be kɛ ka gɛrɛsi jati. O la, ni fɛɛn dɔ tɛ ni yɔrɔ dɔ ye min ɲɛfɔra ka ɲɛ, i k’a ɲɛfɔ ka kɔn bolo la (i n’a fɔ css sababu fɛ).

Tuma dɔw la, a be se ka nɔgɔya ka fɛɛnw kɔnɔkow labɛn sanni Gridzy ka baara daminɛ. A’ ye kalanso gridzy wala Gridzy javascript file bɔ dɔrɔn wagati dɔɔni kɔnɔ o kosɔn.

O lo! O dɔrɔn lo ka ɲi ka kɛ walisa k’i yɛrɛ farikolo labɛn. O farikolo minw labɛnna ka kɔn, u fanba tɛ baara kɛ n’o ye ka tɛmɛ nin kan.

Nka, a be se ka kɛ ko dɔ wɛrɛ be yen n’i b’a fɛ ...

Farikolow minw yiriwara

Gridzy be baara kɛ ni CSS kalan caaman ye ka tɛmɛ gridzyItem dɔrɔn kan. U fanba bena sigi u yɛrɛ ma ani i be se k’u kɛ ka fani don fana.

Konteyinɛri kalanw

Kalanso tɔgɔ	Cogofɔli
`gridzy` ka sigi bolo la	Gridzy be fɛɛn dɔw sɔrɔ a yɛrɛ ma ni o kilasi ye ani k’u daminɛ.
`gridzyAnimated`	A bena sigi a yɛrɛ ma ni option `animate` ye `true` ye . Ni o kilasi sigila bolo la, `animate` sugandili fana bena kɛ `true` a yɛrɛ ma (fo n’a siginin lo ka gwɛ ko `false` ).

Fɛɛn kalanw

Kalanso tɔgɔ	Cogofɔli
`gridzyItem`	A bena sigi tuma min na o fɛɛn y’a daminɛ ka baara daminɛ. A tɛna bɔ yen abada.
`gridzyItemInitializing`	A bena sigi tuma min na o fɛɛn y’a daminɛ ka baara daminɛ. A bena yɛlɛma ni `gridzyItemReady` ye n’o fɛɛn daminɛna pewu dɔrɔn. O kɔrɔ tɛ ko jaaw be dafa ( `gridzyItemLoading` lajɛ), nka fɛɛn labɛnnin lo ka ye.
`gridzyItemReady`	A bena `gridzyItemInitializing` nɔɔ ta tuma min na fɛɛn nin daminɛna pewu. A tɛna bɔ yen abada. O kɔrɔ tɛ ko jaaw be dafa ( `gridzyItemComplete` lajɛ), nka fɛɛn labɛnnin lo ka ye.
`gridzyItemLoading`	A bena sigi tuma min na o fɛɛn y’a daminɛ ka baara daminɛ. A bena yɛlɛma ni `gridzyItemComplete` ye ni jaaw minw be sɔrɔ a kɔnɔ (a ka ca a la, kelen dɔrɔn lo) be donna ka ban.
`gridzyItemComplete`	A bena `gridzyItemLoading` nɔɔ ta tuma min na jaaw be sɔrɔ a kɔnɔ (a ka ca a la, kelen dɔrɔn lo) be donna ka ban. A tɛna bɔ yen abada.
`gridzyItemInitialToVisible`	A bena sigi dɔrɔn ni fɛɛn y’a daminɛ ka bɔ siɲɛ fɔlɔ la. A bena bɔ yen dɔrɔn ni fɛɛn yera pewu.
`gridzyItemVisible`	A bena sigi tuma min na o fɛɛn be ye ka ban. A bena bɔ yen dɔrɔn ni fɛɛn y’a daminɛ ka tunu.
`gridzyItemVisibleToHidden`	A bena sigi dɔrɔn ni fɛɛn y’a daminɛ ka tunu. A bena bɔ yen dɔrɔn ni fɛɛn dogora pewu.
`gridzyItemHidden`	A bena sigi dɔrɔn ni fɛɛn dogora pewu. A bena bɔ yen dɔrɔn ni fɛɛn y’a daminɛ ka bɔ.
`gridzyItemHiddenToVisible`	A bena sigi dɔrɔn ni fɛɛn y’a daminɛ ka bɔ (fo n’a bɔra siɲɛ fɔlɔ la – kalan `gridzyItemInitialToVisible` lajɛ). A bena bɔ yen dɔrɔn ni fɛɛn yera pewu.
`gridzyItemVisibleToVisible`	A bena sigi dɔrɔn ni fɛɛn dɔ yɛlɛmana gridi kɔnɔ, nka o fɛɛn yɛrɛ tun be yen ani a be to ka ye. A bena bɔ yen dɔrɔn ni yɛlɛmani animasiyɔn banna.

Ka kɛɲɛ ni baarakɛcogo yiracogo ani jaa minw be bɔ ani minw be tunu, olu be kɔn ka dantigɛ Gridzy ka CSS file kunba kɔnɔ.

Ni CSS kalan nunu ye minw kofɔra sanfɛ, i be se k’i yɛrɛ ka baarakɛcogo yiracogo n’i ka jaaw labɛn. I ka Gridzy ka CSS fileba filɛ, walisa k’a faamu i tun bena min yɛlɛma. Siranya tɛ, koo bɛɛ sɛbɛra ka ɲɛ yen.

Ka donni fisaya

N’i be baara kɛ ni jaa caaman ye, a be se ka kɛ hakilina ɲuman ye ka Gridzy dɛmɛ ka gɛrɛdi lɔ joona joona.

Jaw panpanni bali

Gridzy mako be jaaw bɛɛ ka aspect ratio la kosɔbɛ walisa ka grid jati. O koo nunu be na ni fɛɛn dɔw ye minw be panpan ni jaa dɔw labɛnnin lo ani dɔw labɛnnin tɛ. Ni jaaw ka ca, o nɔɔ be se ka mɔgɔ tɔɔrɔ kosɔbɛ.

Walisa k’o jogo bali, i ka width ni height sifaw dɔrɔn lo sigi img fɛɛnw bɛɛ ye. A nafa ka bon ka jaaw kelen kelen bɛɛ hakɛ latigɛ cogo bɛnnin na, n’o tɛ, jaaw tun bena yɛlɛma. Valeur tilenninw ye ja kelen kelen bɛɛ bonya ni janya fɔlɔ ye:

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

O kɔ, Gridzy be se ka grid jati o yɔrɔnin bɛɛ k’a sɔrɔ a mako t’a la ka jaaw bonya tigitigi lɔn.

Lazy ka doni

Ka jaaw dɔrɔn don minw be yeyɔrɔ la, i ka tugu nin fɛɛrɛw kɔ dɔrɔn:

width ni height sifaw don i n’a fɔ a ɲɛfɔra cogo min na sanfɛ (aw k’aw janto ka baara kɛ ni hakɛ tilenninw ye)
src jogow bɛɛ yɛlɛma ni data-gridzylazysrc ye i n’a fɔ a yiralen be cogo min na duguman (ni srcset jogow fana b’i fɛ, u yɛlɛma ni data-gridzylazysrcset ye ).

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

O koo nunu kɔ, jaaw bena don n’u be yɔrɔ min na, n’u be gɛrɛfɛ wala n’u be n’u kɔnɔ dɔrɔn.

Tagabolo yiralan

O baara kɛcogo yirabaga ye tagamasiɲɛ fitinin ye min be bɔ tuma min na jaa be yɛlɛma. N’i be baara kɛ ni captions & skins ye , baara kɛcogo yiracogo bena yira a yɛrɛ ma. N’o tɛ, i mako be yɛlɛmani dɔw la:

img fɛɛn kelen kelen bɛɛ don div fɛɛn kɔnɔ .
(walima ka don fɛɛn wɛrɛ la – HTML kɔrɔ lajɛ ka dɔ lɔn)
Aw ye gridzyImage kilasi fara img fɛɛn kelen kelen bɛɛ kan .

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

O kɔ, i ka ɲi ka baarakɛcogo yiracogow ye ni jaaw be wagati ta ka don.

Filtɛriw

Filtɛri minw be Gridzy kɔnɔ, u ka nɔgɔ kosɔbɛ nka u ka fanga ka bon. I mako be filtɛri sifa o sifa la, a ka c’a la, a be se ka kɛ. I mako be min na, o ye CSS dɔɔni ani HTML sɛbɛnin damadɔ ye ...

Nin ye baarakɛcogo misaliya ye:

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

An k’a lɔ dɔɔni dɔɔni

1. Fɔlɔ an mako be Gridzy ka HTML labɛncogo la ani ka kilasi tɔgɔw sigi galeri fɛɛnw bɛɛ kama walisa an ka se k’u filɛrɛ o kɔ .

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

Nin misaliya la, an be baara kɛ ni kilasi kelen dɔrɔn lo ye fɛɛn kelen kelen bɛɛ kama. Nka i be se ka kilasi caaman sigi fana fɛɛn kelen kama, n’o fɛɛn ka kan ka sɔrɔ filɛri caaman sababu fɛ.

2. O kɔ, an be butɔn dɔw fara a kan minw sababu fɛ an be se ka filtɛriw yɛlɛma o kɔ .

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

Butɔnw nɔɔ na, i be se ka baara kɛ ni sɛbɛ wɛrɛw ye fana i n’a fɔ sɛgɛsɛgɛrikɛyɔrɔw, arajo butɔnw, foro sugandininw ani o ɲɔgɔnnaw.

I ko i ɲɛɛ b’a la cogo min na, butɔnw ka sɔngɔw be to ka CSS sugandi. An kɛnin kɔ ka ban dɔrɔn, n’an y’o butɔn ɲɔgɔn digi, jaaw bena yira minw be bɛn n’o CSS sugandibaga ye. Tekiniki la, a be filter sugandili dɔrɔn lo sigi o sɔngɔ kan.

I be se ka baara kɛ fana ni sugandilifɛnw ye minw ka gwɛlɛ kosɔbɛ. Misaliya la :not(.animals) tun bena baara kɛ fana, ani .animals.people ani .animals, .people .

3. A laban, an be butɔnw don div minan dɔ kɔnɔ ani k’u siri Gridzy ka galeri la, an kɛtɔ ka filterControls sugandi:

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

I ko i ɲɛɛ b’a la cogo min na, an be baara kɛ ni CSS sugandibaga dɔ ye fana filterControls sugandili kama. div minan min be ni id sifa ye, o be baara kɛ dɔrɔn walisa ka butɔnw sugandi nɔgɔman na o CSS sugandibaga sababu fɛ.

O lo!

N’i be JavaScript fɛɛrɛ lo fɛ, API lajɛ .

API

Hali ni Gridzy yɛrɛ ka API b’a la, koo fanba be se ka kɛ n’a tɛ yen, n’an be DOM yɛlɛma dɔrɔn. Gridzy bena o kɔrɔsi ani a bena yɛlɛmani don a ka yɔrɔ la. Nka API barikaman dɔ fana be yen ...

Ka DOM mara

Sɛbɛnw bɛɛ la, an mako be minanw na fɔlɔ:

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

Jaw fara a kan

A nafa ka bon ka denmisɛnnin kura lɔ ani k’a fa ka ban sanni i k’a fara minan kɔnɔfɛnw kan. N’o tɛ, Gridzy tɛ se ka dimensiyɔnw lɔn ka ɲɛ.

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

Jaaw bɔ yen

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

Sugandili yɛlɛma

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

DOM baarakɛcogo kan i be se ka kunnafoni wɛrɛw sɔrɔ MDN web docs kɔnɔ . DOM ka ɲɛfɔli dɔ fana be yen min be sɔrɔ.

API tigiya

Ka baara kɛ ni API ye, an mako be Gridzy ka misaliya la fɔlɔ, min be siri Gridzy ka minanw na:

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

Sugandili sɔrɔ

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

Sugandili bɛɛ sɔrɔ

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

Sugandili dɔw sigi

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

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

Filtɛri kɛ

Ka filtɛri dɔ kɛ, o ye ka filter sugandi min be se ka kɛ CSS sugandibaga ɲuman ye:

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

Ka weleli baarakɛcogow fara a kan

AN BE baara kɛ tugun kabini a bɔra 2.4.0
I ka baara kɛ ni bi ka Events ye ani u be se ka yɛlɛma yɛlɛma. A’ ye yɔrɔ nata lajɛ k’o koo lɔn ka ɲɛ.

~~Gridzy.js 2 be dɛmɛ don sugandili dɔw la minw be se ka kɛ ka mɔgɔw weele ka na. U be se ka sigi API dɔrɔn lo sababu fɛ, nka i n’a fɔ sugandili wɛrɛw:~~

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

	~~Cogofɔli~~
~~`onBeforeOptionsChanged`~~	~~Callback function min be weele ka kɔn ka sugandiliw sigi.~~
~~`onOptionsChanged`~~	~~Callback function min be weele ka sinsin sugandiliw siginin kɔ.~~
~~`onBeforeRender`~~	~~Callback fonction min be weele ka kɔn ka yɛlɛmani don.~~
~~`onRender`~~	~~Callback fonction min be weele yɔrɔnin kelen yɛlɛmani kɔ.~~

Baara kɛ ni koow ye

kabini 2.4.0

I be se ka baara kɛ ni Gridzy ka koow ye i n’a fɔ JavaScript ka koow kɛcogo:

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

Ko dɔw be kɛ Gridzy ka minanw kan ani koo wɛrɛw be kɛ minan kelen kelen bɛɛ kan minw be minan kɔnɔ.

Ko minw kɛra Gridzy ka minanw kɔnɔ:

	Cogofɔli
`gridzyBeforeInit`	Tasuma be bɔ sanni galeri ka daminɛ.
`gridzyInit`	Tasuma be bɔ galeri daminɛ kɔ.
`gridzyBeforeOptionsChanged`	Tasuma be bɔ sanni ka sugandiliw sigi.
`gridzyOptionsChanged`	Tasuma be bɔ sugandiliw siginin kɔ.
`gridzyBeforeRender`	Tasuma sanni a ka yɛlɛma.
`gridzyRender`	Tasuma be bɔ yɛlɛmani kɔ.

N’i ye koo dɔw to yan, i ka dɛmɛ ɲini .

event.target be Gridzy ka minanw di.
event.detail.instance be Gridzy misaliya di.

Ko minw kɛra fɛɛn dɔw kan:

	Cogofɔli
`gridzyItemBeforeInit`	Tasuma be bɔ sanni fɛɛn ka daminɛ.
`gridzyItemInit`	Tasuma be bɔ fɛɛnw daminɛnin kɔ.
`gridzyItemLoading`	Tasuma be bɔ ni fɛɛn y’a daminɛ ka don.
`gridzyItemReady`	Tasuma be bɔ tuma min na fɛɛn labɛnnin lo ka jatebɔ kɛ. O la, a yɔrɔ lɔnnin lo, nka n’a sɔrɔ jaa bele be yɛlɛma.
`gridzyItemComplete`	Tasuma be bɔ tuma min na fɛɛn jaa fanin lo.

N’i ye koo dɔw to yan, i ka dɛmɛ ɲini .

event.target be fɛɛn kelen kelen bɛɛ di.
event.detail.instance be Gridzy ka misaliya di.

API – Duniɲa kuru bɛɛ

Baara dɔw be yen minw tɛ Gridzy ka misaliyaw la. O kama, an mako t’a la ka ɲɛyirali dɔ sɔrɔ ka kɔn.

Sugandili fɔlɔ sɔrɔ

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

Sugandili fɔlɔw bɛɛ sɔrɔ

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

Sugandili fɔlɔw sigi

O tɛ Gridzy instances bɛɛ ka sugandiliw sigi minw daminɛna ka ban, nka a be instances kuraw basigiyɔrɔ ɲɛfɔ. Nka, ni instance kɔrɔ dɔ ka sugandili tun bena labɛn kokura ka tɛmɛ null value fɛ, a tun bena baara kɛ ni default value kura ye.

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

I be se ka baara kɛ n’o ye ka sugandiliw sigi duniɲa kuru bɛɛ kɔnɔ, n’i y’a weele sanni DOM ka labɛn. O kama, i mako tun tɛna kɛ ka sugandiliw sigi i n’a fɔ jogow tugun.

Ɔtɔmatisimu

Ni Gridzy.js 2 ka otomatikiw bɛɛ be baara la, mako t’a la ka fɛɛrɛ nunu kɛ. Nka, u be se ka baara kɛ ni Gridzy ye cogo laadaman na:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

O sugandiliw dɔw tɛ se ka sigi data-gridzy- sifaw fɛ wala setOptions() sababu fɛ, kuun jɔnjɔnw kosɔn:

	Nafa min be sɔrɔ	Cogofɔli
`autoInitOnDomReady`	`true`	A be fɛɛn dɔw lɔn ni class `gridzy` ye sɛbɛw ladontuma na ani k’u daminɛ. A be se ka sigi `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` YɛlɛmaniKɔlɔsilikɛla	`true`	A be fɛɛn kuraw lɔn ni class `gridzy` ye n’u bɔra dɔrɔn DOM kɔnɔ ani k’u daminɛ. (misali la, ka baara kɛ ni ɲɛɛ yɛlɛmaniw ye) A be se ka sigi `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` YɛlɛmaniKɔlɔsilikɛla	`true`	A b’a lɔn ni denmisɛnw ka fɛɛnw (jaaw) farala ɲɔgɔn kan wala n’u bɔra, ani a be grid kurakuraya a yɛrɛ ma. A be se ka sigi ka tɛmɛ `data-grizy-` fɛ, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	A b’a yira ni `data-gridzy-` sifaw be baara kɛ ka caya wala n’u tɛ baara kɛ n’u ye. Ni o ye `false` sugandiliw be se ka sigi API dɔrɔn lo sababu fɛ. A be se ka sigi ka tɛmɛ `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` YɛlɛmaniKɔlɔsilikɛla	`true`	A be yɛlɛmaniw lɔn `data-gridzy-` sifaw la ani a be grid kurakuraya a yɛrɛ ma. A b’a lɔn fana ni `gridzyAnimated` kilasi farala a kan wala n’a bɔra ani ni yɛlɛmaniw kɛra `style` sifaw la. Ni `useOptionAttributes` ye `false` ye , a be yɛlɛmaniw dɔrɔn lo lɔn `style` . A be se ka sigi ka tɛmɛ `data-grizy-` fɛ, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` YɛlɛmaniKɔlɔsilikɛla	`true`	A be denmisɛnw ka fɛɛnw bɛɛ `class` jogow yɛlɛmaniw lɔn (jaaw). A be bɛn ni filtɛriw ye. A be se ka sigi ka tɛmɛ `data-grizy-` fɛ, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` YɛlɛmaniKɔlɔsilikɛla kabini a bɔyɔrɔ 2.5.0	`true`	A be jaaw bɛɛ ka `src` jogow yɛlɛmaniw lɔn. A be bɛn n’a be baara kɛ ni React wala biblotɛki ɲɔgɔnw ye. A be se ka sigi ka tɛmɛ `data-grizy-` fɛ, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Kɔlɔsilikɛla bonya yɛlɛma kabini 2.6.0	`true`	A be yɛlɛmaniw lɔn fɛɛn bonya la. A be bɛn ni dilan cogo ye min be jaabi di. (Sanni 2.6.0 ka bɔ, u tun be baara kɛ ni lamɛnnikɛla dɔ ye min be koow bonya yɛlɛma) A be se ka sigi ka kɛɲɛ ni `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

A daminɛ bolo la

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

Aw ye misaliya tiɲɛ .

A fɔra cogo min na, o tɛ kelen ye ni Gridzy daminɛ ye.

gridzyInstance.destroy();
gridzyInstance = null;

Denmisɛnw ka tɔgɔw sinsin bolola

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

Denmisɛn kelen ka fɛɛn dɔ sinsin bolo la

A ka ca a la, u mako t’o la, fɔɔ ni koo dɔw ka teli ka kɛ.

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

Jogow sinsin bolo la

A kɔrɔsi ko useOptionAttributes sugandili ka kan ka kɛ true o koo la.

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

Fanga yɛlɛmani

Tuma caaman na, u mako t’o la hali n’u be baara kɛ ni ɔridinatɛriw bɛɛ ye .

gridzyInstance.render();

Wordpɛrɛsi fɛnɲɛnamafagalan

JavaSkript ka biblotɛki

Mako

Ɲɛyirali 2.x