Jaaynde 2.x – Gridzy.Gallery

Lowre ndee firtaama otomatik. So tawii won ko laaɓaani, ƴeewto-ɗee binndanɗe e ɗemngal Engele.

Kuutoragol Basic

Neldu piille Gridzy ɗee e lowre maa, ɓeydu ɗe e lowre maa (ko heewi ko e feccere hoore ndee):

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

Ɓeydu kode HTML (kala ɗo taƴre ɓanndu woni):

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

Ko ɗum woni! Ko ɗum yeru timmuɗo. Alaa ko ɓeydi e fuɗɗoode ina ɗaɓɓiree.

Konfiguraasiyoŋ

Laawol ɓurngol hoybude ngam feewnude Gridzy ko, huutoraade tan sifaaji HTML. Aɗa foti tan waɗde inɗe cuɓe ɗee e data-gridzy- . So, ngam waɗde cuɓal spaceBetween , ɓeydu tan sifaa data-gridzy-spaceBetween .

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Cuɓe mawɗe

	Nafoore Defaare	Limtol
`animate`	`true`	Anndinde so tawii animaaji ina poti huutoreede so grid wayliima (yeru, so wayliima njaajeendi windo feerorde walla so settiima filtirde).
`layout`	`justified`	Sifaa laylaytol kuutorteengol. Gridzy.js 2 ina wallita e mbaydiiji ɗiɗi ceertuɗi `justified` e `waterfall` . Kala heen ina jogii paaraaji cuɓagol mum ɓeydooji, ɗi mbaaw-ɗaa heɓde les ndeeɗoo alluwal.
`filter`	`*`	Anndinde hol natal potngal hollireede. Kala CSS-cuɓoowo ina waawi huutoreede ɗoo e nafoore. Heewi waɗde ko otomatik rewrude e `filterControls` (ƴeew cuɓal garowal). Ƴeewto Fiiltirɗe
`filterControls`		Anndita ko hol geɗe mbaydi mbaawi huutoreede ngam filtinde natal ngal. Kala cuɓoowo CSS, cuɓoowo geɗe mbaydi HTML, ina waawi huutoreede ɗoo e nafoore. Ƴeewto Fiiltirɗe
`autoConsiderScrollBars`	`true`	Ngam teskaade njaajeendi keɓaandi so tawii jolɗe peeñii walla majjii. Ina wasiyee sahaa kala yo accu ɗum e `true` so wonaa tawa ngool otooji ina addana ɗum caɗeele.

Justified Cuɓe mbaydi

	Nafoore Defaare	Limtol
`autoFontSize`	`false`	Hesɗitina otomatikk sifaa njaajeendi binndol kala kaɓirgol tuugnaade e njaajeendi kaɓirgol asliwol ngol. E dow mbaydi kuuɓtodinndi, sifaa font-size oo toɗɗaaka laaɓtuɗo.
`desiredHeight`	`190`	Sifaa tooweeki yiɗaaki e rowrowre elemen. Toowgol goonga ngol maa hiise fawaade e njaajeendi keɓtinaandi e geɗe gonɗe e rowre ndee.
`hideOnMissingImage`	`true`	Suuɗde keesuuji baɗɗi natal ngal waawaano loowde.
`spaceBetween`	`4`	Sifaa woɗɗude hakkunde geɗe e piksel.
`lastRowAlign` gila e mbaydi 2.3.0	`justified`	Sifaa jikku rowre sakkitiinde. Nafooje jaɓaaɗe ɗee ko `left` , `center` , `right` e `justified` .
`singleRowAlign` gila e mbaydi 2.3.0	`justified`	Sifaa jikku so tawii ko rowre wootere tan. Nafooje jaɓaaɗe ɗee ko `left` , `center` , `right` e `justified` .
~~`fillLastRow`~~ ~~gila e mbaydi 2.1.0~~	~~`true`~~	ITTAA gila e mbaydi 2.4.0 (ƊUM WOƊƊAANI gila e mbaydi 2.3.0 ) Feewnitde natal ngal mbele rowre sakkitiinde ndee ina heewi sahaa kala haa timma. So aɗa yiɗi ɓeydude natal e mbaadi dinamiik, ina waawi wonde miijo moƴƴo ngam softinde ɗum. Alaa ko battini e rowrowre wootere (ƴeew `fillSingleRow` ).
`fillSingleRow` gila e mbaydi 2.1.0	~~`true`~~	ITTAA gila e mbaydi 2.4.0 (ƊUM WOƊƊAANI gila e mbaydi 2.3.0 ) So tawii ko rowre wootere tan, nde yuɓɓinta natal ngal mbele rowre ndee ina heewi sahaa kala haa timma. So tawii ina waawi waɗde tawa aɗa jogii natal gootal walla ɗiɗi tan e nder galle hee, ina waawi wonde miijo moƴƴo so aɗa softina ɗum.

Waterfall Cuɓe mbaydi

	Nafoore Defaare	Limtol
`autoFontSize`	`false`	Hesɗitina otomatikk sifaa njaajeendi binndol kala kaɓirgol tuugnaade e njaajeendi kaɓirgol asliwol ngol. E dow mbaydi kuuɓtodinndi, sifaa font-size oo toɗɗaaka laaɓtuɗo.
`desiredWidth`	`250`	Sifaa njaajeendi coloŋaaji yiɗaaɗi. Njaajeendi tigi rigi maa hiise fawaade e njaajeendi keɓaandi e limoore koloñaal.
`hideOnMissingImage`	`true`	Suuɗde keesuuji baɗɗi natal ngal waawaano loowde.
`horizontalOrder`	`false`	Sifaa wonde geɗe ɗee mbaɗaama no feewi geɗel gootel e nder kala colonel gila nano haa ñaamo, caggal ɗuum fuɗɗotoo kadi e colonel ɓurɗo nano keeriiɗo e ɗo colonel ɓuri nokku. So aɗa yiɗi, geɗe ɗee maa mbaɗte sahaa kala e nder colonel ɓurɗo famɗude tooweeki.
`spaceBetween`	`4`	Sifaa woɗɗude hakkunde geɗe e piksel.
`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`.

Cuɓe ɓurɗe yaajde

Ngam heɓde cuɓe goɗɗe, ƴeew API .

HTML maanaa

Ko ɓuri hoybude e mbaydi HTML Gridzy ko nii:

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

Kono Gridzy ina ɓuuɓi no feewi kadi aɗa waawi huutoraade ko famɗi fof kala mbaydi HTML goɗɗo. Toɓɓe seeɗa tan ina poti ƴeewteede :

Kala cukalel elemen konte ina hollira huunde wootere e nder laylaytol ngol.
Elemen konte oo e ɓiɓɓe mum fof ina mbaawi wonde kala sifaa tagaaɗo, ko wayi no ul e li (miijo tan ko ustude defaults feerorde).
So tawii huunde img wonaa cukalel toŋngel e hoore mum, ina haani kalaas gridzyImage .

So ɗum kadi ko mbaydi HTML gollorndi:

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

Haa teeŋti noon so aɗa yiɗi ɓeydude heen nate, aɗa sokli mbaydi HTML yahrude yeeso. Ngam ɓeydaade humpitaade ɗum, ƴeew Captions & Skins .

Kappirɗe & Lare

So aɗa yiɗi ɓeydude nate e nder galle maa, aɗa foti siifde mbaadi ndii. Ko ɗum waɗi won e lare cifaaɗe ko adii ina ngoodi. Kala ɓalndu ina waɗi fiilngo CSS. Aɗa foti ɓeydude ndee fiilde e ɓeydaare e fiildeeji Gridzy mawɗi ɗii (ko heewi ko e feccere hoore):

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

Yanti heen aɗa sokli mbaydi HTML yahrude yeeso:

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

So aɗa naamnoo ko fayti e mbaydi HTML, ƴeew Semantic HTML .

Ngam caption aɗa waawi huutoraade kala sifaa tag, tan ko ƴeewde so ina jogii kalaas gridzyCaption . Elemen img ina haani kalaas gridzyImage .

Yeru gonɗo dow oo ina hollita on ɓalndu gridzySkinClassic . Ngam huutoraade goɗɗo, lomtin tan innde ɓalndu nduu e gootel e ɗeeɗoo:

Ina heen Lare

	Kalaasuuji ina ngoodi
gridzyLaral Ɓoornugol fuɗɗoode moƴƴere ngam sosde ɓalndu hoore mum ƴeewndo nguurndam	`gridzySkinBlank`
gridzySkinClassic ƴeewndo nguurndam	`gridzySkinClassic` `gridzySkinClassicLight`(ƊUM WOƊƊAANI gila e mbaydi 2.6.0)
gridzySkinFullOverlay ƴeewndo nguurndam	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(ƊUM WOƊƊAANI gila e mbaydi 2.6.0)
gridzySkinLift ƴeewndo nguurndam	`gridzySkinLift` `gridzySkinLiftLight`(ƊUM WOƊƊAANI gila e mbaydi 2.6.0)
gridzySkinMagnifier gollal zoom ngal alaa heen ƴeewndo nguurndam	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(ƊUM WOƊƊAANI gila e mbaydi 2.6.0)

Denndaangal lare gonɗe dow ɗee ina njiɗi tan ko fiilde CSS, kono ina woodi lare goɗɗe ɗe njiɗi kadi fiilde JavaScript :

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

	Kalaasuuji ina ngoodi
gridzySkinBlur gollataa e IE ƴeewndo nguurndam	`gridzySkinBlur` `gridzySkinBlurLight`(ƊUM WOƊƊAANI gila e mbaydi 2.6.0)
gridzySkinCard ƴeewndo nguurndam	`gridzySkinCard` `gridzySkinCardLight`(ƊUM WOƊƊAANI gila e mbaydi 2.6.0)

Cuɓe ɓalndu

Gila e mbaydi 2.6.0 ina waɗi Cuɓe ngam yuɓɓinde lare mahraaɗe ɗee. Fawii ko e ɓalndu keeriiɗo aɗa waawi waɗde mbaydi caggal, mbaydi binndol e mbaydi binndol. Aɗa foti tan huutoraade sifaaji kuutorteeɗi CSS no njiyru-ɗaa ɗoo nii:

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

Ƴeew ɗoo waylooji ballitooji e nafooje kuutorteeɗe e kala laral:

gridzySkinClassic

Waylotooɗo	Nafoore Defaare	Hubaru
`--background`	`rgba(0, 0, 0, .7)`	ina addana kala nafoore caggal CSS
`--color`	`rgb(255, 255, 255)`	ina addana kala nafoore colour CSS
`--text-shadow`	`none`	ina addana kala nafoore binndol-ɓuuɓri CSS

gridzySkinFullOverlay

Waylotooɗo	Nafoore Defaare	Hubaru
`--background`	`rgba(0, 0, 0, .7)`	ina addana kala nafoore caggal CSS
`--color`	`rgb(255, 255, 255)`	ina addana kala nafoore colour CSS
`--text-shadow`	`none`	ina addana kala nafoore binndol-ɓuuɓri CSS

gridzySkinLift

Waylotooɗo	Nafoore Defaare	Hubaru
`--background`	`rgba(0, 0, 0, .7)`	ina addana kala nafoore caggal CSS
`--color`	`rgb(255, 255, 255)`	ina addana kala nafoore colour CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ina addana kala nafoore binndol-ɓuuɓri CSS

gridzySkinMagnifier

Waylotooɗo	Nafoore Defaare	Hubaru
`--background`	`rgba(0, 0, 0, .7)`	ina addana kala nafoore caggal CSS
`--color`	`rgb(255, 255, 255)`	ina addana kala nafoore colour CSS

Ooɗoo ɓalndu jaɓataa --text-shadow

gridzySkinBlur

Waylotooɗo	Nafoore Defaare	Hubaru
`--background`	`rgba(0, 0, 0, .7)`	ina addana kala nafoore caggal CSS
`--color`	`rgb(255, 255, 255)`	ina addana kala nafoore colour CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ina addana kala nafoore binndol-ɓuuɓri CSS

gridzySkinCard

Waylotooɗo	Nafoore Defaare	Hubaru
`--background`	`rgba(0, 0, 0, 1)`	ina addana kala nafoore caggal CSS
`--color`	`rgb(255, 255, 255)`	ina addana kala nafoore colour CSS
`--text-shadow`	`none`	ina addana kala nafoore binndol-ɓuuɓri CSS

Denndaangal lare cifaaɗe ina mballita tan e binndi koyɗi. Aɗa waawi sosde lare maa tigi rigi e ɓurɗe saɗtude. Eɗen ñaagii nde ƴeewtoto-ɗaa Style Gridzy .

Sifaa Gridzy

So tawii alaa ɓalndu teskinndu fotndundu e haajuuji maa, aɗa waawi stylede ɓalndu maa.

Laawol ɓurngol hoybude ko adii fof ko ƴettude ɓalndu gonndundu nduu, mbaɗtaa ɗum e haajuuji maa. Kosam gridzySkinBlank cifaaɗam ko adii ina heewi rokkude fonndasiyoŋ moƴƴo kam e binndanɗe moƴƴe e nder fiilde CSS:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

E nder fiilde CSS aɗa heɓa kalaasuuji gridzySkinBlank , gridzyImage e gridzyCaption . Gridzy e hoore mum alaa ko haani e ɗeen kilaasiiji. Ɗe kuutortee tan ko ngam style e noon aɗa waawi ittude walla waylude innde so aɗa yiɗi.

Yanti heen aɗa heɓa kalaas CSS gridzyItem . Gridzy ina waɗa ndeeɗoo kalaas otomatik e denndaangal sukaaɓe toowɓe elemen konte mawɗe. So, aɗa waawi huutoraade ndeeɗoo kalaas ngam style geɗe galle maa.

Hakkille Geɗe Teeŋtuɗe

Ko woni e nder huunde ndee ina foti jaabaade haa timma. Siftor wonde mawneeki elemen oo maa waylo no feewi. Huutoro teddeendi teemedere e nokku teddeendi piksel. Kadi ƴeew cuɓal laylaytol Gridzy autoFontSize , jokkondirngal e njaajeendi-binndi e njaajeendi kaɓirgol huunde.
Kala huunde ina foti jogaade mbaydi laaɓtundi. Njaajeendi huunde ndee waylataa hay dara, ina haani hiisaade grid oo. So tawii huunde alaa e hoore mum mbaydi laaɓtundi, ciftor ɗum e junngo (yeru e css).

Won e sahaaji, ina waawi ɓurde hoybude style loowdi geɗe ɗee hade Gridzy fuɗɗoraade. Ittu tan ko kalaas gridzy walla fiilde javascript Gridzy e sahaa ngam ɗuum.

Ko ɗum woni! Ko ɗuum tan pot-ɗaa mahde ɓalndu maa tigi. Ko ɓuri heewde e lare cifaaɗe ɗee kuutortaako ko ɓuri ɗum.

Kono ina waawi wonde ko ɓuri ɗum so aɗa yiɗi ...

Lare yahruɗe yeeso

Gridzy huutortoo ko kalaasuuji CSS ɓurɗi gridzyItem tan . Ko ɓuri heewde e majji maa set otomatik kadi aɗa waawi huutoraade ɗi ngam styling kadi.

Kalaasuuji Konte Mawɗe

Innde kalaas	Limtol
`gridzy` ngam settingol e junngo	Gridzy ina yiytoo otomatik geɗe jogiiɗe ndeeɗoo kalaas, ina fuɗɗoo ɗe.
`gridzyAnimated`	Maa waɗte otomatik so tawii cuɓal `animate` ko `true` . So tawii ndeeɗoo kalaas waɗaama e junngo, cuɓal `animate` ngal maa heɓ `true` kadi (so wonaa so tawii ngal waɗaama e `false` ).

Kalaasuuji Item

Innde kalaas	Limtol
`gridzyItem`	Maa set so huunde ndee fuɗɗiima golle puɗɗagol. Maa ɗum itta haa abada.
`gridzyItemInitializing`	Maa set so huunde ndee fuɗɗiima golle puɗɗagol. Maa lomto `gridzyItemReady` so tawii huunde ndee fuɗɗiima haa timmi. Firti wonaa wonde natal ngal ina heewi (ƴeew `gridzyItemLoading` ), kono huunde ndee ina hebii ngam yiyeede.
`gridzyItemReady`	Maa lomto `gridzyItemInitializing` so tawii huunde ndee fuɗɗiima haa timmi. Maa ɗum itta haa abada. Firti wonaa wonde natal ngal ina heewi (ƴeew `gridzyItemComplete` ), kono huunde ndee ina hebii yiyeede.
`gridzyItemLoading`	Maa set so huunde ndee fuɗɗiima golle puɗɗagol. Maa lomto `gridzyItemComplete` so tawii natal gonngal heen ngal (ko heewi ko gootal tan) timmaani.
`gridzyItemComplete`	Maa lomto `gridzyItemLoading` so tawii natal gonngal heen ngal (ko heewi ko gootal tan) timmaani. Maa ɗum itta haa abada.
`gridzyItemInitialToVisible`	Maa set so huunde ndee fuɗɗii feeñde ko adii. Maa ittu so tawii huunde ndee yiytaama haa laaɓi.
`gridzyItemVisible`	Maa set so huunde ndee yiytaa haa timmi. Maa ittu so huunde ndee fuɗɗiima majjude.
`gridzyItemVisibleToHidden`	Maa set so huunde ndee fuɗɗiima majjude. Maa ittu so tawii huunde ndee suuɗaama haa laaɓi.
`gridzyItemHidden`	Maa set so tawii huunde ndee suuɗaama haa laaɓi. Maa ittu so huunde ndee fuɗɗiima feeñde.
`gridzyItemHiddenToVisible`	Maa waɗte so huunde ndee fuɗɗiima feeñde (so wonaa feeñde ko adii – ƴeew kalaas `gridzyItemInitialToVisible` ). Maa ittu so tawii huunde ndee yiytaama haa laaɓi.
`gridzyItemVisibleToVisible`	Maa set ko yaawi so huunde e nder grid wayliima, kono huunde ndee e hoore mum wonnoo ko e heddoraade yiyeede. Maa ittu so animation mbayliigu nguu gasii.

E dow mbaydi kuuɓtodinndi, kolliroowo golle e animaaji ngam natal feeñde e majjude ko fiilde CSS mawnde Gridzy tan sifotoo.

E ɗeen kalaasuuji CSS cifaaɗi dow ɗii aɗa waawi style kolliroowo golle maa e animations. Dare ƴeewde e nder fiilde CSS mawnde Gridzy, ngam faamde ko potno-ɗaa ustude. Alaa kulhuli, huunde fof ina winndaa toon no moƴƴi.

Optimize Lowre

So a huutoriima natal keewngal, ina waawi wonde miijo moƴƴo ngam wallude Gridzy mahde grid oo e yaawre.

Haɗde Nate Diwde

Gridzy ina sokli no feewi njuuteendi natal ngal fof ngam hiisaade grid oo. Ɗee geɗe ina ngaddana geɗe diwtuɗe so tawii won natal ina hesɗi, won heen kadi ngalaa. So natal ina ɓeydoo heewde, ina waawi ɓeydaade mettude ngalɗoo batte.

Ngam haɗde ngool jikku, waɗ tan sifaaji width e height wonande denndaangal geɗe img . Ina moƴƴi ƴettude nafooje laaɓtuɗe wonande kala natal gootol, so wonaa ɗuum natal ngal ina mbayloo. Nafooje laaɓtuɗe ɗee ko njaajeendi e tooweeki natal ngal:

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

Caggal ɗuum Gridzy ina waawi hiisaade grid oo ɗoon e ɗoon tawa alaa ko anndi tigi rigi mawneeki natal ngal.

Lowre Lazy

Ngam loowde natal tan tawaangal e nokku yiylotooɗo, rewa e ɗeeɗoo geɗe tan:

Naatnu sifaaji width e height no siforaa dow nii (tabitin huutoraade nafooje laaɓtuɗe)
Lomtin denndaangal sifaaji src e data-gridzylazysrc no hollirtee les nii (so aɗa jogii sifaaji srcset kadi, lomtin ɗi e data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Caggal ɗeen golle nate ɗee maa njuɓɓine so ɗe ɓadiima walla e nder lowre yiyngo.

Kollitoowo golle

Kollitoowo golle oo ko nate tokoose ɗe njiylotoɗen peeñɗe nde natal ngal ina loowa. So a huutoriima captions & skins , kolliroowo golle oo hollirtee ko ɗoon e ɗoon. So wonaa ɗuum aɗa sokli won e peeje:

Waɗde kala elemen img e nder elemen div
(walla e nder kala huunde woɗnde – ƴeew HTML semantik ngam ɓeydaade)
Ɓeydu kalaas gridzyImage e kala huunde img

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Caggal ɗuum aɗa foti yiyde kollitooje golle so tawii natal ngal ina ƴetta waktu ngam loowde.

Fiiltirɗe

Filteruuji e nder Gridzy ina moƴƴi no feewi kono ina njogii doole. Ko waawi heen wonde fof, ko filtirde nde njiɗɗaa, ina gasa tawa ko nde realisable. Ko njiɗɗaa fof ko, CSS seeɗa e geɗe HTML seeɗa ...

Ko ɗoo woni yeru golloowo:

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

Njokken Mahde Nde Ɗatal e Ɗatal

1. Ko adii fof eɗen njiɗi mbaydi HTML ko woowaa e Gridzy e set inɗe kalaas wonande denndaangal geɗe galle ngam mbaawen filtoraade ɗe caggal ɗuum

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

E nder yeru hee en kuutortoo tan ko kalaas gooto e kala elemen. Kono kadi aɗa waawi waɗde kalaasuuji keewɗi wonande huunde wootere, so tawii ndeen huunde ina foti yiyeede e filtoraaji keewɗi.

2. Ndeen en ɓeydat heen butoŋuuji ɗi mbaaw-ɗen waylude filtoraaji ɗii ndeen

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

E nokku butoŋ, aɗa waawi kadi huutoraade geɗe goɗɗe mbaydi ko wayi no kaɓirɗe ƴeewndo, butoŋ rajo, fannuuji cuɓaaɗi e ko nanndi heen.

No njiyru-ɗon nii, nafooje butoŋ ɗee ko cuɓorɗe CSS keewɗe. So en njoofnii tan, so en njuppiima e butoŋ hono oo, maa en njiy natal nanndungal e oon cuɓoowo CSS. Teknik tan ina waɗa cuɓal filter e ngalɗoo nafoore.

Aɗa waawi kadi huutoraade cuɓorɗe ɓurɗe saɗtude. Yeru :not(.animals) ina gollira kadi, hono no .animals.people e .animals, .people .

3. E raɓɓiɗinaade, en njuɓɓinta butoŋuuji ɗii e nder lowre div , en njuɓɓinta ɗi e galle Gridzy, tawa en mbaɗii cuɓal filterControls :

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

No njiyru-ɗon nii, eɗen kuutoroo kadi cuɓoowo CSS ngam cuɓal filterControls . Konte div jogiiɗe sifaa id ina kuutoroo tan ngam weeɓtinde butoŋuuji ɗii suɓaade e oon suɓoowo CSS.

Ko ɗum woni!

So aɗa yiɗi feere JavaScript, ƴeew API .

API

Hay so Gridzy ina jogii API mum, ko ɓuri heewde e geɗe ina mbaawi waɗeede tawa alaa ɗum, ko e huutoraade DOM tan. Gridzy maa tesko ɗum, o rewna grid oo. Kono kadi ina woodi API baawɗo no feewi ...

Manipulaasiyoŋ DOM

Ngam denndaangal kuutorɗe Model Objet Document (DOM) en njiɗi ko adii fof ko elemen konte:

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

Ɓeydu Nate

Ina moƴƴi mahde e hebbinde elemen cukalel keso oo haa timma hade maa ɓeydude ɗum e elemen konte. So wonaa ɗuum Gridzy waawaa yiytude dimensiyonji moƴƴi.

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

Ittu Nate

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

Waylu Cuɓe

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

Ko ɓuri heewde e huutoraade DOM aɗa waawi heɓde e MDN web docs . Ina woodi kadi Naatgol e DOM ina woodi.

API jeyi

Ngam huutoraade API, eɗen njiɗi ko adii fof innde Gridzy, jokkondirnde e elemen konte Gridzy:

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

Heɓ Cuɓal

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

Heɓde Cuɓe ɗee kala

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

Set Cuɓe

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

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

Naatne Fiiltirde

Naatde e filtirde ko tan waɗde filter cuɓal baawngal wonde kala cuɓoowo CSS moƴƴo:

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

Ɓeydu Golle Noddaango

ƊAƊƊAANI gila e mbaydi 2.4.0
Huutoro Events jamaanu e ɓurɗo ɓuuɓde e nokku mum. Ƴeew hello ngo ngam humpitaade.

~~Gridzy.js 2 ina wallita won e cuɓe ngam golle noddirgel. Ɗe mbaawi waɗeede tan ko e API jeyaaɗo, kono no cuɓe goɗɗe nii:~~

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

	~~Limtol~~
~~`onBeforeOptionsChanged`~~	~~Golle noddaango noddaango ko adii nde cuɓe mbaɗata.~~
~~`onOptionsChanged`~~	~~Golle noddaango noddaango ko yaawi caggal nde cuɓe cuɓaa.~~
~~`onBeforeRender`~~	~~Golle noddirgel noddaango ko adii rendering.~~
~~`onRender`~~	~~Golle noddaango noddaango ko yaawi caggal rendering.~~

Huutoro Kewuuji

gila e mbaydi 2.4.0

Aɗa waawi huutoraade kewuuji Gridzy no kewuuji JavaScript gaadoraaɗi nii:

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

Won e kewuuji ina njuutee e elemen konte Gridzy e kewuuji goɗɗi ina njuutee e elemen huunde wootere nder elemen konte.

Kewuuji baɗaaɗi e elemen konte Gridzy:

	Limtol
`gridzyBeforeInit`	Yiiteeji ko adii fuɗɗoode galle.
`gridzyInit`	Yiiteeji caggal fuɗɗoode galle.
`gridzyBeforeOptionsChanged`	Yiite hade cuɓe settingol.
`gridzyOptionsChanged`	Yiite caggal nde cuɓe mbaɗi.
`gridzyBeforeRender`	Yiiteeji hade renndinde.
`gridzyRender`	Yiiteeji caggal renndinde.

So tawii aɗa waasa ɗoo kewuuji, neldu ɗaɓɓaande ballal .

event.target ina rokka huunde e lowre Gridzy.
event.detail.instance ina rokka innde Gridzy.

Kewuuji baɗaaɗi e geɗe huunde:

	Limtol
`gridzyItemBeforeInit`	Yiiteeji ko adii fuɗɗoode huunde.
`gridzyItemInit`	Yiiteeji caggal fuɗɗoode huunde.
`gridzyItemLoading`	Yiite so huunde ndee fuɗɗiima loowde.
`gridzyItemReady`	Fires nde huunde ndee hesɗitinaa ngam hiisaade grid. So aspect ratio ina anndaa, kono natal ngal ina waawi wonde haa jooni ina loowa.
`gridzyItemComplete`	Fires so natal huunde ndee ina heewi.

So tawii aɗa waasa ɗoo kewuuji, neldu ɗaɓɓaande ballal .

event.target ina rokka elemen huunde nde.
event.detail.instance ina rokka innde Gridzy.

API – Aduna

Won golle ɗe ngonaa e inɗe Gridzy. So en ngalaa haaju e heɓde instance ko adii.

Heɓ Cuɓal Defaare

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

Heɓde Cuɓe Defaare ɗee kala

// 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 Cuɓe Defaare

Ɗuum waɗataa cuɓe denndaangal inɗe Gridzy puɗɗaaɗe jooni ɗee, kono ina siftina damal inɗe kese. Kono so tawii cuɓal innde gonnde ina foti rewtineede e nafoore null , nde huutortoo ko nafoore default keso.

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

Aɗa waawi huutoraade ɗum ngam waɗde cuɓe e nder winndere ndee, so a noddii ɗum ko adii nde DOM ina hesɗi. So aɗa sokli waɗde cuɓe no sifaaji nii.

Otomatismeeji

So tawii denndaangal otooji Gridzy.js 2 ina ngolloo, alaa ko haani e laabi les ɗii. Kono otooji ɗii ina mbaawi momteede ngam huutoraade Gridzy e mbaadi ɓurndi aadaade :

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

Won e ɗeen cuɓe mbaawataa setteede e sifaaji data-gridzy- walla e setOptions() , sabu dalillaaji laaɓtuɗi:

	Nafoore Defaare	Limtol
`autoInitOnDomReady`	`true`	Yiyta geɗe jogiiɗe class `gridzy` e loowdi hello e fuɗɗoraade ɗe. Ina waawi waɗeede e `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Yiylotooɗo Mutaasiyoŋ	`true`	Yiyta geɗe kese e class `gridzy` so ɗe peeñii e DOM e fuɗɗoraade ɗe. (yeru e huutoraade mbayliigu kelle) Ina waawi waɗeede e `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Yiylotooɗo Mutaasiyoŋ	`true`	Yiyta so tawii geɗe cukalel (natal) ɓeydaama walla ittaama, kadi ina hesɗitina grid oo e hoore mum. Settingol rewrude e `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Sifaa so tawii sifaaji `data-gridzy-` ina keewi huutoreede walla alaa. So tawii ko `false` cuɓe ina mbaawi setteede tan ko e API jeyi. Settingol rewrude e `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Yiylotooɗo Mutaasiyoŋ	`true`	Yiyta waylooji sifaaji `data-gridzy-` , e kesɗitinde grid oo e hoore mum. Kadi ina annda so tawii kalaas `gridzyAnimated` ɓeydaama walla ittaama e so tawii waylooji sifaa `style` mbaɗii. So `useOptionAttributes` ko `false` , ina yiytoo tan waylooji `style` mbaydi. Settingol rewrude e `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Yiylotooɗo Mutaasiyoŋ	`true`	Yiyta waylooji sifaaji `class` denndaangal geɗe cukalel (natal). Ko faati e filtoraaji. Settingol rewrude e `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Yiylotooɗo Mutaasiyoŋ gila e mbaydi 2.5.0	`true`	Yiyti waylooji sifaaji `src` e denndaangal natal. Ina haani so huutoraama e React walla defte nannduɗe heen. Settingol rewrude e `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Waylu njaajeendiƳeewoowo gila e mbaydi 2.6.0	`true`	Yiyti waylooji njaajeendi elemen. Ko haani ko fayti e diisnondiral jaabawol. (Ko adii mbaydi 2.6.0, heɗotooɗo kewu waylude njaajeendi windo huutortenoo) Settingol rewrude e `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Fuɗɗoraade e junngo

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

Halkude Innde ndee

Ko ɓuri heewde e wiyde, ko luutndii fuɗɗoraade Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkron Doggol Cukalel e junngo

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

Sinkronisaasiyoŋ Elemen Cukalel Gooto e junngo

Heewi wonde ko haajaaka, so wonaa e sahaaji seeɗa no feewi.

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

Sinkronisaasiyoŋ sifaaji e junngo

Tesko wonde cuɓal useOptionAttributes ina foti wonde true e ɗuum.

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

Doole Rende

Heewi wonde ko haajaaka, hay so tawii otooji ɗii fof ina njuumta

gridzyInstance.render();