Ɖiɖe 2.x – Gridzy.Gallery .

È ko lilɛ tɛn ɛntɛnɛti tɔn ɔ dó gbè ɖevo mɛ éɖesunɔ. Nú nǔɖe ma ɖò wɛn ǎ hǔn, kɛnklɛn bo kpɔ́n wema Glɛnsigbe tɔn lɛ.

Nǔ e è nɔ zán é

Mi zé Gridzy sín wema lɛ ɖó serveur mitɔn jí bo sɔ́ dó tɛn ɛntɛnɛti tɔn mitɔn jí (hwɛhwɛ ɔ, ɖò ta ɔ sín akpáxwé):

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

Gɔ́ HTML sín kodɛ (fí ɖebǔ ɖò agbaza sín akpáxwé ɔ mɛ):

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

Énɛ́ ɔ́ ɖíe! Kpɔ́ndéwú e nɔ w’azɔ̌ bǐ mlɛ́mlɛ́ é ɖé nɛ. È byɔ ɖɔ è ni bɛ́ nǔ ɖevo ǎ.

Nǔjlɛ́dónùwú

Ali e bɔkun hugǎn bɔ è na bló Gridzy ɖó é wɛ nyí ɖɔ, è ni zán HTML sín jijɔ lɛ kpowun. Mi ɖo na ze data-gridzy- ɖo nukɔn nu nyikɔ mitɔn lɛ kpowun. Enɛ wu ɔ, bo na dó sɔ́ tɛnmɛ e spaceBetween ɖó ɔ, a na sɔ́ nǔ e nɔ nyí data-gridzy-spaceBetween é gɔ́ na.

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

Nǔ taji e è sixu cyan lɛ é

	Nǔ e è sɔ́ ɖ'ayǐ é	Tinmɛ
`animate`	`true`	É nɔ ɖɔ ɖɔ è ɖó na zán nǔ e nɔ xlɛ́ nǔ lɛ é hwenu e è na ɖyɔ ɖiɖe ɔ é à jí (kpɔ́ndéwú ɔ, hwenu e è ɖò flɛtɛli nǔjlajla tɔn ɔ sín ɖaxó ɖyɔ wɛ é alǒ hwenu e è ɖò nǔ e nɔ xlɛ́ nǔ é ɖé sɔ́ ɖó te wɛ é).
`layout`	`justified`	É nɔ tinmɛ tuto e è zán é. Gridzy.js 2 nɔ ɖ'alɔ ɖiɖe vovo we lɛ mɛ `justified` kpodo `waterfall` kpo. Ye mɛ ɖokpo ɖokpo ɖó nǔ e é nɔ sɔ́ ɖ’ayǐ lɛ é, bɔ a sixu mɔ ɖò tavo elɔ glɔ́.
`filter`	`*`	É nɔ ɖɔ ɖiɖe ɖěɖee è ɖó na xlɛ́ lɛ é. CSS-selector ɖebu sixu nyi xɔ akwɛ ɖo fi. Hwɛhwɛ ɔ, é nɔ sɔ́ éɖée ɖó te gbɔn `filterControls` gblamɛ (kpɔ́n nǔ e bɔ d’ewu é). Kpɔ́n Filtre lɛ .
`filterControls`		É nɔ xlɛ́ nǔ e è sixu zán dó xò ɖiɖe lɛ kplé lɛ é. CSS selector ɖebu, e nɔ sɔ HTML form nu lɛ ɔ, e sixu zan ɖi xɔ akwɛ ɖo fi. Kpɔ́n Filtre lɛ .
`autoConsiderScrollBars`	`true`	Bo na dó ɖɔ gblǒ e ɖò te é ɖ’ayǐ enyi ɖiɖe lɛ tɔ́n alǒ bú ɔ nɛ. E nɔ kplɔn mɛ hwebinu ɖɔ e ni jo e ɖo `true` ji afi nu automatisme enɛ ɔ dɔn tagba lɛ wa.

Justified Nǔ e è sixu sɔ́ ɖ’ayǐ lɛ é

	Nǔ e è sɔ́ ɖ'ayǐ é	Tinmɛ
`autoFontSize`	`false`	É nɔ jla nǔ e ɖò gbàví ɖokpo ɖokpo mɛ é ɖó éɖesunɔ, sɔgbe xá ɖaxó e gbàví ɔ ɖó ɖ’ayǐ é. Ðò xógbe ɖevo mɛ ɔ, è nɔ sɔ́ nǔ e nɔ nyí font-size é ɖó te céɖécéɖé ǎ.
`desiredHeight`	`190`	É nɔ xlɛ́ gaɖiɖi e è jló é nú nǔ e ɖò tlɛnmɛ lɛ é. È na jlɛ́ gaɖiɖi nǔgbo ɔ tɔn sɔgbe xá gblǒ e ɖò finɛ é kpo nǔ e ɖò tlɛnmɛ lɛ é kpo.
`hideOnMissingImage`	`true`	É nɔ hwla gbǎví e mɛ ɖiɖe ɖěɖee è ma sixu hɛn ǎ lɛ é ɖè lɛ é.
`spaceBetween`	`4`	É nɔ xlɛ́ fí e nǔ lɛ ɖè é ɖò piksɛli lɛ mɛ.
`lastRowAlign` sín hwenu e è ɖè 2.3.0 tɔ́n é.	`justified`	É nɔ tínmɛ walɔ e ɖò tɔ̀ gudo tɔn ɔ mɛ é. Nu e è na lɛ ɔ wɛ nyi `left` , `center` , `right` kpodo `justified` kpo .
`singleRowAlign` sín hwenu e è ɖè 2.3.0 tɔ́n é.	`justified`	É nɔ tínmɛ walɔ ɔ nú tlɛnmɛ ɖokpo géé wɛ tíìn ɔ nɛ. Nu e è na lɛ ɔ wɛ nyi `left` , `center` , `right` kpodo `justified` kpo .
~~`fillLastRow`~~ ~~sín hwenu e è ɖè 2.1.0 tɔ́n é.~~	~~`true`~~	È ÐÓ SÍN sín 2.4.0 mɛ. (È ƉƆ xó sín 2.3.0 mɛ ) Nɔ tò ɖiɖe lɛ bonu tlɛnmɛ gudogudo tɔn ɔ ni nɔ gɔ́ bǐ mlɛ́mlɛ́ hwebǐnu. Enyi a ɖò linlin wɛ bo na gɔ́ ɖiɖe lɛ na ɖò hlɔnhlɔn mɛ ɔ, é sixu nyɔ́ ɖɔ a ni súnsún nǔ enɛ. É nɔ wà nǔ ɖebǔ dó tlɛnmɛ ɖokpo ɖokpo jí ǎ (kpɔ́n `fillSingleRow` ).
`fillSingleRow` sín hwenu e è ɖè 2.1.0 tɔ́n é.	~~`true`~~	È ÐÓ SÍN sín 2.4.0 mɛ. (È ƉƆ xó sín 2.3.0 mɛ ) Enyi tlɛnmɛ ɖokpo géé wɛ ɖò finɛ ɔ, é nɔ tò ɖiɖe lɛ bonu tlɛnmɛ ɔ na nɔ gɔ́ bǐ mlɛ́mlɛ́ hwebǐnu. Enyi é sixu jɛ bɔ ɖiɖe ɖokpo alǒ wè jɛn a ɖó ɖò ɖiɖexlɛ́tɛn ɔ mɛ ɔ, é sixu nyɔ́ ɖɔ a ni sú nǔ enɛ sín azɔ̌.

Waterfall Nǔ e è sixu sɔ́ ɖ’ayǐ lɛ é

	Nǔ e è sɔ́ ɖ'ayǐ é	Tinmɛ
`autoFontSize`	`false`	É nɔ jla nǔ e ɖò gbàví ɖokpo ɖokpo mɛ é ɖó éɖesunɔ, sɔgbe xá ɖaxó e gbàví ɔ ɖó ɖ’ayǐ é. Ðò xógbe ɖevo mɛ ɔ, è nɔ sɔ́ nǔ e nɔ nyí font-size é ɖó te céɖécéɖé ǎ.
`desiredWidth`	`250`	É nɔ tinmɛ gblǒ e è jló na ɖó nú hǔn lɛ é. È na jlɛ́ gblǒ nǔgbo ɔ sɔgbe xá gblǒ e ɖò finɛ é kpo hlɔnhlɔn nabi e ɖò xɔgbigbázɔ́ ɔ mɛ é kpo.
`hideOnMissingImage`	`true`	É nɔ hwla gbǎví e mɛ ɖiɖe ɖěɖee è ma sixu hɛn ǎ lɛ é ɖè lɛ é.
`horizontalOrder`	`false`	É nɔ xlɛ́ ɖɔ è nɔ sɔ́ nǔ lɛ ɖó tɛn ɖokpo ɖokpo mɛ ɖò hǔn ɖokpo ɖokpo mɛ sín amyɔxwé jɛ ɖisixwé, enɛ gudo ɔ, é nɔ lɛ́vɔ bɛ́ ɖò hǔn e ɖò amyɔxwé hugǎn é mɛ ɖò vo nú hǔn e mɛ hǔn ɔ ɖè hugǎn é. Ðò xógbe ɖevo mɛ ɔ, è na sɔ́ nǔ lɛ ɖó hǔn e ɖó ga kpɛví hugǎn é mɛ hwebǐnu.
`spaceBetween`	`4`	É nɔ xlɛ́ fí e nǔ lɛ ɖè é ɖò piksɛli lɛ mɛ.
`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`.

Nǔ e è sixu sɔ́ ɖ’ayǐ lɛ é ɖevo lɛ

Nú a na mɔ nǔ ɖevo lɛ hǔn, kpɔ́n API .

HTML tinmɛ tɔn

HTML sín tuto Gridzy tɔn e bɔkun hugǎn é ɖíe:

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

É ɖò mɔ̌ có, Gridzy nɔ ɖyɔ tawun bɔ a sixu zán ɖibla nyí HTML sín tuto ɖevo ɖebǔ. Nǔ kpɛɖé jɛn tíìn bɔ è ɖó na gbéjé kpɔ́n:

Vǐ ɖokpo ɖokpo e ɖò nǔ e mɛ è nɔ bɛ́ nǔ dó é mɛ é nɔte nú nǔ ɖokpo ɖò ɖiɖe ɔ mɛ.
É ɖò mɔ̌ có, è sixu lɛ́ zán nǔ e è nɔ ylɔ ɖɔ container é kpo vǐ tɔn lɛ kpo, ɖi ul kpo li (lin tamɛ dó nǔ e è sɔ́ ɖ’ayǐ ɖò navigateur jí lɛ é jí kpowun).
Nu img nuɖe ma nyi vi tlɔlɔ ɖesu a ɔ, e ɖo hudo gridzyImage tɔn.

Enɛ wu ɔ, elɔ lɔ nyí HTML sín tutomɛ e ɖò azɔ̌ wà wɛ é ɖé:

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

Ðò taji ɔ, enyi a jló na gɔ́ xógbe lɛ na ɔ, a ɖó na ɖó tuto HTML tɔn e yì nukɔn é ɖé. Bo na dó tuùn nǔ gègě dó wǔ tɔn hǔn, kpɔ́n Captions & Skins .

Xóta lɛ kpo Agbaza lɛ kpo

Nú a jló ná gɔ́ xógbe ɖé lɛ́ɛ nú ɖiɖe towe ɔ́, a ɖó ná tínmɛ lě e é ná cí é. Enɛ wu ɔ, è nɔ mɔ anyǔ e è ko ɖɔ ɖ’ayǐ lɛ é ɖé lɛ. Skin ɖokpo ɖokpo e mɛ CSS file ɖe ɔ. A ɖo na zé wema elɔ gɔ́ nú wema Gridzy tɔn taji lɛ (hwɛhwɛ ɔ, ɖò ta ɔ sín akpáxwé):

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

Gɔ́ na ɔ, a ɖó hudo HTML sín tutomɛ nukɔntɔn ɖé tɔn:

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

Enyi a ɖò nǔ kanbyɔ hwiɖée wɛ dó HTML sín tuto ɔ wu hǔn, kpɔ́n Semantic HTML .

Nu xota ɔ mi hɛn ɔ mi na zan tag ɖebu ɔ, mi hɛn ɔ mi na mɔ ɖɔ e ɖo gridzyCaption . Nu img ɔ ɖo hudo gridzyImage tɔn.

Kpɔ́ndéwú e ɖò aga é xlɛ́ we agbaza gridzySkinClassic . Bo na dó zán ɖevo ɔ, ɖyɔ nyikɔ agbaza ɔ tɔn kpo nǔ elɔ lɛ ɖokpo kpo kpowun:

Agbaza e ɖò mɛ lɛ é

	Kplékplé e ɖò te lɛ é
Agbaza vɔvɔ nǔ ɖagbe ɖé wɛ bo na dó bɛ́ agbaza mɛɖesunɔ tɔn . nukúnnúmɔjɛnǔmɛ tlɔlɔ	`gridzySkinBlank`
gridzySkinClassic nukúnnúmɔjɛnǔmɛ tlɔlɔ	`gridzySkinClassic` `gridzySkinClassicLight`(È sɔ́ nɔ zán ǎ sín 2.6.0 mɛ)
gridzySkinFullOverlay nukúnnúmɔjɛnǔmɛ tlɔlɔ	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(È sɔ́ nɔ zán ǎ sín 2.6.0 mɛ)
gridzySkinLift nukúnnúmɔjɛnǔmɛ tlɔlɔ	`gridzySkinLift` `gridzySkinLiftLight`(È sɔ́ nɔ zán ǎ sín 2.6.0 mɛ)
gridzySkinMagnifier zoom sín azɔ̌ ɖò mɛ ǎ nukúnnúmɔjɛnǔmɛ tlɔlɔ	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(È sɔ́ nɔ zán ǎ sín 2.6.0 mɛ)

Skin e ɖò aga lɛ é bǐ wɛ ɖó hudo CSS tɔn kɛɖɛ, amɔ̌, skin ɖevo lɛ tíìn bo lɛ́ ɖó hudo JavaScript tɔn:

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

	Kplékplé e ɖò te lɛ é
gridzySkinBlur é nɔ w'azɔ̌ ɖò IE mɛ ǎ . nukúnnúmɔjɛnǔmɛ tlɔlɔ	`gridzySkinBlur` `gridzySkinBlurLight`(È sɔ́ nɔ zán ǎ sín 2.6.0 mɛ)
gridzySkinCard nukúnnúmɔjɛnǔmɛ tlɔlɔ	`gridzySkinCard` `gridzySkinCardLight`(È sɔ́ nɔ zán ǎ sín 2.6.0 mɛ)

Agbaza sín alɔkpa lɛ

Sín 2.6.0 mɛ ɔ, Options tíìn bo na dó bló tuto nú skins e ɖò mɛ lɛ é. É ɖò mɔ̌ có, è sixu sɔ́ sinmɛ e ɖò gudo é, sinmɛ nǔwlanwlán tɔn kpo ɖiɖe nǔwlanwlán tɔn kpo. Mi ɖo na zan CSS sin nuɖonukun lɛ kpowun ɖi mi mɔ ɖo fi ɔ:

<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ɔ́n nǔ e nɔ ɖyɔ lɛ é kpodo xɔ akwɛ e è nɔ sɔ́ ɖó te nú agbaza ɖokpo ɖokpo é kpo ɖò fí:

gridzySkinClassic

Nǔ e nɔ ɖyɔ é	Nǔ e è sɔ́ ɖ'ayǐ é	Dɔnùesè
`--background`	`rgba(0, 0, 0, .7)`	nɔ yí gbè nú CSS sín jlɛjininɔ ɖebǔ
`--color`	`rgb(255, 255, 255)`	nɔ yí gbè nú CSS sín sinmɛ ɖebǔ
`--text-shadow`	`none`	nɔ yí gbè nú CSS sín nǔwlanwlán sín ɖiɖe ɖebǔ

gridzySkinFullOverlay

Nǔ e nɔ ɖyɔ é	Nǔ e è sɔ́ ɖ'ayǐ é	Dɔnùesè
`--background`	`rgba(0, 0, 0, .7)`	nɔ yí gbè nú CSS sín jlɛjininɔ ɖebǔ
`--color`	`rgb(255, 255, 255)`	nɔ yí gbè nú CSS sín sinmɛ ɖebǔ
`--text-shadow`	`none`	nɔ yí gbè nú CSS sín nǔwlanwlán sín ɖiɖe ɖebǔ

gridzySkinLift

Nǔ e nɔ ɖyɔ é	Nǔ e è sɔ́ ɖ'ayǐ é	Dɔnùesè
`--background`	`rgba(0, 0, 0, .7)`	nɔ yí gbè nú CSS sín jlɛjininɔ ɖebǔ
`--color`	`rgb(255, 255, 255)`	nɔ yí gbè nú CSS sín sinmɛ ɖebǔ
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	nɔ yí gbè nú CSS sín nǔwlanwlán sín ɖiɖe ɖebǔ

gridzySkinMagnifier

Nǔ e nɔ ɖyɔ é	Nǔ e è sɔ́ ɖ'ayǐ é	Dɔnùesè
`--background`	`rgba(0, 0, 0, .7)`	nɔ yí gbè nú CSS sín jlɛjininɔ ɖebǔ
`--color`	`rgb(255, 255, 255)`	nɔ yí gbè nú CSS sín sinmɛ ɖebǔ

Agbaza élɔ́ nɔ yí gbè nú --text-shadow ǎ

gridzySkinBlur

Nǔ e nɔ ɖyɔ é	Nǔ e è sɔ́ ɖ'ayǐ é	Dɔnùesè
`--background`	`rgba(0, 0, 0, .7)`	nɔ yí gbè nú CSS sín jlɛjininɔ ɖebǔ
`--color`	`rgb(255, 255, 255)`	nɔ yí gbè nú CSS sín sinmɛ ɖebǔ
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	nɔ yí gbè nú CSS sín nǔwlanwlán sín ɖiɖe ɖebǔ

gridzySkinCard

Nǔ e nɔ ɖyɔ é	Nǔ e è sɔ́ ɖ'ayǐ é	Dɔnùesè
`--background`	`rgba(0, 0, 0, 1)`	nɔ yí gbè nú CSS sín jlɛjininɔ ɖebǔ
`--color`	`rgb(255, 255, 255)`	nɔ yí gbè nú CSS sín sinmɛ ɖebǔ
`--text-shadow`	`none`	nɔ yí gbè nú CSS sín nǔwlanwlán sín ɖiɖe ɖebǔ

Agbaza e è ko ɖɔ ɖ’ayǐ lɛ é bǐ nɔ yí gbè nú xógbe klewun klewun lɛ kɛɖɛ. A sixu bló anyǔ towe lɛ ɖesu bo lɛ́ syɛn hú mɔ̌. Mi kɛnklɛn bo kpɔn Style Gridzy .

Style Gridzy

Enyi agbaza e è ko ɖɔ ɖ’ayǐ é ɖě ma sɔgbe xá hudo towe lɛ ǎ ɔ, a sixu bló hwiɖesunɔ tɔn.

Ali e bɔkun hugǎn é wɛ nyí ɖɔ a ni jɛ nukɔn bo kpɔ́n anyǔ e ko tíìn é ɖé, bo bló bɔ é na sɔgbe xá hudo towe lɛ. É ɖò mɔ̌ có, è ɖó na hɛn gridzySkinBlank e è ko ɖɔ ɖ’ayǐ lɛ é dó ayi mɛ, bo na lɛ́ na dodónu ɖagbe ɖé, bo na lɛ́ na wema ɖagbe ɖé ɖò CSS-wema ɔ mɛ:

/** 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ín wěmà ɔ mɛ ɔ, a na mɔ gridzySkinBlank , gridzyImage kpodo gridzyCaption kpo . Gridzy ɖesu ɖo hudo klasi enɛ lɛ tɔn ǎ. Ye nɔ zán nú ɖiɖe ɖiɖe kpowun bɔ enɛ wu ɔ, a sixu ɖè ye síìn alǒ ɖyɔ nyikɔ nú ye enyi a jló ɔ nɛ.

Gɔ́ na ɔ, a na mɔ CSS sín gbɛ̌ta gridzyItem . Gridzy nɔ sɔ́ klasi enɛ ɖó éɖesunɔ jí nú vǐ tlɔlɔ e ɖò nǔ taji e ɖò nǔglɔ é mɛ lɛ é bǐ. Enɛ wu ɔ, a sixu zán klasi elɔ dó bló nǔ e ɖò xɔgbigbázɔ́ towe mɛ lɛ é ɖó.

Lin Nǔ Taji lɛ Ðò Ayi mɛ .

Nǔ e ɖò nǔ ɔ mɛ lɛ é ɖó na sɔgbe xá nǔ lɛ bǐ mlɛ́mlɛ́. Lin tamɛ dó nǔ e ɖò nǔ ɔ mɛ é sín ɖaxó jí na ɖyɔ dandan. Zǎn jlɛjininɔ ɖò kanweko jí ɖò jlɛjininɔ piksɛli tɔn tɛnmɛ. Bo kpɔ́n nǔ e è nɔ ylɔ ɖɔ Gridzy é sín ɖiɖe autoFontSize , ee nɔ cá font-size ɔ ɖó nǔ e ɖò gbǎví ɔ mɛ é sín ɖaxó jí é.
Nǔ ɖokpo ɖokpo ɖó na ɖó ɖiɖe e è tinmɛ ganji é ɖé. Nǔ ɔ sín ɖiɖe na ɖyɔ gbeɖé ǎ, bɔ è ɖó hudo tɔn bo na dó jlɛ́ ɖiɖe ɔ. Enɛ wu ɔ, enyi nǔ ɖé ma ɖó ɖiɖe e è tinmɛ ganji é ɖé ǎ ɔ, jlaɖó ɖ’ayǐ kpo alɔ kpo (kpɔ́ndéwú ɔ, gbɔn css jí).

Hweɖelɛnu ɔ, é sixu bɔwǔ bɔ è na bló nǔ e ɖò nǔ lɛ mɛ lɛ é ɖó cobɔ Gridzy na jɛ nǔ lɛ bɛ́ jí. É ɖò mɔ̌ có, è ɖó na ɖè gridzy alǒ javascript Gridzy sín wema ɔ síìn nú táan ɖé kpowun nú enɛ.

Énɛ́ ɔ́ ɖíe! Nǔ e sín hudo a ɖó bo na dó bló agbaza towe ɖesu é nɛ. Agbaza e è ko ɖɔ ɖ’ayǐ lɛ é gègě nɔ zán nǔ hú mɔ̌ ǎ.

Amɔ̌, é sixu lɛ́ tíìn nú a jló ɔ ...

Agbaza Nukɔntɔn lɛ

Gridzy nɔ zan CSS gege hu gridzyItem kɛɖɛ. Ye mɛ gègě na nɔ jlaɖó yeɖesunɔ bɔ a sixu zán ye nú styling lɔmɔ̌.

Kplékplé Nǔɖògbɛ Taji lɛ Tɔn

Azɔ̌xɔsa ɔ sín nyikɔ	Tinmɛ
`gridzy` bo na dó bló tuto kpo alɔ kpo	Gridzy nɔ mɔ nǔ e ɖò klasi enɛ mɛ lɛ é éɖesunɔ bo nɔ bɛ́ ye.
`gridzyAnimated`	E na sɔ ɖo eɖesunɔ ji nu `animate` nyi `true` . Nú è sɔ́ alɔ dó bló kplékplé élɔ́ ɔ́, nǔ e è nɔ ylɔ́ ɖɔ `animate` lɔ ná nyí `true` (zɛ ényí è sɔ́ ɖó `false` jí céɖécéɖé ɔ́).

Nǔ Kplékplé

Azɔ̌xɔsa ɔ sín nyikɔ	Tinmɛ
`gridzyItem`	È na sɔ́ ɖ’ayǐ tlolo bɔ nǔ ɔ na bɛ́ nǔwiwa nukɔntɔn ɔ. È na ɖè síìn gbeɖé ǎ.
`gridzyItemInitializing`	È na sɔ́ ɖ’ayǐ tlolo bɔ nǔ ɔ na bɛ́ nǔwiwa nukɔntɔn ɔ. É na ɖyɔ kpo `gridzyItemReady` kpo hwenu e nǔ ɔ na bɛ́ bǐ mlɛ́mlɛ́ é. É nyí ɖɔ ɖiɖe lɛ ko gɔ́ bǐ mlɛ́mlɛ́ ǎ (kpɔ́n `gridzyItemLoading` ), amɔ̌, nǔ ɔ ko ɖò gbesisɔmɛ bo na mɔ.
`gridzyItemReady`	É ná ɖyɔ `gridzyItemInitializing` tlolo bɔ nǔ ɔ́ ná bɛ́ bǐ mlɛ́mlɛ́. È na ɖè síìn gbeɖé ǎ. É nyí ɖɔ ɖiɖe lɛ ko gɔ́ bǐ mlɛ́mlɛ́ ǎ (kpɔ́n `gridzyItemComplete` ), amɔ̌, nǔ ɔ ko ɖò gbesisɔmɛ bo na mɔ.
`gridzyItemLoading`	È na sɔ́ ɖ’ayǐ tlolo bɔ nǔ ɔ na bɛ́ nǔwiwa nukɔntɔn ɔ. É na ɖyɔ kpo `gridzyItemComplete` kpo hwenu e ɖiɖe e ɖò mɛ lɛ é (hwɛhwɛ ɔ, ɖokpo géé) na gɔ́ngɔ́n tlolo é.
`gridzyItemComplete`	É na ɖyɔ `gridzyItemLoading` tlolo bɔ ɖiɖe e ɖ’emɛ lɛ é (hwɛhwɛ ɔ, ɖokpo géé wɛ) na gɔ́ bǐ mlɛ́mlɛ́. È na ɖè síìn gbeɖé ǎ.
`gridzyItemInitialToVisible`	È na sɔ́ ɖó te hwenu e nǔ ɔ na jɛ ɖiɖe jí azɔn nukɔntɔn ɔ tlolo é. È na ɖè nǔ ɔ síìn tlolo bɔ è na mɔ nǔ ɔ bǐ mlɛ́mlɛ́.
`gridzyItemVisible`	È na sɔ́ ɖó te hwenu e nǔ ɔ na ɖò wěxo bǐ mlɛ́mlɛ́ é. È na ɖè nǔ ɔ síìn tlolo bɔ é na jɛ ɖiɖe jí.
`gridzyItemVisibleToHidden`	È na sɔ́ ɖó te hwenu e nǔ ɔ na jɛ búbú jí tlolo é. È na ɖè nǔ ɔ síìn tlolo bɔ è na sɔ́ hwla bǐ mlɛ́mlɛ́.
`gridzyItemHidden`	È na sɔ́ ɖó te tlolo bɔ nǔ ɔ na hwla bǐ mlɛ́mlɛ́. È na ɖè è síìn tlolo bɔ nǔ ɔ na jɛ ɖiɖe jí.
`gridzyItemHiddenToVisible`	È na sɔ́ ɖ’ayǐ tlolo bɔ nǔ ɔ na jɛ ɖiɖe jí (zɛ ɖiɖe nukɔntɔn ɔ wu – kpɔ́n klasi `gridzyItemInitialToVisible` ). È na ɖè nǔ ɔ síìn tlolo bɔ è na mɔ nǔ ɔ bǐ mlɛ́mlɛ́.
`gridzyItemVisibleToVisible`	É na ɖyɔ tlolo bɔ nǔɖe ɖò ɖiɖe ɔ mɛ, amɔ̌, nǔ ɔ ɖesu wɛ bo na nɔ ɖò wěxo. È na ɖè è síìn tlolo bɔ è na fó nǔ e è nɔ ylɔ ɖɔ animation changement é.

Ðò xógbe ɖevo mɛ ɔ, è nɔ sɔ́ nǔ e nɔ xlɛ́ lee nǔ lɛ ɖò yiyi wɛ gbɔn é kpo nǔ e nɔ xlɛ́ ɖɔ nǔ lɛ ɖò jijɛ wɛ lɛ é kpo nɔ bló bɔ ɖiɖe e nɔ tɔ́n lɛ é kpo ee nɔ bú lɛ é kpo nɔ ɖ’ayǐ gbɔn CSS-wema taji Gridzy tɔn gblamɛ.

É ɖò mɔ̌ có, è ɖó na hɛn nǔ e è nɔ ylɔ ɖɔ CSS é dó ayi mɛ, bo na dó sixu bló tuto nú nǔ e nɔ xlɛ́ lee nǔ lɛ nɔ yì gbɔn é kpo nǔ e nɔ xlɛ́ nǔ lɛ é kpo. Dare bo kpɔ́n Gridzy sín CSS ɖaxó ɔ mɛ, bo mɔ nukúnnú jɛ nǔ e a na ɖó na jlaɖó é wu. Xɛsi ɖě ɖò finɛ ǎ, è wlan nǔ lɛ bǐ dó wema mɛ ganji ɖò finɛ.

Mi bló bɔ è na hɛn nǔ ɔ ganji

Enyi a zán ɖiɖe gègě ɔ, é sixu nyí linlin ɖagbe ɖé ɖɔ a ni d’alɔ Gridzy bɔ é na yawu bló glídí ɔ.

Gbɔn ɖiɖe lɛ jí .

Gridzy ɖó hudo ɖiɖe lɛ bǐ tɔn sín jlɛ̌ jí tawun bo na dó jlɛ́ ɖiɖe lɛ. Nǔ enɛ lɛ nɔ zɔ́n bɔ è nɔ lɔn nǔ lɛ, enyi ɖiɖe ɖé lɛ ɖò gbesisɔmɛ bɔ ɖevo lɛ ma ɖò gbesisɔmɛ ǎ ɔ nɛ. Bǎ e mɛ ɖiɖe lɛ sukpɔ́ ɖó é ɔ, bǎ enɛ mɛ wɛ nǔ enɛ sixu dó xomɛsin nú mɛ ɖè.

Bo na dó glɔ́n ali nú jijɔ enɛ ɔ, a ɖó na sɔ́ jijɔ width kpo height tɔn lɛ ɖó nǔ img lɛ bǐ jí kpowun. É ɖò taji ɖɔ è ni sɔ́ jlɛjininɔ e sɔgbe lɛ é ɖó ɖiɖe ɖokpo ɖokpo jí, enyi é ma nyí mɔ̌ ǎ ɔ, ɖiɖe lɛ na cí mɔ̌to ɖɔhun. Nǔ e sɔgbe lɛ é wɛ nyí gblǒ kpo gaɖiɖi kpo ɖiɖe ɖokpo ɖokpo tɔn:

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

Enɛ gudo ɔ, Gridzy sixu jlɛ́ ɖiɖe lɛ tlolo, bo ma ka ɖó na tuùn ɖiɖe lɛ sín ɖaxó tawun ǎ.

Fɔnlínnɔ Hɛn

Bo na dó hɛn ɖiɖe e ɖò ɖiɖe e è nɔ mɔ lɛ é mɛ lɛ é kɛɖɛ ɔ, xwedó afɔ elɔ lɛ kpowun:

Sɔ́ width kpo height sín jijɔ lɛ dó mɛ lee è tinmɛ gbɔn ɖò aga é (ɖó ayi wu ɖɔ a zán jlɛjininɔ e sɔgbe lɛ é)
Ðyɔ src jijɔ lɛ bǐ kpodo data-gridzylazysrc lee é xlɛ́ gbɔn ɖò dò é (nú a ɖó srcset jijɔ lɛ lɔmɔ̌ ɔ, ɖyɔ ye kpodo data-gridzylazysrcset kpo ).

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

Enyi è ɖè afɔ enɛ lɛ gudo ɔ, ɖiɖe lɛ na jɛ ɖiɖe jí tlolo e ye sɛkpɔ alǒ ɖò fí e è nɔ kpɔ́n nǔ ɖè é.

Nǔ e nɔ xlɛ́ lee nǔ lɛ ɖò yiyi wɛ gbɔn é

Nǔ e nɔ xlɛ́ lee nǔ lɛ ɖò yiyi wɛ gbɔn é wɛ nyí wuntun kpɛví e nɔ tɔ́n hwenu e ɖiɖe ɔ ɖò ɖiɖe ɔ hɛn wɛ é. Enyi a zán captions & skins , è na xlɛ́ nǔ e nɔ xlɛ́ lee nǔ lɛ na yì gbɔn é éɖesunɔ. Enyi mɔ̌ ǎ ɔ, a ɖó hudo huzuhuzu ɖé lɛ tɔn:

Mi ze nu img ɖokpo ɖokpo ɖo nu div mɛ .
(alǒ ɖò nǔ ɖevo mɛ – kpɔ́n HTML semantique nú nǔ ɖevo lɛ)
Gɔ́ gridzyImage sín klasi ɔ nú nǔ img ɖokpo ɖokpo .

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

Énɛ́ ɔ́ gúdó ɔ́, a ɖó ná mɔ nǔ e nɔ xlɛ́ ɖɔ nǔ lɛ́ɛ ɖò jijɛ wɛ é, nú ɖiɖe lɛ́ɛ nɔ́ yí hwenu bó ná hɛn nǔ dó jǐ ɔ́.

Filtres

Filtres e ɖò Gridzy mɛ lɛ é bɔkun tawun có, ye ɖó hlɔnhlɔn. Filtre alɔkpa ɖebǔ e a ɖó hudo tɔn é ɔ, é ɖò wɛn ɖɔ é na jɛ. Nu e mi ɖo hudo tɔn ɔ, CSS kpɛɖe kpodo HTML kpɛɖe kpo wɛ ...

Kpɔ́ndéwú azɔ̌wiwa tɔn ɖé ɖíe:

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

Mi nú Mǐ ni Gbá Afɔ Afɔ .

1. Nukɔntɔn ɔ, mǐ ɖó hudo HTML sín tuto Gridzy tɔn tɔn bo na sɔ́ nyikɔ klasi tɔn lɛ ɖó nǔ e ɖò xɔgbigbázɔ́ ɔ mɛ lɛ é bǐ jí bonu mǐ na dó sixu xò ye kplé ɖò enɛ gudo .

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

Ðò kpɔ́ndéwú elɔ mɛ ɔ, klasi ɖokpo géé wɛ mǐ nɔ zán nú nǔ ɖokpo ɖokpo. Amɔ̌, a sixu lɛ́ sɔ́ klasi gègě ɖó nǔ ɖokpo jí, enyi nǔ enɛ ɖó na nyí nǔ e è sixu mɔ gbɔn nǔjlɛdonǔwu gègě jí é ɔ nɛ.

2. Enɛ ɔ gudo ɔ, mi nɔ gɔ́ butɔn ɖe lɛ bɔ mi nɔ gbɔn ye ji bo nɔ ɖyɔ filtre lɛ enɛ ɔ gudo .

<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ɔn lɛ tɛnmɛ ɔ, a sixu lɛ́ zán nǔ ɖevo lɛ ɖi gbǎví lɛ, butɔn hladio tɔn lɛ, tɛnmɛ e è sɔ́ lɛ é kpo nǔ ɖevo lɛ kpo.

Lee a mɔ gbɔn é ɔ, xɔ akwɛ e ɖò butɔn lɛ jí lɛ é wɛ nyí CSS sín nǔ sɔ́tɔ́ lɛ hwɛhwɛ. Enyi mǐ fó tlolo ɔ, enyi mǐ zín butɔn mɔhun jí ɔ, ɖiɖe ɖěɖee sɔgbe xá nǔ e nɔ sɔ́ CSS é enɛ na tɔ́n. Techniquement é nɔ sɔ́ filter option ɔ ɖó xɔ akwɛ enɛ jí kpowun.

A sixu lɛ́ zán nǔ e nɔ cyan nǔ lɛ é e vɛwǔ hú mɔ̌ lɛ é. Ði kpɔ́ndéwú ɔ :not(.animals) na w’azɔ̌ lɔmɔ̌, mɔ̌ ɖokpo ɔ .animals.people kpo .animals, .people .

3. Nu gudo tɔn ɔ, mi nɔ hɛn butɔn lɛ ɖo div sin gannu mɛ bo nɔ bla ye ɖo Gridzy gallery ɔ mɛ, gbɔn filterControls sin linlin ɔ ɖiɖe ɖ’ayi mɛ gblamɛ:

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

Lee a mɔ gbɔn é ɔ, mǐ nɔ lɛ́ zán nǔ e nɔ sɔ́ CSS é ɖé nú nǔ e è nɔ ylɔ filterControls é. div container e ɖó id attribut é nɔ wà nǔ kpowun bo nɔ bló bɔ butɔn lɛ nɔ bɔkun bɔ è na sɔ́ gbɔn CSS selector enɛ jí.

Énɛ́ ɔ́ ɖíe!

Nú a jló JavaScript sín xósin hǔn, kpɔ́n API .

API

Gridzy ɖó API éɖesunɔ tɔn có, è sixu wà nǔ gègě é mɛvo, gbɔn DOM ɔ zinzan kpowun gblamɛ. Gridzy na ɖó ayi wu bo na jla glídí ɔ ɖó. Amɔ̌, API hlɔnhlɔnnɔ ɖé lɛ́ tíìn ...

DOM ɔ zinzan

Nu Document Object Model (DOM) sin azɔwiwa lɛ bi ɔ, mi ɖo hudo nu e nɔ hɛn nu ɔ tɔn jɛ nukɔn:

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

Gɔ́ ɖiɖe lɛ

É ɖò taji ɖɔ è ni bló nǔ yɔyɔ̌ ɔ bǐ mlɛ́mlɛ́ bo gɔ́ cobɔ è na sɔ́ dó nǔ e mɛ è nɔ bɛ́ nǔ dó é mɛ. Nu e ma nyi mɔ a ɔ, Gridzy sixu mɔ jlɛ lɛ ganji ǎ.

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

Sún ɖiɖe lɛ sín

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

Ðyɔ Nǔ E È Na Zán lɛ É

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

Mi hɛn ɔ mi na mɔ nu gege do DOM sin azɔwiwa wu ɖo MDN web docs ji. DOM sín Nǔjlajla ɖé lɛ́ tíìn bɔ è sixu mɔ.

API mɛɖesunɔ tɔn

Bo na do zan API ɔ, mi ɖo na mɔ Gridzy sin nuɖe jɛ nukɔn, e nɔ kan nu Gridzy sin nuɖe ɔ:

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

Gbɔn alɔnu

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

Kpɔ́n Nǔ E A Na Zán lɛ É Bǐ

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

Sɔ́ nǔ e è na cyan lɛ é

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

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

Sɔ́ Filtre

Filtre ɖe zinzan ɔ, filter option ɖee sixu nyi CSS selector ɖebu ɔ:

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

Gɔ́ Azɔ̌ Ylɔylɔ Tɔn lɛ

È KO sɔ́ nɔ zán sín 2.4.0 mɛ ǎ.
Zǎn Events égbé tɔn e bɔkun hugǎn lɛ é dó ɖyɔ na. Kpɔ́n akpáxwé e bɔ d’ewu é nú tinmɛ ɖevo lɛ.

~~Gridzy.js 2 nɔ gudo nú nǔ e è sixu sɔ́ ɖ’ayǐ lɛ é ɖé lɛ nú azɔ̌ e è nɔ ylɔ mɛ lɛ é. API mɛɖesunɔ tɔn kɛɖɛ wɛ sixu ze ye ɖo te, amɔ̌, ɖi alɔkpa ɖevo lɛ ɖɔhun:~~

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

	~~Tinmɛ~~
~~`onBeforeOptionsChanged`~~	~~Callback function e è nɔ ylɔ tlɔlɔ cobɔ è nɔ sɔ́ nǔ e è na sɔ́ lɛ é ɖó te é.~~
~~`onOptionsChanged`~~	~~Callback function e è nɔ ylɔ tlɔlɔ ɖò nǔ e è sɔ́ ɖ’ayǐ lɛ é gudo é.~~
~~`onBeforeRender`~~	~~Callback function e è nɔ ylɔ tlɔlɔ cobɔ è nɔ bló rendering é.~~
~~`onRender`~~	~~Callback function e è nɔ ylɔ tlɔlɔ ɖò ɖiɖe ɖiɖe gudo é.~~

Zǎn Nǔwiwa lɛ

sín 2.4.0 sín alɔkpa ɔ mɛ

Mi hɛn ɔ mi na zan Gridzy sin nuwiwa lɛ ɖi JavaScript sin nuwiwa lɛ ɖɔhun:

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

Nǔ e jɛ lɛ é ɖé lɛ nɔ tɔ́n ɖò Gridzy sín nǔ e mɛ è nɔ bɛ́ nǔ dó é jí bɔ nǔ ɖevo lɛ nɔ tɔ́n ɖò nǔ ɖokpo ɖokpo jí ɖò nǔ e mɛ è nɔ bɛ́ nǔ dó é mɛ.

Nu e jɛ ɖo Gridzy sin agban ɔ ji lɛ:

	Tinmɛ
`gridzyBeforeInit`	Myɔ cobɔ è na bɛ́ galerie.
`gridzyInit`	Myɔ ɖò galerie sín bǐbɛ́mɛ gudo.
`gridzyBeforeOptionsChanged`	Myɔ cobo sɔ́ nǔ e è na sɔ́ lɛ é ɖó te.
`gridzyOptionsChanged`	Myɔ ɖò nǔ e è sɔ́ ɖ’ayǐ lɛ é gudo.
`gridzyBeforeRender`	Myɔ cobɔ è na jla nǔ ɖó.
`gridzyRender`	Myɔ ɖò ɖiɖe ɖiɖe gudo.

Nú a gɔn nǔwiwa ɖebǔ ɖò fí hǔn, kɛnklɛn bo sɛ́ alɔdó byɔbyɔ ɖé dó .

event.target nɔ na nǔ e nɔ hɛn agban Gridzy tɔn é.
event.detail.instance nɔ na kpɔ́ndéwú Gridzy tɔn.

Nǔ e jɛ ɖò nǔ lɛ jí lɛ é:

	Tinmɛ
`gridzyItemBeforeInit`	Myɔ cobɔ nǔ ɔ na bɛ́.
`gridzyItemInit`	Myɔ ɖò nǔ ɔ sín bǐbɛ̌mɛ gudo.
`gridzyItemLoading`	É nɔ myɔ hwenu e nǔ ɔ jɛ hɛn jí é.
`gridzyItemReady`	É nɔ myɔ hwenu e nǔ ɔ ko ɖò gbesisɔmɛ nú jlɛjininɔ glídí tɔn é. Enɛ wu ɔ, è tuùn ɖiɖe ɔ sín jlɛ̌, amɔ̌, ɖiɖe ɔ sixu kpó ɖò ɖiɖe ɔ hɛn wɛ.
`gridzyItemComplete`	Fires hwenu e ɖiɖe nǔ ɔ tɔn gɔ́ngɔ́n é.

Nú a gɔn nǔwiwa ɖebǔ ɖò fí hǔn, kɛnklɛn bo sɛ́ alɔdó byɔbyɔ ɖé dó .

event.target nɔ na nǔ e ɖò nǔ ɔ mɛ é.
event.detail.instance nɔ na kpɔ́ndéwú Gridzy tɔn.

API – Gbɛ̀ ɔ bǐ mɛ

Azɔ̌ ɖé lɛ tíìn bo ɖò vo nú Gridzy sín kpɔ́ndéwú lɛ. Enɛ wu ɔ, mǐ ɖó na mɔ kpɔ́ndéwú ɖé jɛ nukɔn ǎ.

Mi mɔ nǔ e è sɔ́ ɖ’ayǐ é

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

Mi mɔ nǔ e è sɔ́ ɖ’ayǐ lɛ é bǐ

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

Sɔ́ nǔ e è nɔ sɔ́ ɖ’ayǐ lɛ é

Enɛ nɔ sɔ́ nǔ e è na sɔ́ lɛ é ɖó te nú Gridzy sín kpɔ́ndéwú e ko bɛ́ lɛ é bǐ ǎ, loɔ, é nɔ tinmɛ nǔ e jí kpɔ́ndéwú yɔyɔ̌ lɛ na jinjɔn é. É ɖò mɔ̌ có, enyi è na vɔ́ nǔ e è sɔ́ ɖ’ayǐ é ɖé blóɖó gbɔn jlɛjininɔ null jí ɔ, é na zán jlɛjininɔ yɔyɔ̌ ɔ.

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

A sixu zan enɛ ɔ bo na ze nuɖe lɛ ɖo gbɛ ɔ bi mɛ, nu a ylɔ ɛ cobɔ DOM na sɔgbe ɔ. Enɛ wu ɔ, a sɔ́ na ɖó na sɔ́ nǔ e è na cyan lɛ é dó ɖó jijɔ lɛ ǎ.

Nǔ e nɔ jɛ éɖée jí lɛ é

Ényí Gridzy.js 2 sín automatisme lɛ bǐ ɖò azɔ̌ wà wɛ ɔ, è sɔ́ ɖó hudo wlɛnwín e ɖò dò lɛ é tɔn ǎ. É ɖò mɔ̌ có, è sixu sú nǔ e nɔ w’azɔ̌ ɖò éɖée jí lɛ é dó bo na zán Gridzy ɖò ali e è nɔ zán ɖò aca mɛ é 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
});

È sixu sɔ́ nǔ enɛ lɛ ɖé lɛ ɖó te gbɔn data-gridzy- attributes jí alǒ gbɔn setOptions() jí ǎ, ɖó hwɛjijɔ e sɔgbe lɛ é wu:

	Nǔ e è sɔ́ ɖ'ayǐ é	Tinmɛ
`autoInitOnDomReady`	`true`	É nɔ mɔ nǔ e ɖó class `gridzy` lɛ é ɖò wema ɔ sín ɖiɖe jí bo nɔ bɛ́ ye. È sixu sɔ́ gbɔn `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Nukúnnúmɔjɛnǔmɛtɔ́	`true`	É nɔ mɔ nǔ yɔyɔ̌ lɛ kpo class `gridzy` tlolo bɔ ye nɔ tɔ́n ɖò DOM mɛ bo nɔ bɛ́ ye. (kpɔ́ndéwú ɔ, ɖò wema lɛ sín ɖiɖe lɛ zinzan jí) È sixu sɔ́ gbɔn `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Nukúnnúmɔjɛnǔmɛtɔ́	`true`	É nɔ tuùn ɖɔ è gɔ́ nǔ kpɛví kpɛví lɛ (ɖiɖe lɛ) nú ye alǒ ɖè ye síìn, bo nɔ lɛ́ jla ɖiɖe lɛ ɖó éɖesunɔ. È sixu sɔ́ ɖ’ayǐ gbɔn `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	É nɔ xlɛ́ ɖɔ è nɔ zán nǔjlɛdonǔwu `data-gridzy-` lɛ ɖò kpaa mɛ alǒ gbɔ. Enyi é nyí `false` ɔ, è sixu sɔ́ nǔ e è sɔ́ lɛ é ɖó te gbɔn API mɛɖesunɔ tɔn ɔ jí kɛɖɛ. È sixu sɔ́ gbɔn `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Nukúnnúmɔjɛnǔmɛtɔ́	`true`	É nɔ mɔ huzuhuzu e ɖò `data-gridzy-` jijɔ lɛ mɛ lɛ é, bo nɔ jla ɖiɖe ɔ ɖó éɖesunɔ. É lɛ́ tuùn ɖɔ è gɔ́ nǔ e `gridzyAnimated` é nú alǒ ɖè è síìn, bo lɛ́ tuùn ɖɔ è ɖyɔ nǔ e è nɔ ylɔ `style` attribute é. Enyi `useOptionAttributes` nyí `false` , é nɔ mɔ huzuhuzu e `style` lɛ é kɛɖɛ. È sixu sɔ́ ɖ’ayǐ gbɔn `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Mɛ e nɔ kpɔ́n nǔ ɖyɔɖyɔ lɛ é	`true`	É nɔ mɔ huzuhuzu e ɖò jijɔ `class` lɛ mɛ ɖò nǔ vǐ lɛ bǐ mɛ é (ɖiɖe lɛ). É sɔgbe xá nǔ e kàn filtre lɛ é. È sixu sɔ́ ɖ’ayǐ gbɔn `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Nukúnnúmɔjɛnǔmɛtɔ́ sín hwenu e è ɖè 2.5.0 tɔ́n é.	`true`	É nɔ mɔ huzuhuzu e ɖò `src` sín jijɔ ɖiɖe lɛ bǐ tɔn mɛ lɛ é. É sɔgbe hwenu e è zán xá React alǒ wemaxɔ mɔhun lɛ é. È sixu sɔ́ ɖ’ayǐ gbɔn `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Nukúnnúmɔjɛnǔmɛtɔ́ ɔ sín ɖaxó ɖyɔɖyɔ sín hwenu e è ɖè 2.6.0 tɔ́n é.	`true`	É nɔ mɔ huzuhuzu e ɖò nǔ ɔ sín gblǒ mɛ lɛ é. É sɔgbe xá nǔ e kàn tuto e nɔ yí gbè nú nǔ é. (Cobonu è na ɖè 2.6.0 tɔ́n ɔ, è nɔ zán nǔ e nɔ ɖyɔ flɛtɛli lɛ é sín tóɖómɛtɔ́ ɖé) È sixu sɔ́ ɖ’ayǐ gbɔn `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Blǒ azɔ̌ ɔ kpo alɔ kpo

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

Súnsún Kpɔ́ndéwú ɔ

Ðò xógbe ɖevo mɛ ɔ, nǔ e gbɔn vo nú Gridzy sín bǐbɛ̌mɛ é wɛ.

gridzyInstance.destroy();
gridzyInstance = null;

Sɔ́ vǐ lɛ sín wěma ɖó kpɔ́ kpo alɔ kpo

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

Sɔ́ Vǐ ɖokpo géé sín nǔ ɖó kpɔ́ kpo alɔ kpo

Hwɛhwɛ ɔ, è nɔ ɖó hudo tɔn ǎ, é nyɔ́ wà ɔ, é nɔ vɛwǔ tawun.

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

Sɔ́ jijɔ lɛ ɖó kpɔ́ kpo alɔ kpo

Mi hɛn ayi ɖɔ useOptionAttributes sin linlin ɔ ɖo na nyi true nu enɛ ɔ.

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

Hlɔnhlɔn Ɖiɖe

Hwɛhwɛ ɔ, è nɔ ɖó hudo tɔn ǎ, enyi è na bo tlɛ sú nǔ e nɔ w’azɔ̌ ɖò éɖée jí lɛ é bǐ .

gridzyInstance.render();

Xójlawema 2.x