Nkyekyɛm 2.x – Gridzy.Gallery

Wɔakyerɛ wɛbsaet no ase ɔkwan biara so. Sɛ biribi mu nna hɔ a, yɛsrɛ wo hwɛ Borɔfo nkrataa no mu.

Mfitiaseɛ a Wɔde Di Dwuma

Fa Gridzy fael ahorow no kɔ wo server no so na fa ka wo wɛbsaet no ho (mpɛn pii no wɔ ɔfã a ɛwɔ ti no mu):

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

Fa HTML koodu no ka ho (baabiara wɔ nipadua no fã no mu):

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

Ɛno ne no! Ɛno yɛ nhwɛso a ɛyɛ adwuma koraa. Ɛho nhia sɛ wɔde initialization foforo biara di dwuma.

Nsiesiei a Wɔde Yɛ Adwuma

Ɔkwan a ɛyɛ mmerɛw a wobɛfa so asiesie Gridzy ne sɛ, wode HTML su ahorow bedi dwuma kɛkɛ. Ɛsɛ sɛ wode data-gridzy- bɛhyɛ option din ahorow no anim nkutoo. Enti, sɛ wopɛ sɛ wohyehyɛ spaceBetween option no a, fa su data-gridzy-spaceBetween ka ho kɛkɛ.

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

Nneɛma Titiriw a Wobɛpaw

	Botae a Wɔde Di Dwuma	Nkyerɛmu
`animate`	`true`	Kyerɛ sɛ ebia ɛsɛ sɛ wɔde animations di dwuma bere a grid no sesa (sɛ nhwɛso no, bere a woresakra browser mfɛnsere no kɛse anaa bere a woresiesie filter).
`layout`	`justified`	Kyerɛkyerɛ nhyehyɛe a wɔde adi dwuma no mu. Gridzy.js 2 boa nhyehyeɛ ahodoɔ mmienu `justified` ne `waterfall` . Wɔn mu biara wɔ n’ankasa option parameters foforo, a wubetumi ahu wɔ saa pon yi ase.
`filter`	`*`	Kyerɛ mfonini ahorow a ɛsɛ sɛ wɔkyerɛ. Wobetumi de CSS-sector biara adi dwuma sɛ botae wɔ ha. Mpɛn pii no, hyehyɛ no ankasa denam `filterControls` so (hwɛ ɔkwan a edi hɔ). Hwɛ Filters no mu
`filterControls`		Kyerɛ form elements a wobetumi de adi dwuma de ayi mfonini ahorow no mu. CSS selector biara, a ɛpaw HTML form elements, wobetumi de adi dwuma sɛ value wɔ ha. Hwɛ Filters no mu
`autoConsiderScrollBars`	`true`	Sɛnea ɛbɛyɛ a wobɛkyerɛ ntrɛwmu a ɛwɔ hɔ sɛ scroll bars pue anaasɛ ɛyera a. Ɛyɛ nyansa bere nyinaa sɛ wubegyaw no wɔ `true` so gye sɛ saa automatism yi de ɔhaw ahorow ba.

Justified Nsiesiei a Wɔpaw

	Botae a Wɔde Di Dwuma	Nkyerɛmu
`autoFontSize`	`false`	Ɛma adaka biara font-size property no yɛ foforo ankasa a egyina adaka no kɛse a edi kan no so. Sɛnea wɔahyɛ no, wɔanhyehyɛ font-size property no pefee.
`desiredHeight`	`190`	Kyerɛkyerɛ element row ahorow no sorokɔ a wɔpɛ. Wɔbɛbu ɔsorokɔ ankasa a egyina ntrɛmu a ɛwɔ hɔ ne nneɛma a ɛwɔ row no mu so.
`hideOnMissingImage`	`true`	Ɔde nnaka a mfonini ahorow a wɔantumi anhyɛ mu wom sie.
`spaceBetween`	`4`	Kyerɛkyerɛ kwan a ɛda element ahorow ntam wɔ piksel mu.
`lastRowAlign` efi bere a wɔde nkyerɛase 2.3.0	`justified`	Kyerɛkyerɛ suban a ɛwɔ row a etwa to no mu. Nneɛma a wɔama ho kwan ne `left` , `center` , `right` ne `justified` .
`singleRowAlign` efi bere a wɔde nkyerɛase 2.3.0	`justified`	Kyerɛkyerɛ suban no mu sɛ row biako pɛ na ɛwɔ hɔ a. Nneɛma a wɔama ho kwan ne `left` , `center` , `right` ne `justified` .
~~`fillLastRow`~~ ~~efi bere a wɔde nkyerɛase 2.1.0~~	~~`true`~~	WƆayi afi hɔ fi version 2.4.0 (WƆAgyae fi bere a wɔyɛɛ nkyerɛase 2.3.0 ) Hyehyɛ mfonini ahorow no sɛnea ɛbɛyɛ a bere nyinaa row a etwa to no bɛhyɛ ma koraa. Sɛ woayɛ nhyehyɛe sɛ wode mfonini ahorow bɛka ho wɔ ɔkwan a ɛyɛ nnam so a, ebetumi ayɛ papa sɛ wobɛma eyi ayɛ adwuma. Ennya nkɛntɛnso biara wɔ row biako so (hwɛ `fillSingleRow` ).
`fillSingleRow` efi bere a wɔde nkyerɛase 2.1.0	~~`true`~~	WƆayi afi hɔ fi version 2.4.0 (WƆAgyae fi bere a wɔyɛɛ nkyerɛase 2.3.0 ) Sɛ row biako pɛ na ɛwɔ hɔ a, ɛhyehyɛ mfonini ahorow no sɛnea ɛbɛyɛ a row no bɛhyɛ ma koraa bere nyinaa. Sɛ ebetumi aba sɛ wowɔ mfonini biako anaa abien pɛ wɔ gallery no mu a, ebetumi ayɛ papa sɛ wobɛma eyi ayɛ adwuma.

Waterfall Nsiesiei a Wɔpaw

	Botae a Wɔde Di Dwuma	Nkyerɛmu
`autoFontSize`	`false`	Ɛma adaka biara font-size property no yɛ foforo ankasa a egyina adaka no kɛse a edi kan no so. Sɛnea wɔahyɛ no, wɔanhyehyɛ font-size property no pefee.
`desiredWidth`	`250`	Kyerɛkyerɛ adum no ntrɛwmu a wɔpɛ. Wɔbɛbu ne tɛtrɛtɛ ankasa a egyina ntrɛmu a ɛwɔ hɔ ne adum dodoɔ so.
`hideOnMissingImage`	`true`	Ɔde nnaka a mfonini ahorow a wɔantumi anhyɛ mu wom sie.
`horizontalOrder`	`false`	Kyerɛkyerɛ mu sɛ wɔde element ahorow no si katee element biako wɔ kɔla biara mu fi benkum kɔ nifa, afei efi ase bio wɔ benkum so kɔla a ɛde ne ho wɔ kɔla a ɛwɔ beae kɛse no mu. Sɛnea wɔahyɛ no, wɔde nneɛma no bɛto kɔla a ne sorokɔ ketewaa bi no mu bere nyinaa.
`spaceBetween`	`4`	Kyerɛkyerɛ kwan a ɛda element ahorow ntam wɔ piksel mu.
`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`.

Nneɛma a Ɛkɔ Anim Pii

Sɛ wopɛ akwan a ɛkɔ akyiri a, hwɛ API .

Nkyerɛase HTML

Gridzy HTML nhyehyeɛ a ɛyɛ mmerɛ paa ne sɛ:

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

Nanso, Gridzy yɛ nea ɛyɛ mmerɛw yiye na ɛkame ayɛ sɛ wubetumi de HTML nhyehyɛe foforo biara adi dwuma. Nsɛntitiriw kakraa bi pɛ na ɛsɛ sɛ wususuw ho:

Ba biara a ɔwɔ container element no mu gyina hɔ ma ade biako wɔ grid no mu.
Container element ne ne mma nyinaa betumi ayɛ tag type biara, te sɛ ul ne li (susuw ho ara sɛ wobɛsan asiesie browser defaults).
Sɛ img element bi nyɛ abofra tẽẽ ankasa a, ehia adesua gridzyImage .

Enti eyi nso yɛ HTML nhyehyɛe a ɛyɛ adwuma:

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

Titiriw sɛ wopɛ sɛ wode nsɛm a wɔakyerɛw ka ho a, wuhia HTML nhyehyɛe a ɛkɔ akyiri. Sɛ wopɛ sɛ wusua ho nsɛm pii a, hwɛ Captions & Skins .

Nsɛm a Wɔakyerɛw & Nwoma

Sɛ wopɛ sɛ wode nsɛm a wɔakyerɛw ka wo gallery ho a, ɛsɛ sɛ wokyerɛkyerɛ sɛnea ɛte no mu. Enti, skin ahorow bi a wɔadi kan akyerɛkyerɛ mu wɔ hɔ. Skin biara a ɛyɛ CSS fael. Ɛsɛ sɛ wode fael yi ka Gridzy fael atitiriw no ho (mpɛn pii no wɔ ɔfã a ɛwɔ ti no mu):

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

Bio nso wuhia HTML nhyehyɛe a ɛkɔ akyiri:

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

Sɛ woresusuw HTML nhyehyɛe no ho a, hwɛ Semantic HTML .

Sɛ wopɛ caption no a wobɛtumi de tag biara adi dwuma, hwɛ sɛ ɛwɔ class gridzyCaption . img element no hia adesuakuw gridzyImage .

Atifi hɔ nhwɛsoɔ no kyerɛ wo honam ani gridzySkinClassic . Sɛ wode foforo bedi dwuma a, fa eyinom mu biako si honam ani din no ananmu kɛkɛ:

Nwoma a Wɔde Ka Ho

	Adesua Ahorow a Ɛwɔ Hɔ
gridzySkinBlank a ɛwɔ hɔ mfiase pa a wode bɛyɛ w’ankasa honam ani hwɛbea live preview	`gridzySkinBlank`
gridzySkinClassic live preview	`gridzySkinClassic` `gridzySkinClassicLight`(WƆAgyae fi bere a wɔyɛɛ nkyerɛase 2.6.0)
gridzySkinFullOverlay live preview	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(WƆAgyae fi bere a wɔyɛɛ nkyerɛase 2.6.0)
gridzySkinLift live preview	`gridzySkinLift` `gridzySkinLiftLight`(WƆAgyae fi bere a wɔyɛɛ nkyerɛase 2.6.0)
gridzySkinMagnifier zoom dwumadie no nka ho live preview	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(WƆAgyae fi bere a wɔyɛɛ nkyerɛase 2.6.0)

Atifi hɔ skins no nyinaa hia CSS fael nko ara, nanso skin foforo bi wɔ hɔ a ɛhia JavaScript fael nso:

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

	Adesua Ahorow a Ɛwɔ Hɔ
gridzySkinBlur ntumi nyɛ adwuma wɔ IE mu live preview	`gridzySkinBlur` `gridzySkinBlurLight`(WƆAgyae fi bere a wɔyɛɛ nkyerɛase 2.6.0)
gridzySkinCard live preview	`gridzySkinCard` `gridzySkinCardLight`(WƆAgyae fi bere a wɔyɛɛ nkyerɛase 2.6.0)

Wora a Wobɛpaw

Efi version 2.6.0 no, Options wɔ hɔ a wɔde hyehyɛ skins a wɔasisi no. Ɛgyina honam ani hwɛbea pɔtee no so no wobɛtumi ahyɛ akyi kɔla, nkyerɛwee kɔla ne nkyerɛwee sunsuma. Ɛsɛ sɛ wode CSS custom properties di dwuma kɛkɛ sɛnea wubetumi ahu wɔ ha no:

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

Hwɛ nsakraeɛ a wɔboa ne default values ma skin biara wɔ ha:

gridzySkinClassic

Nsakrae a ɛsakra	Botae a Wɔde Di Dwuma	Asɛm
`--background`	`rgba(0, 0, 0, .7)`	ma kwan ma CSS akyi botae biara
`--color`	`rgb(255, 255, 255)`	ma kwan ma CSS kɔla botae biara
`--text-shadow`	`none`	ma kwan ma CSS nkyerɛwee-sunsuma botae biara

gridzySkinFullOverlay

Nsakrae a ɛsakra	Botae a Wɔde Di Dwuma	Asɛm
`--background`	`rgba(0, 0, 0, .7)`	ma kwan ma CSS akyi botae biara
`--color`	`rgb(255, 255, 255)`	ma kwan ma CSS kɔla botae biara
`--text-shadow`	`none`	ma kwan ma CSS nkyerɛwee-sunsuma botae biara

gridzySkinLift

Nsakrae a ɛsakra	Botae a Wɔde Di Dwuma	Asɛm
`--background`	`rgba(0, 0, 0, .7)`	ma kwan ma CSS akyi botae biara
`--color`	`rgb(255, 255, 255)`	ma kwan ma CSS kɔla botae biara
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ma kwan ma CSS nkyerɛwee-sunsuma botae biara

gridzySkinMagnifier

Nsakrae a ɛsakra	Botae a Wɔde Di Dwuma	Asɛm
`--background`	`rgba(0, 0, 0, .7)`	ma kwan ma CSS akyi botae biara
`--color`	`rgb(255, 255, 255)`	ma kwan ma CSS kɔla botae biara

Saa skin yi ntumi mmoa --text-shadow

gridzySkinBlur

Nsakrae a ɛsakra	Botae a Wɔde Di Dwuma	Asɛm
`--background`	`rgba(0, 0, 0, .7)`	ma kwan ma CSS akyi botae biara
`--color`	`rgb(255, 255, 255)`	ma kwan ma CSS kɔla botae biara
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ma kwan ma CSS nkyerɛwee-sunsuma botae biara

gridzySkinCard

Nsakrae a ɛsakra	Botae a Wɔde Di Dwuma	Asɛm
`--background`	`rgba(0, 0, 0, 1)`	ma kwan ma CSS akyi botae biara
`--color`	`rgb(255, 255, 255)`	ma kwan ma CSS kɔla botae biara
`--text-shadow`	`none`	ma kwan ma CSS nkyerɛwee-sunsuma botae biara

Skin a wɔadi kan akyerɛkyerɛ mu nyinaa boa nsɛm a wɔakyerɛw a ɛnyɛ den nkutoo. Wubetumi ayɛ w’ankasa wo were a ɛyɛ den kɛse. Yɛsrɛ sɛ hwɛ Style Gridzy .

Ɔkwan a wɔfa so yɛ Gridzy

Sɛ honam ani hwɛbea biara nni hɔ a wɔahyɛ da ayɛ a ɛfata w’ahiade a, wubetumi ayɛ w’ankasa de.

Ɔkwan a ɛyɛ mmerɛw ne sɛ wubedi kan ayɛ honam ani hwɛbea bi a ɛwɔ hɔ dedaw no ho mfonini na woayɛ no ma ɛne w’ankasa ahiade ahorow ahyia. Skin gridzySkinBlank a wɔakyerɛkyerɛ mu dedaw no bɛtaa ama fapem pa ne nkrataa pa nso wɔ CSS fael no mu:

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

Wɔ CSS fael no mu no wobɛhunu adesua ahodoɔ gridzySkinBlank , gridzyImage ne gridzyCaption . Gridzy ankasa nhia saa adesua ahorow yi. Wɔde yɛ styling nko ara na enti sɛ wopɛ a wobɛtumi ayi anaa wobɛsesa wɔn din.

Bio nso wobɛhunu CSS adesua gridzyItem . Gridzy hyehyɛ saa adesua yi ɔtopae ma mmofra tẽẽ nyinaa a wɔwɔ container element titiriw no mu. Enti, wubetumi de saa adesuakuw yi ayɛ nneɛma a ɛwɔ wo gallery no mu no ho nhyehyɛe.

Adwene mu Nneɛma a Ɛho Hia

Ɛsɛ sɛ ade no mu nsɛm yɛ nea ɛfata koraa. Susuw ho sɛ akyinnye biara nni ho sɛ element no kɛse bɛsakra. Fa ɔha biara mu nkyekyem di dwuma sen sɛ wode piksel botae bedi dwuma. Na hwɛ Gridzy nhyehyeɛ option autoFontSize , a ɛkyekyere font-size no kɔ adeɛ adaka kɛseɛ so.
Ɛsɛ sɛ ade biara nya afã horow a wɔakyerɛkyerɛ mu yiye. Adeɛ no afã ratio rensakra da na ɛho hia na wɔabu grid no. Enti sɛ ade bi nni aspect ratio a wɔakyerɛkyerɛ mu yiye a, predefine no nsaano (sɛ nhwɛso no, via css).

Wɔ tebea horow bi mu no, ebia ɛbɛyɛ mmerɛw sɛ wobɛhyehyɛ nneɛma no mu nsɛm ansa na Gridzy ahyɛ ase. Yi class gridzy anaa Gridzy javascript fael no kɛkɛ bere tiaa bi ma eyi.

Ɛno ne no! Ɛno nkutoo ne nea wuhia na ama woatumi ayɛ w’ankasa wo honam ani. Nwoma a wɔakyerɛkyerɛ mu dedaw no mu dodow no ara mfa nea ɛboro eyi nni dwuma.

Nanso ebia pii wɔ hɔ sɛ wopɛ a ...

Nwoma a Ɛkɔ Anim

Gridzy de CSS adesua pii di dwuma sen gridzyItem nkutoo. Wɔn mu dodow no ara bɛhyehyɛ automatically na wubetumi de adi dwuma ama styling nso.

Container Adesuakuw Titiriw

Adesuakuw no Edin	Nkyerɛmu
`gridzy` sɛ wode nsa bɛhyehyɛ	Gridzy hwehwɛ elements a ɛwɔ saa class yi mu no ankasa na ɔhyɛ aseɛ.
`gridzyAnimated`	Wɔbɛhyehyɛ no ara sɛ option `animate` yɛ `true` a . Sɛ wɔde nsa hyehyɛ saa adesua yi a, option `animate` no nso bɛnya `true` ankasa (gye sɛ wɔahyɛ no pefee sɛ `false` ).

Nneɛma Adesua Ahorow

Adesuakuw no Edin	Nkyerɛmu
`gridzyItem`	Wɔbɛhyehyɛ bere a ade no afi ase ayɛ mfiase adwuma no ara pɛ. Wɔrennyi mfi hɔ da.
`gridzyItemInitializing`	Wɔbɛhyehyɛ bere a ade no afi ase ntɛm ara. Wɔde `gridzyItemReady` besi ananmu bere a wɔahyɛ ade no ase koraa no. Ɛnkyerɛ sɛ mfonini ahorow no ahyɛ mu ma koraa (hwɛ `gridzyItemLoading` ), nanso ade no ayɛ krado sɛ ɛbɛda adi.
`gridzyItemReady`	Ɛbɛsesa `gridzyItemInitializing` bere a wɔahyɛ ade no ase koraa ara pɛ. Wɔrennyi mfi hɔ da. Ɛnkyerɛ sɛ mfonini ahorow no ahyɛ mu ma koraa (hwɛ `gridzyItemComplete` ), nanso ade no ayɛ krado sɛ ɛbɛda adi.
`gridzyItemLoading`	Wɔbɛhyehyɛ bere a ade no afi ase ntɛm ara. Wɔde `gridzyItemComplete` besi ananmu bere a mfonini ahorow a ɛwɔ mu (mpɛn pii no biako pɛ) no ahyɛ mu ma koraa.
`gridzyItemComplete`	Ɛbɛsesa `gridzyItemLoading` bere a mfonini ahorow a ɛwɔ mu (mpɛn pii no biako pɛ) no ahyɛ mu ma koraa. Wɔrennyi mfi hɔ da.
`gridzyItemInitialToVisible`	Wɔbɛhyehyɛ bere a ade no afi ase pue bere a edi kan no ara pɛ. Wobeyi afi hɔ bere a ade no ada adi koraa ara pɛ.
`gridzyItemVisible`	Wɔbɛhyehyɛ bere a ade no ada adi koraa ara pɛ. Wobeyi afi hɔ bere a ade no afi ase ayera ara pɛ.
`gridzyItemVisibleToHidden`	Wɔbɛhyehyɛ bere a ade no afi ase ayera ara pɛ. Wobeyi afi hɔ bere a ade no asie koraa no.
`gridzyItemHidden`	Wɔbɛhyehyɛ bere a ade no asie koraa ara pɛ. Wobeyi afi hɔ bere a ade no afi ase pue ara pɛ.
`gridzyItemHiddenToVisible`	Wɔbɛhyehyɛ bere a ade no afi ase pue ara pɛ (gye sɛ ɛbɛda adi bere a edi kan – hwɛ adesuakuw `gridzyItemInitialToVisible` ). Wobeyi afi hɔ bere a ade no ada adi koraa ara pɛ.
`gridzyItemVisibleToVisible`	Wɔbɛhyehyɛ bere a biribi a ɛwɔ grid no mu sesa ara pɛ, nanso na ade no ankasa yɛ na tra hɔ a wotumi hu. Wɔbɛyi afiri hɔ berɛ a wɔawie nsakraeɛ animation no ara pɛ.

Sɛnea wɔahyɛ no, wɔde Gridzy CSS fael titiriw no akyerɛkyerɛ nhyehyɛe a ɛkyerɛ ne mfonini ahorow a ɛbɛda adi ne nea ɛyera no mu.

Saa CSS adesua ahorow a yɛaka ho asɛm wɔ atifi hɔ yi betumi ayɛ w’ankasa nhyehyɛe kyerɛwtohɔ ne animations. Dare a look into the Gridzy main CSS file, na woate nea anka ɛsɛ sɛ wobu so no ase. Ehu biara nni hɔ, wɔakyerɛw biribiara ho asɛm yiye wɔ hɔ.

Yɛ Loading no yiye

Sɛ wode mfonini pii di dwuma a, ebetumi ayɛ adwene pa sɛ wobɛboa Gridzy ma wakyekye grid no ntɛmntɛm.

Siw Mfonini a Ɛbɛhuruw Siw

Gridzy hia mfonini nyinaa afã ratio koraa na ama watumi abu grid no ho akontaa. Saa nokwasɛm ahorow yi ma nneɛma a wohuruw ba sɛ mfonini ahorow bi ayɛ krado na afoforo nso nyɛ krado a. Dodow a mfonini ahorow dɔɔso no, dodow no ara na saa nkɛntɛnso yi betumi ayɛ ahometew.

Sɛ wopɛ sɛ wosiw saa suban yi ano a, hyehyɛ width ne height su ahorow ma img elements nyinaa kɛkɛ. Ɛho hia sɛ wode botae ahorow a ɛfata ma mfonini biara ankorankoro, anyɛ saa a anka mfonini ahorow no bɛkyinkyim. Nsonsonoe a ɛteɛ ne mfonini a ɛwɔ mu no mfitiaseɛ ntrɛmu ne ne sorokɔ:

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

Ɛno akyi no Gridzy betumi abu grid no ho akontaa ntɛm ara a enhia sɛ ohu mfonini ahorow no kɛse ankasa.

Ɔkwasea Loading

Sɛ wopɛ sɛ wode mfonini ahorow a ɛwɔ viewport a wotumi hu no mu nkutoo bɛhyɛ mu a, di anammɔn yi akyi kɛkɛ:

Fa width ne height su ahorow hyɛ mu sɛnea yɛaka ho asɛm wɔ atifi hɔ no (hwɛ hu sɛ wode gyinapɛn ahorow a ɛfata bedi dwuma) .
Fa data-gridzylazysrc si src su nyinaa ananmu sɛnea wɔakyerɛ wɔ ase ha no (sɛ wowɔ srcset su nso a, fa data-gridzylazysrcset si ananmu ).

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

Saa anammɔn yi akyi no mfonini ahorow no bɛ load bere a ɛbɛn anaa ɛwɔ viewport no mu ara pɛ.

Adeyɛ ho Nsɛnkyerɛnne

Adeyɛ ho kyerɛwtohɔ no yɛ ahyɛnsode ketewa a ɛyɛ anigye a ɛbɛda adi bere a mfonini no rekɔ so no. Sɛ wode captions & skins di dwuma a, process indicator no bɛda adi ankasa. Sɛ ɛnte saa a, wuhia nsakrae bi:

Fa img element biara hyɛ div element mu
(anaasɛ kɔ element foforo biara mu – hwɛ semantic HTML ma pii)
Fa adesua gridzyImage no ka img element biara ho

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

Ɛno akyi no ɛsɛ sɛ wuhu process indicators no sɛ mfonini ahorow no gye bere ansa na wɔde ahyɛ mu a.

Nneɛma a wɔde yiyi nneɛma mu

Filters wɔ Gridzy mu yɛ fɛ mmerɛw nanso tumi wom. Ɛmfa ho sɛ filter bɛn na wuhia no, ɛda adi kɛse sɛ ɛyɛ nea wotumi hu. Nea wuhia ara ne sɛ, CSS kakra ne HTML form elements kakraa bi ...

Nhwɛso a ɛyɛ adwuma ni:

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

Momma Yɛnsi No Anammɔn biara

1. Nea edi kan no yehia HTML nhyehyɛe a yɛtaa yɛ wɔ Gridzy mu na yɛhyehyɛ class din ma gallery nneɛma nyinaa sɛnea ɛbɛyɛ a yebetumi ayɛ filter wɔ ɛno akyi

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

Wɔ saa nhwɛsoɔ yi mu no yɛde class baako pɛ na ɛdi dwuma ma element biara. Nanso wobɛtumi nso ahyɛ adesua ahodoɔ pii ama element baako, sɛ ɛsɛ sɛ saa element no yɛ nea wotumi hu denam filter ahodoɔ so a.

2. Afei yɛde buttons bi ka ho a yɛbɛtumi afa so asesa filters no afei

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

Sɛ́ anka wode buttons no bedi dwuma no, wubetumi nso de form elements afoforo te sɛ checkboxes, radio buttons, select fields ne nea ɛkeka ho adi dwuma.

Sɛnea wubetumi ahu no, bɔtn ahorow no bo yɛ CSS a wɔtaa paw. Sɛ yɛwie pɛ a, sɛ yɛbɔ bɔtn a ɛte saa so a, ɛbɛda mfonini ahorow a ɛne saa CSS selector no hyia no adi. Mfiridwuma mu no ɛde filter option no si saa botae yi so kɛkɛ.

Wubetumi nso de selectors a ɛyɛ den kɛse adi dwuma. Sɛ nhwɛso no :not(.animals) nso bɛyɛ adwuma, ne .animals.people ne .animals, .people .

3. Nea etwa to no, yɛde buttons no hyɛ div container mu na yɛkyekyere no wɔ Gridzy gallery no mu, denam filterControls option a yɛde besi hɔ no so:

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

Sɛnea wubetumi ahu no, yɛde CSS selector nso di dwuma ma filterControls option no. div container a ɛwɔ id attribute no nkutoo na ɛsom sɛ ɛbɛma buttons no ayɛ mmerɛw sɛ wobɛpaw denam saa CSS selector no so.

Ɛno ne no!

Sɛ wopɛ JavaScript ano aduru a, hwɛ API no .

API

Ɛwom sɛ Gridzy wɔ n’ankasa API de, nanso wobetumi ayɛ nneɛma dodow no ara a enni mu, denam DOM no a wɔbɛsakra no ara kwa so. Gridzy bɛhyɛ no nsow na wayɛ nsakrae wɔ grid no mu. Nanso API a tumi wom yiye nso wɔ hɔ ...

DOM no a wɔde di dwuma

Wɔ Document Object Model (DOM) manipulations nyinaa mu no yɛdi kan hia container element no:

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

Fa Mfonini ahorow Ka Ho

Ɛho hia sɛ wobɛkyekyere na woahyɛ abofra element foforo no ma ansa na wode aka container element no ho. Sɛ ɛnte saa a Gridzy ntumi nhu nsusuwii a ɛfata.

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

Yi Mfonini ahorow no Fi hɔ

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

Sesa Nneɛma a Wobɛpaw

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

Nsɛm pii fa DOM no a wobɛsesa ho no wobɛtumi ahunu wɔ MDN wɛb docs . Nnianim asɛm bi nso wɔ hɔ a ɛfa DOM ho a ɛwɔ hɔ.

API a ɛyɛ ne dea

Sɛ yɛde API no bedi dwuma a, yedi kan hia Gridzy nhwɛso no, a ɛkyekyere Gridzy container element no:

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

Nya Option a Wobɛpaw

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

Nya Nneɛma a Wobɛpaw Nyinaa

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

Set Nneɛma a Wobɛpaw

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

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

Fa Filter di dwuma

Filter a wode bedi dwuma no yɛ sɛ wobɛhyehyɛ option filter a ebetumi ayɛ CSS selector biara a ɛfata:

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

Fa Callback Dwumadi ahorow ka ho

DEPRECATED firi version 2.4.0
Fa nnɛyi Nsɛm a esisi a ɛyɛ mmerɛw kɛse no di dwuma mmom. Hwɛ ɔfã a edi hɔ no na woanya nsɛm pii.

~~Gridzy.js 2 boa akwan bi a wɔfa so yɛ callback dwumadie. Wobetumi de API a ɛyɛ ne de no nkutoo so asiesie, nanso te sɛ akwan afoforo no ara pɛ:~~

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

	~~Nkyerɛmu~~
~~`onBeforeOptionsChanged`~~	~~Callback function a wɔfrɛ no tẽẽ ansa na woahyɛ options.~~
~~`onOptionsChanged`~~	~~Callback function a wɔfrɛ no tẽẽ bere a wɔasiesie options akyi.~~
~~`onBeforeRender`~~	~~Callback function a wɔfrɛ no tẽẽ ansa na wɔakyerɛ ase.~~
~~`onRender`~~	~~Callback function a wɔfrɛ no tẽẽ wɔ rendering akyi.~~

Fa Nsɛm a Esisii Di Dwuma

efi bere a wɔde nkyerɛase 2.4.0

Wubetumi de Gridzy nsɛm a esisi adi dwuma te sɛ JavaScript nsɛm a ɛtaa ba no 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.
});

Wɔtow nsɛm bi a esisi wɔ Gridzy container element no so na nsɛm afoforo nso tow wɔ ade ankorankoro element ahorow a ɛwɔ container element no mu no so.

Nsɛm a esisii a wɔtow wɔ Gridzy container element no so:

	Nkyerɛmu
`gridzyBeforeInit`	Ogya ansa na gallery ahyɛ ase.
`gridzyInit`	Ogya ahorow akyi gallery initialization.
`gridzyBeforeOptionsChanged`	Fires ansa na woahyɛ options.
`gridzyOptionsChanged`	Fires bere a woahyɛ options akyi.
`gridzyBeforeRender`	Ogya ansa na wɔakyerɛ ase.
`gridzyRender`	Ogya ahorow bere a wɔakyerɛ ase akyi.

Sɛ wopa nsɛm biara a esisi wɔ ha a, yɛsrɛ wo fa mmoa adesrɛ mena .

event.target de Gridzy akoraeɛ element no ma.
event.detail.instance de Gridzy nhwɛsoɔ no ma.

Nsɛm a esisi a wɔtow tuo wɔ ade no mu nneɛma so:

	Nkyerɛmu
`gridzyItemBeforeInit`	Fires ansa na ade no afi ase.
`gridzyItemInit`	Fires akyi ade initialization.
`gridzyItemLoading`	Fires bere a ade no afi ase load.
`gridzyItemReady`	Ogya bere a ade no ayɛ krado ama grid akontaabu. Enti wonim aspect ratio no, nanso ebia mfonini no da so ara reyɛ load.
`gridzyItemComplete`	Fires bere a ade mfonini no ayɛ loaded koraa.

Sɛ wopa nsɛm biara a esisi wɔ ha a, yɛsrɛ wo fa mmoa adesrɛ mena .

event.target de adeɛ no element a ɛfa ho no ma.
event.detail.instance de Gridzy nhwɛsoɔ no ma.

API – Wiase nyinaa

Dwumadie bi wɔ hɔ a ɛde ne ho firi Gridzy nhwɛsoɔ ho. Enti enhia sɛ yenya nhwɛso bi ansa na yɛanya.

Nya Default Option a Wobɛpaw

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

Nya Default Options Nyinaa

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

Set Default Nneɛma a Wobɛpaw

Wei nsiesie Gridzy nhwɛsoɔ a wɔahyɛ aseɛ dedaw nyinaa mu akwan, na mmom ɛkyerɛkyerɛ nnyinasoɔ ma nhwɛsoɔ foforɔ. Nanso, sɛ wɔbɛsan de nhwɛsoɔ a ɛwɔ hɔ dada no mu option bi asiesie denam boɔ null so a, ɛde default botaeɛ foforɔ no bedi dwuma.

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

Wubetumi de eyi adi dwuma de asiesie akwan horow wɔ wiase nyinaa, sɛ wofrɛ no ansa na DOM ayɛ krado a. Enti anka ɛho renhia sɛ wode options sisi hɔ sɛ attributes bio.

Nneɛma a wɔde yɛ adwuma wɔ ɔkwan a ɛyɛ adwuma ankasa so

Bere tenten a Gridzy.js 2 automatisms nyinaa yɛ adwuma no, ɛho nhia sɛ wɔfa akwan a ɛwɔ aseɛ ha yi. Nanso wobetumi adum automatisms no de Gridzy adi dwuma wɔ atetesɛm kwan so:

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

Saa nhyehyeɛ yi bi ntumi mfa data-gridzy- attributes anaa setOptions() so nsiesie, ɛnam nteaseɛ nti:

	Botae a Wɔde Di Dwuma	Nkyerɛmu
`autoInitOnDomReady`	`true`	Detects elements a class `gridzy` wɔ page loading na initializes wɔn. Wobɛtumi asiesie denam `Gridzy.setDefaultOptions()` so.
`autoInitOnDomMutation` MutationObserver a Wɔde Hwɛ Nneɛma Mu	`true`	Detects elements foforo ne class `gridzy` bere a epue wɔ DOM no mu ara pɛ na initializes. (sɛ nhwɛso no, wɔ kratafa nsakrae a wɔde bedi dwuma ho) Wobɛtumi asiesie denam `Gridzy.setDefaultOptions()` so.
`autoSyncChildListMutation` MutationObserver a Wɔde Hwɛ Nneɛma Mu	`true`	Hu sɛ wɔde mmofra nneɛma (mfonini ahorow) aka ho anaasɛ wɔayi afi hɔ, na ɛyɛ grid no foforo ankasa. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Kyerɛkyerɛ sɛ ebia wɔtaa de `data-gridzy-` su ahorow no di dwuma anaasɛ wɔmfa nni dwuma. Sɛ eyi yɛ `false` a wobetumi de options asiesie denam proprietary API no nkutoo so. Settable via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver a Wɔde Hwɛ Nneɛma Mu	`true`	Hu nsakrae a aba `data-gridzy-` su ahorow mu, na ɛyɛ grid no foforo ankasa. Afei nso ɛhunu sɛ wɔde `gridzyAnimated` adesua no aka ho anaa wɔayi afiri mu ne sɛ `style` attribute nsakraeɛ ba. Sɛ `useOptionAttributes` yɛ `false` a, ɛhu `style` su nsakraeɛ nko ara. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver a Wɔde Hwɛ Nneɛma Mu	`true`	Hu nsakrae a ɛba wɔ `class` su ahorow mu wɔ mmofra nneɛma (mfonini ahorow) nyinaa mu. Ɛfata a ɛfa filters ho. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver a Wɔde Hwɛ Nneɛma Mu efi bere a wɔde nkyerɛase 2.5.0	`true`	Hu nsakrae a ɛba `src` su ahorow mu wɔ mfonini nyinaa mu. Ɛfata bere a wɔde di dwuma wɔ React anaa nhomakorabea ahorow a ɛte saa ho no. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver no yɛ nea ɛwɔ hɔ efi bere a wɔde nkyerɛase 2.6.0	`true`	Hu nsakrae a ɛba wɔ element no trɛw mu. Ɛfata wɔ responsive design ho. (Ansa na version 2.6.0 reba no na wɔde window resize event listener di dwuma) Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Fa Nsa Fa Fi Ase

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

Sɛe Nhwɛso no

Sɛ yɛbɛka no tiawa a, ɛne Gridzy a wɔde hyɛɛ aseɛ no bɔ abira.

gridzyInstance.destroy();
gridzyInstance = null;

Sync Mmofra Nkyerɛwde a Wɔde Nsa Yɛ

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

Sync Abofra Baako Element a Wɔde Nsa Yɛ

Mpɛn pii no, ɛho nhia, gye sɛ wɔ nsɛm a ɛntaa nsi koraa mu.

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

Sync Attributes a Wɔde Nsa Yɛ

Hyɛ no nsow sɛ ɛsɛ sɛ useOptionAttributes nhyehyɛe no yɛ true ma eyi.

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

Ahoɔden a Wɔde Kyerɛkyerɛ

Mpɛn pii no, ɛho nhia, sɛ mpo wɔadum automatisms nyinaa a

gridzyInstance.render();

Nkyerɛase 2.x