2.x ƒe tɔtrɔ – Gridzy.Gallery

Woɖe nyatakakadzraɖoƒea gɔme le eɖokui si. Ne nane me mekɔ o la, taflatse lé ŋku ɖe Eŋlisigbe me nuŋlɔɖiawo ŋu.

Zãzã Gbãtɔ

Tsɔ Gridzy ƒe faɛlawo da ɖe wò server dzi eye nàtsɔ wo akpe ɖe wò nyatakakadzraɖoƒea ŋu (zi geɖe la, le ta ƒe akpaa dzi):

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

Tsɔ HTML-kɔda la kpee (afisiafi le ŋutilã ƒe akpaa me):

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

Emae nye ema! Ema nye kpɔɖeŋu si wɔa dɔ bliboe. Mehiã be woawɔ gɔmedzedze bubu aɖeke o.

Ðoɖowɔwɔ

Mɔ bɔbɔetɔ si dzi woato aɖo Gridzy enye, be nàzã HTML nɔnɔmewo ko. Ðeko wòle be nàtsɔ data-gridzy- aɖo tiatia ƒe ŋkɔwo ŋgɔ. Eyata, be nàɖo spaceBetween tiatia la, ɖeko nàtsɔ nɔnɔme data-gridzy-spaceBetween akpe ɖe eŋu.

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

Tiatia Veviwo

	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Nuɖᴐɖᴐ
`animate`	`true`	Ekpɔe ɖa be ele be woazã nɔnɔmetatawo ne grid la trɔ (le kpɔɖeŋu me, ne wole browser ƒe fesre ƒe lolome trɔm alo ne wole filter ɖom).
`layout`	`justified`	Ðe ɖoɖo si wozã la gɔme. Gridzy.js 2 doa alɔ ɖoɖo vovovo eveawo `justified` kple `waterfall` . Wo dometɔ ɖesiaɖe kple eƒe tiatiawɔblɔɖe ƒe nɔnɔmetata bubuwo, siwo nàte ŋu akpɔ le kplɔ̃ sia te.
`filter`	`*`	Ekpɔa nɔnɔmetata siwo wòle be woaɖe afia. Woateŋu azã CSS-tiatia ɖesiaɖe abe asixɔxɔ ene le afisia. Zi geɖe la, woɖonɛ le eɖokui si to `filterControls` dzi (kpɔ tiatia si kplɔe ɖo). Kpɔ Filters ɖa
`filterControls`		Dea dzesi nɔnɔme ƒe akpa siwo woate ŋu azã atsɔ akɔ nɔnɔmetataawo me. Woateŋu azã CSS tiatia ɖesiaɖe, si tia HTML nɔnɔmetata ƒe akpawo, abe asixɔxɔ ene le afisia. Kpɔ Filters ɖa
`autoConsiderScrollBars`	`true`	Be nàgblɔ kekeme si li ne agbalẽxatsaxatsawo dze alo bu. Wokafui ɣesiaɣi be nàgblẽe ɖe `true` negbe ɖe automatism sia he kuxiwo vɛ hafi.

Justified Ðoɖowɔwɔ ƒe Tiatiawɔblɔɖe

	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Nuɖᴐɖᴐ
`autoFontSize`	`false`	Ewɔa aɖaka ɖesiaɖe ƒe ŋɔŋlɔdzesi ƒe lolome ƒe nɔnɔme yeyee le eɖokui si le aɖaka ƒe lolome gbãtɔ nu. Le gɔmedzedzea me la, womeɖo font-size ƒe nɔnɔmea tẽ o.
`desiredHeight`	`190`	Ðe element ƒe fliwo ƒe kɔkɔme si wodi la gɔme. Woabu akɔnta le kɔkɔme ŋutɔŋutɔ ŋu le kekeme si li kple nusiwo le fli la me nu.
`hideOnMissingImage`	`true`	Eɣlaa aɖaka siwo me nɔnɔmetata siwo womete ŋu tsɔ de eme o la le.
`spaceBetween`	`4`	Ðe didime si le nuawo dome gɔme le pikselwo me.
`lastRowAlign` tso esime woɖe eƒe tata 2.3.0	`justified`	Ðe fli mamlɛtɔ ƒe nuwɔna gɔme. Asixɔxɔ siwo ŋu woɖe mɔ ɖoe nye `left` , `center` , `right` kple `justified` .
`singleRowAlign` tso esime woɖe eƒe tata 2.3.0	`justified`	Ðe nuwɔna la gɔme ne fli ɖeka koe li. Asixɔxɔ siwo ŋu woɖe mɔ ɖoe nye `left` , `center` , `right` kple `justified` .
~~`fillLastRow`~~ ~~tso esime woɖe eƒe tata 2.1.0~~	~~`true`~~	WOÐE WO ɖa tso esime woɖe 2.4.0 ƒe tɔtrɔ (WOÐE NU GBƆ tso esime woɖe eƒe tata 2.3.0 ) Ðo nɔnɔmetataawo ɖe ɖoɖo nu ale be fli mamlɛtɔ nayɔ keŋkeŋ ɣesiaɣi. Ne èɖoe be yeatsɔ nɔnɔmetatawo akpe ɖe eŋu le mɔ si trɔna nu la, ate ŋu anyo be nàdzudzɔ esia. Mekpɔa ŋusẽ aɖeke ɖe fli ɖeka dzi o (kpɔ `fillSingleRow` ).
`fillSingleRow` tso esime woɖe eƒe tata 2.1.0	~~`true`~~	WOÐE WO ɖa tso esime woɖe 2.4.0 ƒe tɔtrɔ (WOÐE NU GBƆ tso esime woɖe eƒe tata 2.3.0 ) Ne fli ɖeka koe li la, eɖoa nɔnɔmetataawo ɖe ɖoɖo nu ale be fli la nayɔ keŋkeŋ ɣesiaɣi. Ne ate ŋu adzɔ be nɔnɔmetata ɖeka alo eve koe le asiwò le gallery la, ate ŋu anyo be nàdzudzɔ esia.

Waterfall Ðoɖowɔwɔ ƒe Tiatiawɔblɔɖewo

	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Nuɖᴐɖᴐ
`autoFontSize`	`false`	Ewɔa aɖaka ɖesiaɖe ƒe ŋɔŋlɔdzesi ƒe lolome ƒe nɔnɔme yeyee le eɖokui si le aɖaka ƒe lolome gbãtɔ nu. Le gɔmedzedzea me la, womeɖo font-size ƒe nɔnɔmea tẽ o.
`desiredWidth`	`250`	Ðe sɔtiwo ƒe kekeme si wodi la me. Woabu kekeme ŋutɔŋutɔ le kekeme si li kple sɔtiawo ƒe xexlẽme nu.
`hideOnMissingImage`	`true`	Eɣlaa aɖaka siwo me nɔnɔmetata siwo womete ŋu tsɔ de eme o la le.
`horizontalOrder`	`false`	Ðe eme be wotsɔa nuawo dana ɖe sɔti ɖesiaɖe me pɛpɛpɛ tso miame yi ɖusime, emegbe egadzea egɔme ake le sɔti si le miame wu me le eɖokui si le sɔti si me sɔti le wu la me. Le gɔmedzedzea me la, woatsɔ nuawo ade sɔti si ƒe kɔkɔme le sue wu la me ɣesiaɣi.
`spaceBetween`	`4`	Ðe didime si le nuawo dome gɔme le pikselwo me.
`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`.

Tiatia Deŋgɔ Geɖe Wu

Ne èdi tiatia deŋgɔ bubuwo la, kpɔ API .

Gɔmesese ƒe HTML

Gridzy ƒe HTML ƒe ɖoɖo bɔbɔetɔ enye esi:

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

Ke hã, Gridzy te ŋu trɔna bɔbɔe ŋutɔ eye àte ŋu azã HTML ƒe ɖoɖo bubu ɖesiaɖe kloe. Nya ʋɛ aɖewo koe li siwo ŋu wòle be míabu:

Nugoe ƒe akpa ƒe vi ɖesiaɖe tsi tre ɖi na nu ɖeka le grid la me.
Contener element kple viawo siaa ateŋu anye tag ƒomevi ɖesiaɖe, abe ul kple li (ɖeko nàbu eŋu be yeagbugbɔ aɖo browser defaults).
Ne img element menye vi tẽ ŋutɔ o la, ehiã klass gridzyImage .

Eyata esia hã nye HTML ƒe ɖoɖo si le dɔ wɔm:

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

Vevietɔ ne èdi be yeatsɔ nyawo akpe ɖe eŋu la, ahiã be nàwɔ HTML ƒe ɖoɖo deŋgɔ aɖe. Ne èdi be yeanya nu geɖe tso eŋu la, lé ŋku ɖe Captions & Skins ŋu.

Nyawo ƒe Nyawo & Lãgbalẽwo

Ne èdi be yeatsɔ nyawo akpe ɖe wò gallery ŋu la, ele be nàɖe eƒe dzedzeme gɔme. Eyata lãgbalẽ aɖewo siwo woɖo ɖi do ŋgɔ li. Skin ɖesiaɖe si me CSS faɛl le. Ele be nàtsɔ faɛl sia akpe ɖe Gridzy faɛl veviawo ŋu (zi geɖe la, le ta ƒe akpaa dzi):

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

Gakpe ɖe eŋu la, èhiã HTML ƒe ɖoɖo deŋgɔ aɖe:

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

Ne èle HTML ƒe wɔwɔme ŋu bum la, ke lé ŋku ɖe Semantic HTML ŋu.

Le nuŋɔŋlɔa gome la, àteŋu azã tag ƒomevi ɖesiaɖe, ɖeko nàkpɔ egbɔ be klass gridzyCaption le esi. img element la hiã klass gridzyImage .

Kpɔɖeŋu si le etame la fia ŋutigbalẽ gridzySkinClassic wò. Be nàzã bubu la, ɖeko nàtsɔ esiawo dometɔ ɖeka aɖɔli ŋutigbalẽa ƒe ŋkɔ:

Lãgbalẽ Siwo Le Eme

	Klass Siwo Li
gridzyŊutilãBlank gɔmedzedze nyui aɖe na ame ŋutɔ ƒe ŋutigbalẽ wɔwɔ live preview	`gridzySkinBlank`
gridzySkinClassic live preview	`gridzySkinClassic` `gridzySkinClassicLight`(WOÐE NU GBƆ tso 2.6.0 ƒe tɔtrɔ yeyea dzi)
gridzySkinFullOverlay live preview	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(WOÐE NU GBƆ tso 2.6.0 ƒe tɔtrɔ yeyea dzi)
gridzySkinLift live preview	`gridzySkinLift` `gridzySkinLiftLight`(WOÐE NU GBƆ tso 2.6.0 ƒe tɔtrɔ yeyea dzi)
gridzySkinMagnifier zoom ƒe dɔwɔwɔ mele eme o live preview	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(WOÐE NU GBƆ tso 2.6.0 ƒe tɔtrɔ yeyea dzi)

CSS faɛl koe hiã skin siwo katã le etame, gake skin bubu aɖewo li siwo hã hiã JavaScript faɛl:

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

	Klass Siwo Li
gridzySkinBlur mewɔa dɔ le IE me o live preview	`gridzySkinBlur` `gridzySkinBlurLight`(WOÐE NU GBƆ tso 2.6.0 ƒe tɔtrɔ yeyea dzi)
gridzySkinCard live preview	`gridzySkinCard` `gridzySkinCardLight`(WOÐE NU GBƆ tso 2.6.0 ƒe tɔtrɔ yeyea dzi)

Ŋutilã ƒe Tiatiawɔblɔɖe

Tso esime version 2.6.0 li la, Tiatia siwo woatsɔ aɖo skin siwo wotu ɖe eme la li. Le ŋutigbalẽ tɔxɛa nu la, àteŋu aɖo megbe ƒe amadede, nuŋɔŋlɔ ƒe amadede kple nuŋɔŋlɔ ƒe vɔvɔli. Ðeko wòle be nàzã CSS ƒe nɔnɔme tɔxɛwo abe alesi nàte ŋu akpɔe le afisia ene:

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

Kpɔ tɔtrɔ siwo wodo alɔe kple asixɔxɔ gbãtɔwo na ŋutigbalẽ ɖesiaɖe le afisia:

gridzySkinClassic

Nusi trɔna	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Numeɖeɖe
`--background`	`rgba(0, 0, 0, .7)`	ɖe mɔ ɖe CSS ƒe megbenya ɖesiaɖe ŋu
`--color`	`rgb(255, 255, 255)`	ɖe mɔ ɖe CSS ƒe amadede ƒe asixɔxɔ ɖesiaɖe ŋu
`--text-shadow`	`none`	ɖe mɔ ɖe CSS nuŋɔŋlɔ-vɔvɔli ƒe asixɔxɔ ɖesiaɖe ŋu

gridzySkinFullOverlay

Nusi trɔna	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Numeɖeɖe
`--background`	`rgba(0, 0, 0, .7)`	ɖe mɔ ɖe CSS ƒe megbenya ɖesiaɖe ŋu
`--color`	`rgb(255, 255, 255)`	ɖe mɔ ɖe CSS ƒe amadede ƒe asixɔxɔ ɖesiaɖe ŋu
`--text-shadow`	`none`	ɖe mɔ ɖe CSS nuŋɔŋlɔ-vɔvɔli ƒe asixɔxɔ ɖesiaɖe ŋu

gridzySkinLift

Nusi trɔna	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Numeɖeɖe
`--background`	`rgba(0, 0, 0, .7)`	ɖe mɔ ɖe CSS ƒe megbenya ɖesiaɖe ŋu
`--color`	`rgb(255, 255, 255)`	ɖe mɔ ɖe CSS ƒe amadede ƒe asixɔxɔ ɖesiaɖe ŋu
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ɖe mɔ ɖe CSS nuŋɔŋlɔ-vɔvɔli ƒe asixɔxɔ ɖesiaɖe ŋu

gridzySkinMagnifier

Nusi trɔna	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Numeɖeɖe
`--background`	`rgba(0, 0, 0, .7)`	ɖe mɔ ɖe CSS ƒe megbenya ɖesiaɖe ŋu
`--color`	`rgb(255, 255, 255)`	ɖe mɔ ɖe CSS ƒe amadede ƒe asixɔxɔ ɖesiaɖe ŋu

Skin sia medoa alɔ --text-shadow

gridzySkinBlur

Nusi trɔna	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Numeɖeɖe
`--background`	`rgba(0, 0, 0, .7)`	ɖe mɔ ɖe CSS ƒe megbenya ɖesiaɖe ŋu
`--color`	`rgb(255, 255, 255)`	ɖe mɔ ɖe CSS ƒe amadede ƒe asixɔxɔ ɖesiaɖe ŋu
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ɖe mɔ ɖe CSS nuŋɔŋlɔ-vɔvɔli ƒe asixɔxɔ ɖesiaɖe ŋu

gridzySkinCard

Nusi trɔna	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Numeɖeɖe
`--background`	`rgba(0, 0, 0, 1)`	ɖe mɔ ɖe CSS ƒe megbenya ɖesiaɖe ŋu
`--color`	`rgb(255, 255, 255)`	ɖe mɔ ɖe CSS ƒe amadede ƒe asixɔxɔ ɖesiaɖe ŋu
`--text-shadow`	`none`	ɖe mɔ ɖe CSS nuŋɔŋlɔ-vɔvɔli ƒe asixɔxɔ ɖesiaɖe ŋu

Nuŋɔŋlɔ bɔbɔewo ƒe nuŋɔŋlɔwo koe lãgbalẽ siwo katã woɖo do ŋgɔ la doa alɔe. Àte ŋu awɔ wò ŋutɔ wò ŋutigbalẽ siwo gɔme sese sesẽ wu. Taflatse lé ŋku ɖe Style Gridzy ŋu .

Atsyã Gridzy

Ne ŋutigbalẽ aɖeke si woɖo ɖi do ŋgɔ mesɔ na wò nuhiahiãwo o la, àte ŋu awɔ wò ŋutɔ wò tɔ ƒe atsyã.

Mɔ bɔbɔetɔ kekeakee nye be nàwɔ ŋutigbalẽ si li xoxo ƒe kɔpi gbã eye nàtrɔ asi le eŋu wòasɔ ɖe wò ŋutɔ wò nuhiahiãwo nu. Zi geɖe la, ŋutigbalẽ si woɖo ɖi do ŋgɔ gridzySkinBlank ana gɔmeɖoanyi nyui aɖe kpakple nuŋlɔɖi nyui aɖe le CSS faɛl la me:

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

Le CSS faɛl la me la, àkpɔ klass siwo gridzySkinBlank , gridzyImage kple gridzyCaption . Gridzy ŋutɔ mehiã klass siawo o. Wozãa wo hena atsyãwɔwɔ ko eye eyata àte ŋu aɖe wo ɖa alo atrɔ ŋkɔ na wo ne èdi.

Tsɔ kpe ɖe eŋu la, àkpɔ CSS ƒe hatsotso gridzyItem . Gridzy ɖoa klass sia le eɖokui si na vi siwo katã le tẽ le nugoe ƒe akpa vevitɔ me. Eyata, àte ŋu azã klass sia atsɔ awɔ atsyã na nusiwo le wò gallery me.

Susu Nu Veviwo

Ele be nuawo me nyawo nawɔ nu ɖe wo ŋu bliboe. Bu eŋu kpɔ be element ƒe lolome atrɔ godoo. Zã alafa memamã ƒe asixɔxɔwo ɖe piksel ƒe asixɔxɔwo teƒe. Eye lé ŋku ɖe Gridzy ƒe ɖoɖo ƒe tiatia autoFontSize , si blaa ŋɔŋlɔdzesi ƒe lolome ɖe nusi ƒe aɖaka ƒe lolome ŋu.
Ele be nu ɖesiaɖe ƒe akpa ƒe sɔsɔme si me kɔ nyuie nanɔ esi. Nua ƒe akpa ƒe sɔsɔme matrɔ gbeɖe o eye ehiã be woabu akɔnta le grid la ŋu. Eyata ne nu aɖe ƒe aspect ratio si woɖe nyuie mele esi le eɖokui si o la, ɖee do ŋgɔ kple asi (le kpɔɖeŋu me, to css dzi).

Le go aɖewo me la, ate ŋu anɔ bɔbɔe wu be woawɔ atsyã na nuawo me nyawo hafi Gridzy nadze egɔme. Ðeko nàɖe klass gridzy alo Gridzy javascript faɛl la ɖa hena ɣeyiɣi aɖe na esia.

Emae nye ema! Ema koe nye nusi nèhiã be nàtu wò ŋutɔ wò ŋutigbalẽ ɖo. Lãgbalẽ siwo woɖo ɖi do ŋgɔ ƒe akpa gãtɔ mezãa nusi wu esia o.

Gake bubuwo ate ŋu anɔ anyi ne èlɔ̃ ...

Ŋutilã Deŋgɔwo

Gridzy zãa CSS ƒe hatsotso geɖe wu gridzyItem ɖeɖeko. Woaɖo wo dometɔ akpa gãtɔ le wo ɖokui si eye àte ŋu azã wo hena atsyãwɔwɔ hã.

Nugoe Veviwo ƒe Klasswo

Klas ƒe Ŋkɔ	Nuɖᴐɖᴐ
`gridzy` be woaɖoe kple asi	Gridzy dia nusiwo le klass sia me le eɖokui si eye wòdzea wo gɔme.
`gridzyAnimated`	Woaɖoe le eɖokui si ne tiatia `animate` nye `true` . Ne woɖo klass sia kple asi la, tiatia `animate` hã axɔ `true` le eɖokui si (negbe ne woɖoe tẽ ɖe `false` ko ).

Nuwo ƒe Klasswo

Klas ƒe Ŋkɔ	Nuɖᴐɖᴐ
`gridzyItem`	Woaɖoe ne nua nya dze gɔmedzedze ƒe ɖoɖoa gɔme ko. Womaɖee ɖa gbeɖe o.
`gridzyItemInitializing`	Woaɖoe ne nu la nya dze gɔmedzedze ƒe ɖoɖoa gɔme ko. Woatsɔ `gridzyItemReady` aɖo eteƒe ne wonya dze nu la gɔme bliboe ko. Mefia be nɔnɔmetatawo xɔ agba bliboe o (kpɔ `gridzyItemLoading` ), gake nusi le klalo be wòadze.
`gridzyItemReady`	Axɔ ɖe `gridzyItemInitializing` teƒe ne wonya dze nu la gɔme bliboe ko. Womaɖee ɖa gbeɖe o. Mefia be nɔnɔmetatawo xɔ agba bliboe o (kpɔ `gridzyItemComplete` ), gake nusi le klalo be wòadze.
`gridzyItemLoading`	Woaɖoe ne nu la nya dze gɔmedzedze ƒe ɖoɖoa gɔme ko. Woatsɔ `gridzyItemComplete` aɖo eteƒe ne nɔnɔmetata siwo le eme (zi geɖe la, ɖeka koe) xɔ agba bliboe ko.
`gridzyItemComplete`	Axɔ ɖe `gridzyItemLoading` teƒe ne nɔnɔmetata siwo le eme (zi geɖe la, ɖeka koe) xɔ agba bliboe ko. Womaɖee ɖa gbeɖe o.
`gridzyItemInitialToVisible`	Woaɖoe ne nya la dze dzedze gɔme zi gbãtɔ ko. Woaɖee ɖa ne nya la dze keŋkeŋ ko.
`gridzyItemVisible`	Woaɖoe ne nya la dze bliboe ko. Woaɖee ɖa ne nua dze bubu gɔme ko.
`gridzyItemVisibleToHidden`	Woaɖoe ne nua nya dze bubu gɔme ko. Woaɖee ɖa ne wonya ɣla nu la keŋkeŋ ko.
`gridzyItemHidden`	Woaɖoe ne wonya ɣla nu la keŋkeŋ ko. Woaɖee ɖa ne nua dze dzedze gɔme ko.
`gridzyItemHiddenToVisible`	Woaɖoe ne nu la dze dzedze gɔme ko (negbe ɖe wòdze zi gbãtɔ ko – kpɔ klass `gridzyItemInitialToVisible` ). Woaɖee ɖa ne nya la dze keŋkeŋ ko.
`gridzyItemVisibleToVisible`	Woaɖoe ne nane le grid la me trɔ ko, gake nu la ŋutɔ ya nɔ dzedzem eye wòanɔ dzedzem. Woaɖee ɖa ne wonya wu tɔtrɔ ƒe nɔnɔmetata la nu ko.

Le gɔmedzedzea me la, woɖe dɔwɔwɔ ƒe dzesi kple nɔnɔmetata siwo adze kple esiwo bu ƒe nɔnɔmetatawo gɔme do ŋgɔ to Gridzy ƒe CSS faɛl vevitɔ dzi.

Àte ŋu atsɔ CSS ƒe klass siawo siwo míeyɔ ɖe etame la awɔ wò ŋutɔ wò dɔwɔwɔ ƒe dzesi kple nɔnɔmetatawo ƒe atsyã. Dzideƒo nàlé ŋku ɖe Gridzy CSS faɛl vevitɔa ŋu, be nàse nusi wòle be nàɖe ɖa gɔme. Vɔvɔ̃ aɖeke meli o, woŋlɔ nusianu ɖi nyuie le afima.

Trɔ asi le Loading ŋu wòanyo wu

Ne èzã nɔnɔmetata geɖewo la, ate ŋu anyo be nàkpe ɖe Gridzy ŋu wòatu grid la kabakaba.

Xɔ Mɔ Ðe Nɔnɔmetatawo ƒe Titri Nu

Gridzy hiã nɔnɔmetatawo katã ƒe akpa ƒe sɔsɔme vevie hafi wòate ŋu abu akɔnta le grid la ŋu. Nyateƒenya siawo hea nusiwo le ti kpom vɛ ne nɔnɔmetata aɖewo le klalo eye bubuwo mele klalo o. Zi alesi nɔnɔmetatawo sɔ gbɔe la, zi nenemae ŋusẽkpɔɖeamedzi sia ate ŋu ado dziku na amee.

Be nàxe mɔ ɖe nuwɔna sia nu la, ɖeko nàɖo width kple height nɔnɔmewo na img akpawo katã. Ele vevie be nàɖo asixɔxɔ siwo sɔ na nɔnɔmetata ɖesiaɖe, ne menye nenema o la, nɔnɔmetataawo atro. Asixɔxɔ siwo sɔ enye nɔnɔmetata ɖesiaɖe ƒe kekeme kple kɔkɔme gbãtɔ:

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

Le ema megbe la, Gridzy ate ŋu abu akɔnta le grid la ŋu enumake evɔ mahiã be wòanya nɔnɔmetataawo ƒe lolome ŋutɔŋutɔ o.

Kuviatɔ ƒe Agbatsɔtsɔ

Be nàda nɔnɔmetata siwo le nukpɔkpɔ ƒe ʋɔtru si wokpɔna me ko la, ɖeko nàwɔ ɖe afɔɖeɖe siawo dzi:

De width kple height nɔnɔmewo eme abe alesi míegblɔe le etame ene (kpɔ egbɔ be yezã asixɔxɔ siwo sɔ) .
Tsɔ data-gridzylazysrc ɖɔ li src nɔnɔmewo katã abe alesi woɖee fia le ete ene (ne srcset nɔnɔmewo hã le asiwò la, tsɔ data-gridzylazysrcset ɖɔ li wo ).

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

Le afɔɖeɖe siawo megbe la, nɔnɔmetataawo axɔ agba ne wonya te ɖe nukpɔkpɔƒea ŋu alo le eme ko.

Dɔwɔwɔ ƒe Dzesi

Dɔwɔwɔ ƒe dzesi nye dzesi sue si me agbe le si dzena ne nɔnɔmetata la le agba tsɔm. Ne èzã captions & skins , dɔwɔwɔ ƒe dzesi la adze le eɖokui si. Ne menye nenema o la, ahiã be nàwɔ asitɔtrɔ aɖewo:

De img element ɖesiaɖe ɖe div element me
(alo yi ɖe nu bubu ɖesiaɖe me – kpɔ gɔmesese ƒe HTML hena bubuwo)
Tsɔ klass gridzyImage kpe ɖe img element ɖesiaɖe ŋu

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

Le ema megbe la, ele be nàkpɔ dɔwɔwɔ ƒe dzesiwo ne nɔnɔmetataawo xɔa ɣeyiɣi hafi woda.

Nusiwo wotsɔna tsia nu me

Filters le Gridzy me le bɔbɔe ŋutɔ gake ŋusẽ le wo ŋu. Eɖanye filter ka ƒomevie nèhiã o, anɔ eme ŋutɔ be woate ŋu akpɔe adze sii. Nusi nèhiã koe nye, CSS vi aɖe kple HTML ƒe nɔnɔme ƒe akpa ʋee aɖewo ...

Kpɔɖeŋu si wɔa dɔe nye esi:

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

Mina Míatue Afɔɖeɖe ɖesiaɖe

1. Gbã la míehiã Gridzy ƒe HTML ɖoɖo si bɔ eye míaɖo klass ŋkɔwo na gallery nuawo katã ale be míate ŋu akɔ wo me le emegbe

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

Le kpɔɖeŋu sia me la, klass ɖeka koe míezãna na element ɖesiaɖe. Gake àteŋu aɖo klass geɖewo hã na element ɖeka, nenye be ele be element ma nate ŋu ake ɖe eŋu to filter geɖewo dzi.

2. Emegbe míetsɔa button aɖewo kpena ɖe eŋu siwo dzi míato atrɔ filterawo emegbe

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

Le abɔtaawo teƒe la, àte ŋu azã agbalẽvi ƒe akpa bubuwo hã abe dzesiɖakawo, radio ƒe abɔtawo, tiatia ƒe agblewo kple bubuawo ene.

Abe alesi nàte ŋu akpɔe ene la, abɔtaawo ƒe asixɔxɔwo nyea CSS tiatia siwo wozãna zi geɖe. Ne míewu enu ko la, ne míezi abɔta ma tɔgbe dzi la, nɔnɔmetata siwo sɔ kple CSS tiatia ma afia. Le mɔ̃ɖaŋununya gome la, ɖeko wòɖoa filter tiatia la ɖe asixɔxɔ sia dzi.

Àte ŋu azã tiatiawɔnu siwo sesẽ wu sã hã. Le kpɔɖeŋu me :not(.animals) hã awɔ dɔ, kpakple .animals.people kple .animals, .people .

3. Mlɔeba la, míetsɔa abɔtaawo dea div nugoe me eye míeblaa wo ɖe Gridzy gallery la ŋu, to filterControls tiatia ɖoɖo me:

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

Abe alesi nàte ŋu akpɔe ene la, míezãa CSS tiatia hã na filterControls ƒe tiatia. div nugoe si me id nɔnɔme le koe subɔna be wòana abɔtaawo tiatia nanɔ bɔbɔe to CSS tiatia ma dzi.

Emae nye ema!

Ne JavaScript ƒe egbɔkpɔnue nèdi la, ke kpɔ API .

API

Togbɔ be Gridzy ŋutɔ ƒe API le esi hã la, woateŋu awɔ nu akpa gãtɔ ema manɔmee, to asitɔtrɔ le DOM ŋu ko me. Gridzy ade dzesii eye wòatrɔ asi le grid la ŋu. Gake API si ŋu ŋusẽ le ŋutɔ hã li ...

Asitɔtrɔ le DOM la ŋu

Le Document Object Model (DOM) ƒe asitɔtrɔwo katã gome la, míehiã nugoe ƒe akpa gbã:

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

Tsɔ Nɔnɔmetatawo Kpe Ðe Eŋu

Ele vevie be nàtu ɖevi ƒe akpa yeyea bliboe eye nàde eme hafi nàtsɔe akpe ɖe nugoe ƒe akpaa ŋu. Ne menye nenema o la, Gridzy mate ŋu ade dzesi didime siwo sɔ o.

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

Ðe Nɔnɔmetatawo ɖa

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

Trɔ Tiatiawɔblɔɖewo

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

Nu geɖe tso DOM ƒe asitɔtrɔ ŋu àteŋu akpɔ le MDN web docs . DOM ƒe ŋgɔdonya hã li.

API si nye ame ŋutɔ tɔ

Be míazã API la, míehiã Gridzy ƒe kpɔɖeŋu gbã, si wobla ɖe Gridzy nugoe ƒe akpaa ŋu:

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

Xɔ Tiatiawɔblɔɖe

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

Xɔ Tiatiawɔblɔɖewo Katã

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

Ðo Tiatiawɔblɔɖewo

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

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

Wɔ Filter ŋudɔ

Filter zazã nye tiatia filter si ateŋu anye CSS tiatia ɖesiaɖe si sɔ la ɖoɖo ko:

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

Tsɔ Callback Dɔwɔnawo kpee

WOGBƆE tso esime wowɔ 2.4.0 ƒe tɔtrɔ
Zã Nudzɔdzɔ siwo li egbea eye woate ŋu atrɔ ɖe nɔnɔmewo ŋu wu la boŋ. Kpɔ akpa si kplɔe ɖo hena numeɖeɖe bubuwo.

~~Gridzy.js 2 doa alɔ tiatia aɖewo na callback dɔwɔwɔwo. Woateŋu aɖo wo to API si nye ame ŋutɔ tɔ dzi ko, gake abe tiatia bubuwo ene:~~

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

	~~Nuɖᴐɖᴐ~~
~~`onBeforeOptionsChanged`~~	~~Callback function si woyɔ tẽ hafi ɖoa tiatiawɔblɔɖewo.~~
~~`onOptionsChanged`~~	~~Callback function si woyɔna tẽ le tiatiawɔblɔɖe ɖoɖo vɔ megbe.~~
~~`onBeforeRender`~~	~~Callback function si woyɔ tẽ hafi ɖea egɔme.~~
~~`onRender`~~	~~Callback function si woyɔna tẽ le gɔmeɖeɖe vɔ megbe.~~

Zã Nudzɔdzɔwo

tso esime woɖe eƒe tata 2.4.0

Àte ŋu azã Gridzy nudzɔdzɔwo abe JavaScript nudzɔdzɔ siwo bɔ ene pɛpɛpɛ:

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

Wodaa nudzɔdzɔ aɖewo ɖe Gridzy nugoe ƒe akpa dzi eye wodaa nudzɔdzɔ bubuwo ɖe nu ɖekaɖeka ƒe akpa siwo le nugoe ƒe akpaa me dzi.

Nudzɔdzɔ siwo woda ɖe Gridzy nugoe ƒe akpaa dzi:

	Nuɖᴐɖᴐ
`gridzyBeforeInit`	Dzowo do ŋgɔ na gallery gɔmedzedze.
`gridzyInit`	Dzowo le gallery ƒe gɔmedzedze megbe.
`gridzyBeforeOptionsChanged`	Dzo hafi nàɖo tiatiawɔblɔɖewo.
`gridzyOptionsChanged`	Dzo le tiatiawɔwɔwo ɖoɖo vɔ megbe.
`gridzyBeforeRender`	Dzowo hafi ɖea egɔme.
`gridzyRender`	Dzowo le gɔmeɖeɖe vɔ megbe.

Ne wɔna aɖewo to ŋuwò le afisia la, taflatse ɖo kpekpeɖeŋubiabia ɖe wò .

event.target naa Gridzy nugoe ƒe akpa.
event.detail.instance naa Gridzy ƒe kpɔɖeŋua.

Nudzɔdzɔ siwo woda ɖe nu ƒe akpa aɖewo dzi:

	Nuɖᴐɖᴐ
`gridzyItemBeforeInit`	Dzowo hafi woadze nu gɔme.
`gridzyItemInit`	Dzo le nu ƒe gɔmedzedze megbe.
`gridzyItemLoading`	Dzo ne nu la dze agba tsɔtsɔ gɔme.
`gridzyItemReady`	Dzo ne nusi le klalo na grid akɔntabubu. Eyata wonya aspect ratio, gake nɔnɔmetata la ate ŋu anɔ agba dzi kokoko.
`gridzyItemComplete`	Dzo ne nusi ƒe nɔnɔmetata xɔ agba bliboe.

Ne wɔna aɖewo to ŋuwò le afisia la, taflatse ɖo kpekpeɖeŋubiabia ɖe wò .

event.target naa nusi ƒe akpa ɖesiaɖe.
event.detail.instance naa Gridzy ƒe kpɔɖeŋua.

API – Xexeame katã ƒe

Dɔwɔwɔ aɖewo li siwo le wo ɖokui si tso Gridzy ƒe kpɔɖeŋuwo gbɔ. Eyata mehiã be míaxɔ kpɔɖeŋu aɖeke do ŋgɔ o.

Xɔ Tiatia si Wozãna Gbãtɔ

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

Na Tiatia Siwo Katã Wozãna Ðo

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

Ðo Tiatia Siwo Nàwɔ Ðo

Esia meɖoa Gridzy ƒe kpɔɖeŋu siwo katã wodze egɔme xoxo ƒe tiatia o, ke boŋ eɖea gɔmeɖoanyi na kpɔɖeŋu yeyewo gɔme. Gake ne woagbugbɔ aɖo kpɔɖeŋu si li xoxo ƒe tiatia aɖe to asixɔxɔ null dzi la, azã asixɔxɔ yeye si woɖo ɖi.

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

Àteŋu azã esia atsɔ aɖo tiatiawɔnuwo le xexeame katã, ne èyɔe hafi DOM le klalo. Eyata magahiã be nàɖo tiatiawɔblɔɖewo abe nɔnɔmewo ene o.

Automatisms ƒe dɔwɔwɔ

Zi alesi Gridzy.js 2 ƒe automatisms katã le dɔ wɔm ko la, mehiã be woawɔ mɔnu siwo le ete o. Gake woate ŋu atsi automatism-awo be woazã Gridzy le mɔ si bɔ wu nu:

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

Womateŋu aɖo tiatia siawo dometɔ aɖewo to data-gridzy- nɔnɔmewo dzi alo to setOptions() dzi o, le susu siwo me susu le ta:

	Asixɔxɔ si Woɖo Ðe Ðoɖo Nu	Nuɖᴐɖᴐ
`autoInitOnDomReady`	`true`	Dea dzesi nusiwo kple klass `gridzy` le axa ƒe agbatsɔtsɔ me eye wòdzea wo gɔme. Woate ŋu aɖoe to `Gridzy.setDefaultOptions()` dzi.
`autoInitOnDomMutation` Dzɔdzɔmeŋusẽŋununya ƒe Nukpɔla	`true`	Dea dzesi nu yeyewo kple klass `gridzy` ne wonya dze le DOM me ko eye wòdzea wo gɔme. (le kpɔɖeŋu me, le axa ƒe tɔtrɔwo zazã ŋu) Woate ŋu aɖoe to `Gridzy.setDefaultOptions()` dzi.
`autoSyncChildListMutation` Dzɔdzɔmeŋusẽŋununya ƒe Nukpɔla	`true`	De dzesii nenye be wotsɔ ɖevi ƒe akpawo (nɔnɔmetatawo) kpe ɖe eŋu alo ɖe wo ɖa, eye wòtrɔa asi le grid la ŋu le eɖokui si. Woate ŋu aɖoe to `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Eɖea eme nenye be wozãa `data-gridzy-` nɔnɔmewo zi geɖe alo womezãnɛ o. Ne esia nye `false` woateŋu aɖo tiatiawo to API si nye ame ŋutɔ tɔ dzi ko. Woate ŋu aɖoe to `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` dzi.
`autoSyncAttributesMutation` Dzɔdzɔmeŋusẽŋununya ƒe Nukpɔla	`true`	Dea dzesi tɔtrɔ siwo va le `data-gridzy-` nɔnɔmewo me, eye wòwɔa grid la yeyee le eɖokui si. Azɔ hã, ekpɔa ne wotsɔ `gridzyAnimated` hatsotso la kpe ɖe eŋu alo ɖee ɖa eye ne `style` nɔnɔme ƒe tɔtrɔwo dzɔ. Ne `useOptionAttributes` nye `false` , edea dzesi `style` ƒe tɔtrɔwo ko. Woate ŋu aɖoe to `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Dzɔdzɔmeŋusẽŋununya ƒe Nukpɔla	`true`	Dea dzesi tɔtrɔ siwo va le `class` nɔnɔmewo me le ɖevi ƒe akpawo katã (nɔnɔmetatawo) me. Esɔ ku ɖe filters ŋu. Woate ŋu aɖoe to `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Dzɔdzɔmeŋusẽŋununya ƒe Nukpɔla tso esime woɖe eƒe tata 2.5.0	`true`	Dea dzesi tɔtrɔwo le `src` nɔnɔmewo me le nɔnɔmetatawo katã me. Esɔ ne wozãe kple React alo agbalẽdzraɖoƒe mawo tɔgbe. Woate ŋu aɖoe to `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Trɔ Agbɔsɔsɔme Kpɔla tso esime woɖe eƒe tata 2.6.0	`true`	Dea dzesi tɔtrɔ siwo va le element ƒe kekeme ŋu. Esɔ ku ɖe aɖaŋu si wɔa dɔ nyuie ŋu. (Do ŋgɔ na tɔtrɔ 2.6.0 la, wozãa fesre ƒe lolome tɔtrɔ nudzɔdzɔ toɖola) Woate ŋu aɖoe to `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Dze egɔme kple Asi

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

Tsɔtsrɔ̃ Nudzɔdzɔa

Ne míagblɔe tututu la, esia to vovo na Gridzy ƒe gɔmedzedze.

gridzyInstance.destroy();
gridzyInstance = null;

Sync Ðeviwo ƒe Ŋkɔwo ƒe Ŋkɔwo Kple Asi

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

Ðe Ðevi Ðeka ƒe Nu vevi aɖe Ðeka Kple Asi

Zi geɖe la, mehiãna o, negbe le go siwo mebɔ kura o me ko.

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

Tsɔ Nɔnɔmewo Wɔ Ðeka Kple Asi

De dzesii be ele be useOptionAttributes tiatia nanye true na esia.

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

Ŋusẽ Gɔmeɖeɖe

Zi geɖe la, mehiãna o, ne wotu automatisms katã gɔ̃ hã

gridzyInstance.render();

WordPress ƒe Dɔwɔnu

JavaScript Agbalẽdzraɖoƒe

Dɔ

Eƒe tɔtrɔ 2.x