Gridzy.Gallery

webLuo

Version mar 2.x

Websait no oselokore owuon. Kapo ni nitie gima ok ler maber, yie mondo ine weche ma ondik e dho Ingresa.

Tiyo gi Yore madongo

Inyalo keto fainde mag Gridzy e sava mari kendo imedgi e websait mari (mathothne e kar ng’ado bura):

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

Med kod mar HTML (kamoro amora e kar ringruok):

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

En mana mano! Mano en ranyisi ma tiyo chuth. Onge ng’at ma dwaro timo gik moko mathoth.

Chenro

Yo mayot moloyo mar keto Gridzy en, tiyo mana gi kido mag HTML. Owinjore mana ni iket nyinge mag yiero gi data-gridzy- . Omiyo, mondo iket yiero mar spaceBetween , med mana kido mar 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>

Yiero madongo

Nengo moketiKit gimoro
animatetrueOng’ado ka be onego oti kod gik ma nyiso gik ma timore e kinde ma grid lokore (kaka ranyisi, sama iloko ng’injo mar brausa kata sama iketo filta).
layoutjustifiedOnyiso kaka oketgi. Gridzy.js 2 siro chenro ariyo mopogore opogore waterfall justified kod Ng’ato ka ng’ato kuomgi nigi gik ma omedore ma inyalo yiero, ma inyalo yudo e bwo tebolni.
filter*Ong’ado ni en piche mage ma owinjore onyis. CSS-selekta moro amora inyalo tiyogo kaka nengo kae. Kaka pile, oketgi owuon kokalo kuom filterControls (neno yiero maluwo).
Rang Filter
filterControlsOng’ado ni gin gik mage ma inyalo tiyogo e ng’ado piche. CSS moro amora ma yiero, ma yiero gik ma ni e fom mar HTML, inyalo tiyogo kaka nengo kae.
Rang Filter
autoConsiderScrollBarstrueMondo opar lach mantie ka oboke mag skrol nenore kata lal. Kinde duto ipuonjo ni iweye e true mak mana ka ng’atno kelo pek.

Justified Yiero mag Keto

Nengo moketiKit gimoro
autoFontSizefalseOloko owuon gik ma nyiso duong’ mar font mar boksi ka boksi kaluwore gi duong’ mar boksi ma ne en-go chon. Kaluwore gi kaka oseket, gino mar size mar font ok oket maber.
desiredHeight190Onyiso bor ma idwaro mar row mag gik moko. Oboke mar adier ibiro kwano kaluwore gi lach ma nitie kod gik ma ni e row.
hideOnMissingImagetrueOpando boksi ma nigi piche ma ne ok nyal keto.
spaceBetween4Onyiso bor mantie e kind gik moko e piksel.
lastRowAlign
chakre versi mar 2.3.0		justifiedOnyiso tim mar row mogik. Nengo ma oyienegi gin left , center , korka right kod justified .
singleRowAlign
chakre versi mar 2.3.0		justifiedOnyiso tim ka nitie mana row achiel kende. Nengo ma oyienegi gin left , center , korka right kod justified .
fillLastRow
chakre versi mar 2.1.0		trueOGUOL chakre e versi mar 2.4.0 (OK OKETI TIYO nyaka e versi mar 2.3.0 )
Oketo pichego mondo kinde duto rang’iny mogik opong’ chuth. Kapo ni idwaro keto piche e yo ma nyalo lokore, nyalo bedo maber ka iweyo gino ma ok tiyo.
Ok okaw okang’ moro amora kuom row achiel (neno fillSingleRow ).
fillSingleRow
chakre versi mar 2.1.0		trueOGUOL chakre e versi mar 2.4.0 (OK OKETI TIYO nyaka e versi mar 2.3.0 )
Kapo ni nitie row achiel kende, oloso pichego mondo kinde duto rowno opong’ chuth. Kapo ni nyalo timore ni in mana gi picha achiel kata ariyo e galeri, nyalo bedo maber ka iweyo gik ma kamago ok ti.

Waterfall

Nengo moketiKit gimoro
autoFontSizefalseOloko owuon gik ma nyiso duong’ mar font mar boksi ka boksi kaluwore gi duong’ mar boksi ma ne en-go chon. Kaluwore gi kaka oseket, gino mar size mar font ok oket maber.
desiredWidth250Onyiso lach mar kolum ma idwaro. Oboke mar adier ibiro kwano kaluwore gi oboke ma nitie kod kwan mar kolum.
hideOnMissingImagetrueOpando boksi ma nigi piche ma ne ok nyal keto.
horizontalOrderfalseOnyiso ni gik moko iketo mana gimoro achiel e rang’iny ka rang’iny kowuok e korka achich nyaka e korka achich, kae to ochako kendo e rang’iny ma korachwich ahinya ma ok ochung’ kar rang’iny ma rang’inyno nitie mang’eny. Kaluwore gi kaka oket, gik moko ibiro keto kinde duto e kolum ma nigi bor matin moloyo.
spaceBetween4Onyiso bor mantie e kind gik moko e piksel.
singleRowAlign
since version 2.7.0		justifiedDefines the behavior when not all columns can be filled due to too few images. Allowed values are left, center, right and justified.

Yiero mathoth madhi nyime

Mondo iyud yore mathoth, ne API .

HTML mar tiende

HTML mayot moloyo mar Gridzy en kama:

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

Kata kamano, Gridzy nyalo lokore ahinya kendo inyalo tiyo kod chiegni ng’ato ang’ata ma nigi HTML. Nitie mana gik matin ma nyaka ipar:

  • Nyathi ka nyathi mar gik ma ni e kontena ochung’ ne gimoro achiel e grid.
  • Giduto, gik ma nigi kontena kod nyithinde nyalo bedo kit tag moro amora, kaka ul kod li (par mana mar keto kendo gik ma ne oket chon e brausa).
  • Kapo ni gimoro img ok en nyathi owuon, odwaro klas mar gridzyImage .

Omiyo, ma bende en chenro mar HTML ma tiyo:

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

To moloyo ka idwaro medo weche ma ng’ato nyalo ng’eyo, dwarore ni ibed gi ng’eyo matut mar HTML. Mondo ing’e mathoth kuom wachno, ne ane weche ma ondiki e wi wachno kod weche ma ondiki e wi wachno .

Weche kod Dende

Ka idwaro medo weche ma ng’ato nyalo ng’eyo e galeri mari, nyaka ing’e kaka gik moko nenore. Kuom mano, nitie skin moko ma oseket chon. Skin ka skin nigi fail mar CSS. Owinjore imed failni ka imedo gi fail madongo mag Gridzy (ma thothne e kar wich):

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

Bende, dwarore ni ibed gi ng’eyo matut mar HTML:

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

Kapo ni ipenjori kuom kaka HTML ochung’, ne HTML ma nyiso weche .

Kuom weche ma inyalo tiyogo gi kit tag moro amora, ne ni en gi klas gridzyCaption . Gima img dwaro klas gridzyImage .

Ranyisi ma malo nyiso ni ng’ato nigi ng’ut ma ng’ato gridzySkinClassic . Mondo iti gi nying’ mopogore, lok mana nying’ mar del gi achiel kuom gigo:

Oting'o Dende

Klase manitie
Dende maongee gimoro
en chakruok maber mar loso skin mari iwuon
neno motelo		gridzySkinBlank
gridzySkinClassic
neno motelo		gridzySkinClassic
gridzySkinClassicLight(OSETI TIYO chakre e versi mar 2.6.0)
gridzySkinFullOverlay
neno motelo		gridzySkinFullOverlay
gridzySkinFullOverlayLight(OSETI TIYO chakre e versi mar 2.6.0)
gridzySkinLift
neno motelo		gridzySkinLift
gridzySkinLiftLight(OSETI TIYO chakre e versi mar 2.6.0)
gridzySkinMagnifier
Tije mag zoom ok oketi
neno motelo		gridzySkinMagnifier
gridzySkinMagnifierLight(OSETI TIYO chakre e versi mar 2.6.0)

Gik moko duto ma osewach malo dwaro mana fail mar CSS, to nitie gik mamoko ma bende dwaro fail mar JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Klase manitie
gridzySkinBlur
okti e IE
neno motelo		gridzySkinBlur
gridzySkinBlurLight(OSETI TIYO chakre e versi mar 2.6.0)
gridzySkinCard
neno motelo		gridzySkinCard
gridzySkinCardLight(OSETI TIYO chakre e versi mar 2.6.0)

Yiero mag del

Chakre versi 2.6.0 nitie Yore mag keto skins ma iketo e iye. Kaluwore gi kit ng’ato, inyalo keto rangi mar ng’et, rangi mar ndiko kod tipo mar ndiko. Nyaka iti mana gi gik ma CSS oloso kaka inyalo neno kae:

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

Rang gik ma nyalo lokore ma ochung’ne kod nengo ma ochung’ne ng’ato ka ng’ato kae:

gridzySkinClassic
Gima lokoreNengo moketiWeche
--backgroundrgba(0, 0, 0, .7)oyiene nengo moro amora mar CSS
--colorrgb(255, 255, 255)oyie nengo moro amora mar rangi mar CSS
--text-shadownoneoyiene nengo moro amora mar ndiko mar CSS
gridzySkinFullOverlay
Gima lokoreNengo moketiWeche
--backgroundrgba(0, 0, 0, .7)oyiene nengo moro amora mar CSS
--colorrgb(255, 255, 255)oyie nengo moro amora mar rangi mar CSS
--text-shadownoneoyiene nengo moro amora mar ndiko mar CSS
gridzySkinLift
Gima lokoreNengo moketiWeche
--backgroundrgba(0, 0, 0, .7)oyiene nengo moro amora mar CSS
--colorrgb(255, 255, 255)oyie nengo moro amora mar rangi mar CSS
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)oyiene nengo moro amora mar ndiko mar CSS
gridzySkinMagnifier
Gima lokoreNengo moketiWeche
--backgroundrgba(0, 0, 0, .7)oyiene nengo moro amora mar CSS
--colorrgb(255, 255, 255)oyie nengo moro amora mar rangi mar CSS

Dende ni ok oyie gi --text-shadow mar ndiko

gridzySkinBlur
Gima lokoreNengo moketiWeche
--backgroundrgba(0, 0, 0, .7)oyiene nengo moro amora mar CSS
--colorrgb(255, 255, 255)oyie nengo moro amora mar rangi mar CSS
--text-shadow0 0 10px rgb(0, 0, 0)oyiene nengo moro amora mar ndiko mar CSS
gridzySkinCard
Gima lokoreNengo moketiWeche
--backgroundrgba(0, 0, 0, 1)oyiene nengo moro amora mar CSS
--colorrgb(255, 255, 255)oyie nengo moro amora mar rangi mar CSS
--text-shadownoneoyiene nengo moro amora mar ndiko mar CSS

Skins duto ma oseket chon siro mana weche mayot mag ndiko. Inyalo loso skin mari owuon kendo ma ng’eny ahinya. Yie mondo ine sitael mar Gridzy .

Sitael mar Gridji

Kapo ni onge ng’ut ma oseket motelo ma nyalo rwako dwaro mari, inyalo loso sitael mari iwuon.

Yo mayot moloyo en mokwongo ng’ado kopi mar ng’at ma osebedo ka nitie kendo loso mondo owinjore gi dwaro mari. <2Zepa> 10:10, 11. gridzySkinBlank Oboke ma oseket chon nyalo miyo ng’ato obed gi fundament maber kaachiel gi ndiko maber e fail mar 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 fail mar CSS ibiro yudo klas gridzySkinBlank , gridzyImage gridzyCaption . Gridzy owuon ok dwaro klas ma kamago. Gitiyogo mana mar keto sitael kendo omiyo inyalo gologi kata loko nyinggi ka idwaro.

Kaachiel gi mago, ibiro yudo klas mar CSS gridzyItem . Gridzy keto klasni owuon ne nyithindo duto ma ng’iyo gik madongo mag kontena. Omiyo, inyalo tiyo kod klasni mondo ilos sitael mar gik ma ni e galeri mari.

Paro Gik Mochungo

  1. Gik ma ni e iye onego obed gi dwoko chuth. Par ni ng’injo mar gik moko biro lokore gadier. Ti kod kwan mar pasent kar kwan mar piksel. Kendo ng’i ane kaka Gridzy nyalo keto autoFontSize , ma riembo weche ma ondiki e boksi mar gik moko.
  2. Gimoro ka gimoro onego obed gi ranyisi ma oler maber. Ratio mar gik moko ok bi lokore ngang’ kendo dwarore mondo ikwan grid. Omiyo ka gimoro ok nyal bedo gi ranyisi ma oket maber, ng’adne bura motelo gi lweti (kaka kokalo kuom css).

E kinde moko, nyalo bedo mayot mondo iket style mar gik ma ni e iye kapok Gridzy ochako timo gik moko. <2Zepa> Kende, golo gridzy mar klas kata fail mar javaskrip mar Gridzy kuom thuolo matin mondo otim kamano.

En mana mano! Mano e gima dwarore mondo ilos ng’ato owuon. Oganda mang’eny ma oseket chon ok ti gi gik mathoth moloyo maeni.

Kata kamano, nyalo bedo ni nitie mathoth ka idwaro ...

Dende ma Odhi nyime

Gridzy tiyo kod klas mang’eny mag CSS moloyo mana gridzyItem . Thothgi biro ketogi giwegi kendo inyalo tiyo kodgi e keto sitael bende.

Klase madongo mag kontena

Nying KlaseKit gimoro
gridzy
mondo oket gi lwedo		Gridzy yudo gik ma nigi klasni kendo ochakogi.
gridzyAnimatedIbiro keto owuon ka yiero mar animate en true . Ka klasni oket gi lwedo, yiero mar animate bende biro bedo true owuon (mak mana ka oket maler ni en false ).

Klase mag gikmoko

Nying KlaseKit gimoro
gridzyItemIbiro keto mapiyo bang’ ka gino ochako chenro mar chako. Ok ibi golo nyaka chieng’.
gridzyItemInitializingIbiro keto mapiyo bang’ ka gino ochako chenro mar chako. Ibiro ng’iewo gi gridzyItemReady mapiyo bang’ ka gik moko osechako chuth. Onyiso ni ok en ni piche opong’ chuth (neno gridzyItemLoading ), to gimoro osebedo moikore mondo onen.
gridzyItemReadyObiro kawo kar gridzyItemInitializing Chako mapiyo bang’ ka gino osechako chuth. Ok ibi golo nyaka chieng’. Onyiso ni ok en ni piche opong’ chuth (neno gridzyItemComplete ), to gik moko osebedo moikore mondo onen.
gridzyItemLoadingIbiro keto mapiyo bang’ ka gino ochako chenro mar chako. Ibiro ng’ado bura gi gridzyItemComplete mapiyo bang’ ka piche ma ni e iye (ma thothne en mana achiel kende) osepong’ chuth.
gridzyItemCompleteObiro kawo kar gridzyItemLoading mapiyo bang’ ka piche ma ni e iye (ma thothne gin mana achiel kende) osepong’ chuth. Ok ibi golo nyaka chieng’.
gridzyItemInitialToVisibleIbiro keto mapiyo bang’ ka gino ochako nenore e okang’ mokwongo. Ibiro golo mapiyo bang’ ka gino osebedo ka nenore chuth.
gridzyItemVisibleIbiro keto mapiyo bang’ ka gino osebedo ka nenore chuth. Ibiro golo mapiyo bang’ ka gino ochako lal.
gridzyItemVisibleToHiddenIbiro keto mapiyo bang’ ka gino ochako lal. Ibiro golo mapiyo bang’ ka gino osepondo chuth.
gridzyItemHiddenIbiro keto mapiyo bang’ ka gino osepondo chuth. Ibiro golo mapiyo bang’ ka gino ochako nenore.
gridzyItemHiddenToVisibleIbiro keto mapiyo bang’ ka gimoro ochako nenore (mak mana ka onenore e okang’ mokwongo – ne klas mar gridzyItemInitialToVisible ). Ibiro golo mapiyo bang’ ka gino osebedo ka nenore chuth.
gridzyItemVisibleToVisibleIbiro keto mapiyo bang’ ka gimoro e grid olokore, to gino owuon ne en kendo odong’ nenore. Ibiro golo mapiyo bang’ ka osetieko loso gik ma lokore.

Kaluwore gi kaka ng’ato nyalo timo gik moko, ranyisi mar yo ma itiyogo kod gik ma nyiso piche ma nenore kod ma lal, oketgi chon gi fail maduong’ mar CSS mar Gridzy.

Ka itiyo gi klas mag CSS ma osewuoye malo kanyo, inyalo keto style mar gik ma nyiso kaka itiyo kod gik ma itimo. <2Zepa> Inyalo ng’iyo e fail maduong’ mar CSS mar Gridzy, mondo ing’e gima ibiro dwaro weyo. Onge luoro, gik moko duto ondiki maber kuno.

Los maber kaka iketo

Ka itiyo gi piche mang’eny, nyalo bedo maber mondo ikony Gridzy mondo oger grid mapiyo.

Ogeng'o piche ma ng'ato nyalo ng'ado

Gridzy dwaro chutho kwan mar piche duto mondo ogol kwan mar piche. Gik ma kamago kelo gik ma ng’ato nyalo ng’ado ka piche moko osebedo moikore to moko pok oik. Kaka piche medore, e kaka gik ma kamago nyalo medo kelo ich wang’.

Mondo ogeng' timni, ket mana kido width kod height mar gik moko duto img . En gima duong’ mondo iket kwan mowinjore mar picha ka picha, ka ok kamano, pichego nyalo bedo ma ok kare. Nengo mowinjore gin lach kod bor mar picha moro ka moro:

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

Bang’e Gridzy nyalo kwano grid mapiyo ma ok ochuno ni ong’e gik ma pichego dongo gadier.

Loajo ma ok ng'iyo

Mondo iket mana piche ma ni e kama nenore, luwo yore gi:

  1. Ket kido width kod height kaka oler malo kanyo (ne ni itiyo kod kwan mowinjore)
  2. <2Zepa> Loki kido duto src gi data-gridzylazysrc kaka onyis piny kae (ka in gi kido srcset bende, lokigi gi 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>

Bang’ timo gik ma kamago, piche biro pong’o mapiyo bang’ ka gin machiegni kata e iye mar kar neno.

Ranyisi mar yore

Gima nyiso ni ng’ato timo gik moko en ranyisi matin ma nyiso gik ma timore e kinde ma picha pod pong’o. Ka itiyo gi weche ma ondiki e wi gik moko kod gik ma ondiki e wi gik moko , ranyisi mar kaka itiyo biro nyisore owuon. Ka ok kamano, dwarore ni itim lokruok moko:

  1. Ket gimoro ka gimoro img e gimoro ka gimoro div
    (kata e gimoro amora machielo – ne HTML mar weche mathoth)
  2. Med klas mar gridzyImage e gimoro ka gimoro 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>

Bang’e, owinjore ine gik ma nyiso kaka gikmoko timore ka pichego kawo thuolo mar pong’o.

Filta

Filta ma ni e Gridzy gin mayot ahinya to gin gi teko. Kata obedo ni idwaro filta ma kamano, en gima nyalore ahinya ni inyalo timo kamano. Gima dwarore kende en, CSS matin kod gik matin mag HTML ...

Mae en ranyisi ma tiyo:

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

Wagere Okang’ ka Okang’

1. Mokwongo dwarore ni watim HTML ma pile pile mar Gridzy kendo waket nying’ mag klas mag gik moko duto ma ni e galeri mondo wabed gi nyalo mar ng’adogi bang’e .

<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 ranyisi maeni, watiyo mana gi klas achiel kuom gimoro ka gimoro. To bende inyalo keto klas mang’eny ne gimoro achiel, ka gimorono onego oyudre kokalo kuom filta mang’eny.

2. Kae to wamedo baton moko ma wanyalo tiyogo mar loko filta bang’e .

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

Ka ok itiyo gi baton, inyalo bende tiyo kod gik mamoko mag fom kaka sanduku mag ng’iyo, baton mag redio, yiero kuonde kod mamoko.

Kaka inyalo neno, kwan mar baton gin gik ma pile pile ma CSS yiero. Bang’ ka wasetieko, ka wadhi e baton ma kamano, ibiro nyiso piche ma chal gi gik ma CSS oyiero. Kaluwore gi teknoloji, oketo mana yiero filter obed gi kwan ma kamano.

Bende inyalo tiyo kod gik ma ng’ato nyalo yiero ma ng’eny ahinya. Kuom ranyisi :not(.animals) bende nyalo tiyo, kaachiel gi .animals.people kod .animals, .people .

3. Mogik, waketo baton e kontena div kendo waketogi e galeri mar Gridzy, kuom keto yiero 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>

Kaka inyalo neno, bende watiyo gi CSS ma yiero filterControls . Kontena div ma nigi kido id tiyo mana mar miyo baton obed mayot yiero kokalo kuom ng’at ma yiero CSSno.

En mana mano!

Ka idwaro dwoko mar JavaSkript, ne API .

API

Kata obedo ni Gridzy nigi API mare owuon, gik mang’eny inyalo tim ka onge API mare, mana kuom tiyo gi DOM. Gridzy biro fwenyo wachno kendo biro loko gik ma ne otimre. To bende nitie API ma nigi teko ahinya ...

Tiyo gi DOM

Kuom loso gik moko duto mag oboke (DOM), mokwongo wadwaro gik ma nigi kontena:

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

Med pichni

En gima duong’ mondo iger kendo ipong’ gik manyien ma nyathi kapok imedo e gik ma nigi kontena. Ka ok kamano, Gridzy ok nyal fwenyo gik ma owinjore.

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

Gol oko piche

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

Loki yiero

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

Gik mathoth kuom kaka inyalo tiyo kod DOM inyalo yudo e oboke mag websait mag MDN . Bende nitie puonjruok mokwongo mar DOM ma yudore.

API mar wuon

Mondo wati kod API, mokwongo wadwaro ranyisi mar Gridzy, ma oriwre gi gik ma nigi kontena mag Gridzy:

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

Yud yiero

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

Yud yiero duto

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

Ket yiero

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

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

Ti kod filta

Tiyo gi filta en mana keto filter mar yiero ma nyalo bedo yiero moro amora mar CSS ma tiyo:

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

Med Tije mag Goyo Simu

OK OKETI chakre e versi mar 2.4.0
Ti kod Events ma sani kendo ma nyalo lokore moloyo. Neno sula maluwo mondo iyud weche mathoth.

Gridzy.js 2 siro yore moko mag dwoko simu. Ginyalo keto mana kokalo kuom API ma nigi ng’ato, to mana kaka yore mamoko:

// 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.
  }
});
Kit gimoro
onBeforeOptionsChangedTich mar dwoko simu ma iluongo achiel kachiel kapok iketo yiero.
onOptionsChangedTich mar lwongo ma iluongo mapiyo bang’ keto yiero.
onBeforeRenderTich mar lwongo ma iluongo achiel kachiel kapok ogol.
onRenderTich mar lwongo ma iluongo mapiyo bang’ loso.

Ti kod gik matimore

chakre versi mar 2.4.0

Inyalo tiyo kod gik ma timore e Gridzy mana kaka gik ma timore e JavaScript:

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

Gik moko ma timore iwang’o e gik ma kontena mag Gridzy to gik mamoko iwang’o e gik ma ng’ato ka ng’ato ma ni e iye mar kontena.

Gik ma ne otimore e kontena mar Gridzy:

Kit gimoro
gridzyBeforeInitMach kapok ochako galeri.
gridzyInitOwang’ bang’ chako galeri.
gridzyBeforeOptionsChangedOwang’ kapok oketo yiero.
gridzyOptionsChangedOwang’ bang’ keto yiero.
gridzyBeforeRenderMach kapok ogolo.
gridzyRenderMach bang’ loso.
Kapo ni iweyo gik moko mabiro timore kae, yie mondo ior kwayo mar kony .

event.target chiwo gik ma nigi kontena mag Gridzy.
event.detail.instance miyo ranyisi mar Gridzy.

Gik ma ne otimore e wi gik moko:

Kit gimoro
gridzyItemBeforeInitFires kapok ochako gimoro.
gridzyItemInitFires bang’ ka gimoro osechako.
gridzyItemLoadingOwang’ ka gimoro ochako pong’o.
gridzyItemReadyOwang’ ka gimoro osebedo moikore mar kwano grid. Omiyo, ong’ere kwan mar picha, kata kamano, picha nyalo bedo ni pod pong’o.
gridzyItemCompleteOwang’ ka picha mar gimoro opong’ chuth.
Kapo ni iweyo gik moko mabiro timore kae, yie mondo ior kwayo mar kony .

event.target chiwo gik ma dwarore.
event.detail.instance miyo ranyisi mar Gridzy.

API - Piny mangima

Nitie tije moko ma ok ochung’ ne ranyisi mag Gridzy. Omiyo ok owinjore wabed gi ranyisi moro motelo.

Yud yiero mapile

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

Yud yiero duto motelo

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

Ket yiero mapile

<2Zepa> Mano ok keto yiero mag gik moko duto ma osechako mag Gridzy, to onyiso gino ma ochung’ne gik manyien. Kata kamano, ka yiero mar ranyisi ma osebedo ni nitie ne dhi keto kendo kokalo kuom nengo null , ne dhi tiyo kod nengo manyien ma ne oket chon.

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

Inyalo tiyo kod wachni mondo iket yiero e piny mangima, ka igoyone simu kapok DOM oik. Omiyo ok bi dwarore ni iket yiero kaka kido kendo.

Gik ma timore kendgi

Kaka gik moko duto ma timore e yo ma ok owinjore mag Gridzy.js 2 pod tiyo, onge dwaro mar yore ma ondiki piny kae. To gik ma timore giwegi inyalo geng’ mondo oti kod Gridzy e yo machon:

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

Moko kuom yiero gi ok nyal ket kokalo kuom data-gridzy- kata kokalo kuom setOptions() , nikech gik ma winjore:

Nengo moketiKit gimoro
autoInitOnDomReadytrueOfwenyo gik ma nigi klas gridzy e kinde ma oting’o pej kendo ochakogi.

Inyalo keto kokalo kuom Gridzy.setDefaultOptions()
autoInitOnDomMutation
Jarano mar mutason		trueOfwenyo gik manyien ma nigi gridzy mar klas mapiyo bang’ ka gifwenyore e DOM kendo ochakogi. (kaka tiyo kod lokruok mag pej)

Inyalo keto kokalo kuom Gridzy.setDefaultOptions()
autoSyncChildListMutation
Jarano mar mutasion		trueOng’eyo ka be gik moko madongo (piche) omedi kata ogol oko, kendo oloso grid owuon.

Inyalo keto kokalo kuom data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueOnyiso ka be gik ma itiyogo data-gridzy- itiyogo ahinya kata ok itiyogo. Kapo ni mano en false yiero inyalo keto mana kokalo kuom API ma nigi ng’ato.

Inyalo keto kokalo kuom new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
Jarano mar mutasion		trueOfwenyo lokruok mag data-gridzy- , kendo oloko gridno owuon. Bende, ong’eyo ka klas gridzyAnimated omedi kata ogol oko kendo ka lokruok mag kido style timore. Kapo ni useOptionAttributes false , ofwenyo mana lokruok mag kido style .

Onyalo keto kokalo kuom data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
Jarano mar mutasion		trueOfwenyo lokruok mag kido mag class mag gik moko duto ma nyithindo (piche). Owinjore kuom filta.

Onyalo keto kokalo kuom data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
Jarano mar mutasion

chakre versi mar 2.5.0		trueOfwenyo lokruok mag kido mag src mag piche duto. Owinjore ka otigodo gi React kata kuonde somo ma chal gi mago.

Onyalo keto kokalo kuom data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
Loki duong' mar Janeno

chakre versi mar 2.6.0		trueOfwenyo lokruok mag lach mar gik moko. Owinjore kuom loso gik ma dwoko. (Kapok ne itiyo gi versi mar 2.6.0, ne itiyo gi masin mar winjo gik ma timore ma loko duong’ mar dirisa)

Onyalo keto kokalo kuom data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Chak gi lwedo

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

Keth Ranyisi

Ka owacho ni, en gima opogore gi chako Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sk Listi mar Nyithindo gi lwedo

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

Sync gimoro achiel mar nyathi gi lweti

Kinde mang’eny ok dwarre, mak mana e weche ma ok timre mayot ahinya.

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

Tud kido mag winjruok gi lwedo

<2Zepa> Ng’e ni yiero useOptionAttributes nyaka bed true kuom wachni.

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

Keto gi Teko

Kinde mang’eny ok dwarre, kata ka gik moko duto ma timo gik moko owuon olor

gridzyInstance.render();