bicse 2.x - Gridzy.Gallery

Qarok-qari damba sissikuk maqnimteh. tukteena qaddoowe waytek, ku maganak ingiliz sanad wagit.

Rakiibô xoqoyso

Gridzy faayilitteh takriyyi isi ayfaf kee ken osis isi weebsaayitil ( mango uddur moyya footimal);

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

HTML bedu edde osis (dagar exxak faxekkel):

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

Toh teeti! woh inki gabuuk taamitta ceelallo. ossotina qimmo mafaxximta.

Rakisso

sahlin gitay Gridzy xikne, dubuk HTML weelot duqaysimak. Atu dubuk faxxam doorit migaaqitte data-gridzy- luk. tonnal, gudet yan arac spaceBetween , dubuk oyti weelo 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>

Leynâ Doorititte

	sugte caddo	Baxxaqisiyya
`animate`	`true`	Giriid milaagima wak (ceelalloh, browser window celsiisak hinnay filter bicsaanam wak) animationitte elle faxximta innal geytimtam faxximta.
`layout`	`justified`	Edde yintifiqen xiso baxxaqisa. Giridzy.js 2 namma sissin xisoosa qoklah `justified` kee `waterfall` . keenik kulli tii isi ossotinah doorit paarameteritte le, atu ta qarwalil gubal geytam duddah.
`filter`	`*`	manni muucitte taybulleem faxximtam madqa. faxe CSS- dooro takkel caddot tantifiqem duddah. Mango uddur sissikuk `filterControls` gitaak gulgulumta (ciggiila doorit wagita). maydaddaara cubbus
`filterControls`		muucitte yayxuxxuroonuh manni cibtih liyyitte xoqoysil assam duuddam madqa. faxe CSS meexo, too meexo HTML cibtih liyyitte, takkel caddot duqaysimak. maydaddaara cubbus
`autoConsiderScrollBars`	`true`	geytimtah tan fidna fayramisaanam baarwa tanbulleem akkek bayek. toh umman way faysimteh toh `true` cabtam akke waytek ta isih taqabi bahta.

Justified xisoh doorititte

	sugte caddo	Baxxaqisiyya
`autoFontSize`	`false`	asli sandugih giffol rakitak kulli sandugih kutbeh giddakkiino sinnih asqassaabe. sugte kutbeh giddakiino uwwayti qaduk mabicinna.
`desiredHeight`	`190`	Faxxiima liyyitte rortitte fayya baxxaqisa. abinal tan fayya elle qeedaalimelem elle rakittam tan fidnaa kee rortal tanih tan liyyitte.
`hideOnMissingImage`	`true`	quukam duude wee muucitte addatle sanduuga qellis.
`spaceBetween`	`4`	baxxaaqis baxxo liyyitte fanat pikseelitteh addat.
`lastRowAlign` 2.3.0 bicsaak qemmissa haanam	`justified`	ellecabo rortih caalat baxxaqisa. idnisen caddo `left` , `center` , `right` kee `justified` .
`singleRowAlign` 2.3.0 bicsaak qemmissa haanam	`justified`	dubuk inki rorta yenek kilqa baxxaqisa. idnisen caddo `left` , `center` , `right` kee `justified` .
~~`fillLastRow`~~ ~~2.1.0 bicsaak qemmissa haanam~~	~~`true`~~	2.4.0 bicsaak qemmissa haanam DUUGUMEH ( 2.3.0 bicseenak qemmissa haanam BAXXAQEN) massos muucitte tonnal ellecabo rorti umman way inki gabuuk kibbiima. atu muucitte milallaagu edde haytam ekraarisse koo tekkek, tah aliftam meqe mabla takkem bictah. Inki rortal uli taqabi mali ( ubul dubuk `fillSingleRow` kibne).
`fillSingleRow` 2.1.0 bicsaak qemmissa haanam	~~`true`~~	2.4.0 bicsaak qemmissa haanam DUUGUMEH ( 2.3.0 bicseenak qemmissa haanam BAXXAQEN) dubuk inki rorta yenek, toh muucitte massossam tonnal rorti umman way inki gabuuk kibbiima. toh tekkek too atu dubuk tiya hinnay namma muuci lito mayballaah addal, toh meqe mabla takkem bictah tah aliftuh.

Waterfall xisoh doorititte

	sugte caddo	Baxxaqisiyya
`autoFontSize`	`false`	asli sandugih giffol rakitak kulli sandugih kutbeh giddakkiino sinnih asqassaabe. sugte kutbeh giddakiino uwwayti qaduk mabicinna.
`desiredWidth`	`250`	Faxxiima qamidduk fidna baxxaqisa. abinal tan fidna elle qeedaalimele elle rakittam tan fidnaa kee qamidduk ixxima.
`hideOnMissingImage`	`true`	quukam duude wee muucitte addatle sanduuga qellis.
`horizontalOrder`	`false`	Baxxaqsa too qaynatih qaynatittek inkih tan qaynatittek kulli ximmol guraak migdal, tohuk lakal qagitak qimmisak mango ximmol curriino le ximmol mango arac le. sugteemih liyyitte umman way qunxa fayya le qarwalil daffeyele.
`spaceBetween`	`4`	baxxaaqis baxxo liyyitte fanat pikseelitteh addat.
`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`.

Ossotinah fooca fan tan doorititte

mango fooca fan doorititte, cubbus API .

Afeytissoh HTML

sahlin HTML rikkisso Gridzy tah:

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

Takkay ikkah, Gridzy kaxxam milallaagu leeh, gersi HTML rikkissot xoqoysimtam duddah. dubuk dago ximmooma tan cubbit haanam:

kulli awki kontineer liyyitte firqanfiir addat inki uwwayti awlisa.
namma kontineer liyyitte kee tet xaylo faxe baxsa le qaynat takkem bictah, axcih ul kee li ( dubuk cubbit haak browser defaults).
img liyyitte saanih awki isih akke waytek, toh footima gridzyImage faxxa.

tonnal tah kalah taamitta HTML rikkisso:

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

baxsa luk ammuntitte osissam faxxek, atu naharal HTML rikkisso faxxa. mangom barittuh, bey ammuntitte kee arabitte wagit.

ammuntittee kee arabitte

atu isi mayballaah addat ammuntitte osissam faxxek, atu weelo baxxaaqissam faxxinta. Tohih taagah, dago naharal baxxaqimteh tan arabitte tan. kulli arab kak yanim CSS faayil. Atu ta faayil osissam faxxa lafa le Giriizih faayilitteh ossotinah ( mango uddur moyya footimal):

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

ossotinah atu faxxam naharal HTML rikkisso:

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

Atu HTML rikkisso wagittaamal tucsubek, Semantic HTML wagit.

ammunti atu faxe qaynatih baxsit tantifiqem duddah, hununuh ismit toh footima gridzyCaption . img liyyitte muuci gridzyImage faxxa.

dagal yan ceelalloh arab koo yaybulle gridzySkinClassic . baxsa le tiyat tantifiqquh, dubuk arabih migaq aracat hay:

Arab edde anuk

	Geytimta footimaami
girizi arabih foyya meqe qimmo ximmo isi arab gintuh Saanih mabul	`gridzySkinBlank`
gridzySkinClassic Saanih mabul	`gridzySkinClassic` `gridzySkinClassicLight`(2.6.0 bicseenak qemmissa haanam BAXXAQEN)
gridzySkinFullOverlay Saanih mabul	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(2.6.0 bicseenak qemmissa haanam BAXXAQEN)
gridzySkinLift Saanih mabul	`gridzySkinLift` `gridzySkinLiftLight`(2.6.0 bicseenak qemmissa haanam BAXXAQEN)
gridzySkinMagnifier zoom abnisso edde matan Saanih mabul	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(2.6.0 bicseenak qemmissa haanam BAXXAQEN)

Inkih dagal tan arabitte dubuk CSS faayil faxxa, takkay immay ossotinah arabitte tan JavaScript faayil faxxa:

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

	Geytimta footimaami
gridzySkinBlur IE addat mataamita Saanih mabul	`gridzySkinBlur` `gridzySkinBlurLight`(2.6.0 bicseenak qemmissa haanam BAXXAQEN)
gridzySkinCard Saanih mabul	`gridzySkinCard` `gridzySkinCardLight`(2.6.0 bicseenak qemmissa haanam BAXXAQEN)

arab doorititte

2.6.0 bicsaak qemmissa haanam arabitte xissimteh tan doorititte tan. baxsa le arabal rakitak atu aydaadi bisu, kutbeh bisu kee kutbeh silaal massossam duddah. Atu dubuk CSS xoqoysimtam faxxinta akkel kah tablennah:

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

cubbus qokkolsimte milallaagimittee kee sugte caddo umman arabak akkel:

gridzySkinClassic

milallaagimiyyi	sugte caddo	Oyta
`--background`	`rgba(0, 0, 0, .7)`	faxe CSS aydaadih caddo idnisa
`--color`	`rgb(255, 255, 255)`	faxe CSS bisih caddo idnisa
`--text-shadow`	`none`	faxe CSS kutbe- silal caddo idnisa

gridzySkinFullOverlay

milallaagimiyyi	sugte caddo	Oyta
`--background`	`rgba(0, 0, 0, .7)`	faxe CSS aydaadih caddo idnisa
`--color`	`rgb(255, 255, 255)`	faxe CSS bisih caddo idnisa
`--text-shadow`	`none`	faxe CSS kutbe- silal caddo idnisa

gridzySkinLift

milallaagimiyyi	sugte caddo	Oyta
`--background`	`rgba(0, 0, 0, .7)`	faxe CSS aydaadih caddo idnisa
`--color`	`rgb(255, 255, 255)`	faxe CSS bisih caddo idnisa
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	faxe CSS kutbe- silal caddo idnisa

gridzySkinMagnifier

milallaagimiyyi	sugte caddo	Oyta
`--background`	`rgba(0, 0, 0, .7)`	faxe CSS aydaadih caddo idnisa
`--color`	`rgb(255, 255, 255)`	faxe CSS bisih caddo idnisa

Ta arab maqokla --text-shadow

gridzySkinBlur

milallaagimiyyi	sugte caddo	Oyta
`--background`	`rgba(0, 0, 0, .7)`	faxe CSS aydaadih caddo idnisa
`--color`	`rgb(255, 255, 255)`	faxe CSS bisih caddo idnisa
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	faxe CSS kutbe- silal caddo idnisa

gridzySkinCard

milallaagimiyyi	sugte caddo	Oyta
`--background`	`rgba(0, 0, 0, 1)`	faxe CSS aydaadih caddo idnisa
`--color`	`rgb(255, 255, 255)`	faxe CSS bisih caddo idnisa
`--text-shadow`	`none`	faxe CSS kutbe- silal caddo idnisa

Inkih naharal baxxaqimteh tan arabitte dubuk sahlin kutbeh ammuntitte qokolta. Atu isih isih kee mango gurummacale arabitte bicissam duuddah. Ku maganak Gridzy maagaxxi wagit.

Giriizih maagaxxi

naharal elle baxxaqimteh tan arab ku fayxiik ugutak, atu isih maagaxxissam duddah.

sahlin gitay naharak yani arabak korsaanam kee isi fayxiik ugutak massoosaanama. naharal baxxaqimte arab gridzySkinBlank mango uddur meqe rakiibo xayyoysa tonnah meqe sanad CSS faayilih addat:

/** 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 faayilih addat atu gorrissam footimaami gridzySkinBlank , gridzyImage kee gridzyCaption . Giridzy isih tama footimaami mafaxa. oson dubuk maagaxxit yantifiqqen kee tonnal atu duugtam duddah hinnay ken migaq milaagtam faxxek.

ossotinah atu geetto CSS footima gridzyItem . Giriizi ta footima sissikuk inkih tan saanih urruk mango kontineerih liyyittel massoosa. tonnal, atu ta footimat duqaysimtam duddah ku mayballaah uwwaytih maagaxxi.

Misinkaca Faxxiima Caagiida

uwwayti addatino inki tanuuk gacsa taallem faxxinta. liyyitte giddakiino asmatah milaagimelem cubbit hayis. boolta caddot doqaysimak pixel caddoh aftok. Kee Gridzy layout doorit autoFontSize , font-size celsiisenta celsiisenta celsiisenta celsiisenta celsiisenta celsiisenta celsiisenta celsiisenta celsiisenta.
Kulli tii nagay baxxaqimte weeloh caddo tallem faxxinta. uwwayti ceeloh caddo qigdu mamilaagimam kee giriid cisaabissuh faxximta. tonnal uwwayti sissikuk alle week meqennah baxxaqimte xaquk rashiyo, naharal baxxaaqissam tet gabah ( ceelalloh css gitaak).

Inki inki caalatal, Gridzy qimmisak naharal uwwayti addatino bicsaanam sahlinih. uxxuk duug footima gridzy hinnay Giriizi java iskiriptih faayil elle sugah tah.

Toh teeti! toh inkih atu faxxam isi arab xissuh. mango naharal baxxaqimteh tan arabitte tohuk mangom madoqaysimta.

takkay immay wokkel mangom tan atu faxxek...

fooca fan tan arabitte

Giriizi mango CSS footimaamit duqaysimak dubuk gridzyItem muxxi. keenik mangom sisdikuk gulgulumtam kee atu ken maagaxxih edde tantifiqem duddah.

Leynâ kontineerih footimaami

Footima Migaq	Baxxaqisiyya
`gridzy` gabah massoosaanama	Giriizi sissikuk gorrisam liyyitte ta daasal kee ken qimmiseh.
`gridzyAnimated`	doorit `animate` tekkek `true` gulgulumele. Tama footima gabah agle tekkek, doorit `animate` sissikuk `true` geyam faxximta ( `false` akah akke waytannah).

Uwwayti footimaami

Footima Migaq	Baxxaqisiyya
`gridzyItem`	uwwayti qimmisiyyi gexsit qimmiseh yan wak gulgulumele. Qigdu duugaanam maduudunta.
`gridzyItemInitializing`	uwwayti qimmisiyyi gexsit qimmiseh yan wak gulgulumele. uwwayti inkitanuuk qemmisewak `gridzyItemReady` aracat gacele. toh yaanam muucitte inki tanuuk quuki hinna ( ubul `gridzyItemLoading` ), takkay immay uwwayti gulguluh yanbulle.
`gridzyItemReady`	uwwayti inki gabuuk qimmiseh yan wak uwwayti `gridzyItemInitializing` . Qigdu duugaanam maduudunta. toh yaanam muucitte inki gabuuk quukumtem hinna ( ubul `gridzyItemComplete` ), takkay immay uwwayti yanbulleemih gulguluh yan.
`gridzyItemLoading`	uwwayti qimmisiyyi gexsit qimmiseh yan wak gulgulumele. aracat gacele `gridzyItemComplete` sissikuk muucitte kak tanim ( mango uddur dubuk tiya) inki gabuuk quukumte.
`gridzyItemComplete`	aracat gacele `gridzyItemLoading` sissikuk muucitte kak tanim ( mango uddur dubuk tiya) inki gabuuk quuki. Qigdu duugaanam maduudunta.
`gridzyItemInitialToVisible`	uwwayti qemmoh addah yanbulleem qemmise wakaak gulgulumele. uwwayti inki gabuuk yanbulleek widiril duugumele.
`gridzyItemVisible`	uwwayti inki gabuuk yanbulleek widiril gulgulumele. uwwayti baytam qemmisse wak duugumele.
`gridzyItemVisibleToHidden`	uwwayti baytam qemmisse wak gulgulumele. uwwayti inki gabuuk qellite wak duugumele.
`gridzyItemHidden`	uwwayti inki gabuuk qeltut xayuk gulgulumele. uwwayti yanbulleem qemmise wakaak duugumele.
`gridzyItemHiddenToVisible`	Uwwayti qimmiseh yan waqdi (naharsi addah qimmiseh yan waqdi – footima `gridzyItemInitialToVisible` ) wagita. uwwayti inki gabuuk yanbulleek widiril duugumele.
`gridzyItemVisibleToVisible`	tukteenay firqanfiir addat milaagimte wak xayuk gulgulumele, takkay immay uwwayti isih sugeeh yanbulleeh suga. milaagi animeeshin gaba kala wak duugumele.

Default gexsit ascossi kee animationitte elle tanbulle innal kee elle tan innal Gridzy main CSS file.

too dagal galab kak xagne CSS footimaami atu isi gexsitih ascossi kee animeeshin maagaxxi abtam duddah. Gridzy lafa le CSS faayil wagit, atu maca abtam faxximtam cedduh. meysi mali, kullim nagay tunkuttube wokkel.

quuki maysaasa

atu mango muucit duqaysimtek, toh meqe mabla takkem bictah Gridzy catta giriid sissikuk xisuh.

muucitte kaqitaanam waasaanam

Giriizi hununuh faxam inkih tan muucitteh weelo giriid cisaabissuh. too nummah xalootitte kaqo liyyitte dagoo muucitte gulguluh tenek gersi mari ane week. mango muucitte tan, mango bakcarra ta xalootu.

ta caalat waasnuh, hununuh width kee height weeloola inkih img liyyitteh. toh tuxxiqle gitah tan caddo daffeysaanam umman cankah muucitte, akkewaytek muucitte baytam akkele. massat yan caddo asli fidnaa kee deddaarak muuci:

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

tohuk lakal Gridzy cisaabissam duudah firqanfiir sissikuk yaaxigem faxe kal hunun giffo muucitte.

Cabuli quuki

dubuk muucitte quukum too tanbulleem tanbulle booxal, dubuk too maaqattooti katay:

dagal elle qaddowte innal width kee height kilqaaqi culusa ( gitah tan caddot xoqoysimtam kee ismit)
Inkih tan src sissinaane data-gridzylazysrc lih lowsis abak ( srcset sissinaane kaadu lowsis abak, data-gridzylazysrcset lih lowsis abak).

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

too maaqattootik lakal muucitte quuki xayuk oson xayih hinnay addat tanbulle booxal.

gexsit ascossi

gexsit ascossih qunxa animeeshin aykoon too muuci quukah yan uddur yanbulle. atu ammuntittet xoqoysimtek kee arabitte , gexsit ascossi sissikuk ammulleele. Akkewaytek atu dago massos faxxa:

kulli img liyyitte div liyyittet daffeesa
(akkek gersi faxe liyyitte fan- ubul semantic HTML mangom)
footima osis gridzyImage muuci umman img liyyitteh

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

tohuk lakal atu tablem faxxinta gexsit ascossi muucitte wakti beyta quukih.

maydaddaaroori

Giriizih addat tan maydaddaaroori kaxxam sahlinih takkay immay caylale. Faxem takkay faxe qaynatih maydaddaara faxxam, toh kaxxam ceela toh ceddam. Inkih atu faxxam, dago CSS kee dago HTML cibtih liyyitte...

ah kaana tuxxiq le ceelallo:

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

Maaqattaak Maaqattah Xisnay

1. Naharak nanu fanxam HTML rikkisso Gridzy kee footimaamih migaaqitte inkih tan gallery uwwaytitte tonnal nanu ken sillosnam dudnah sarra

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

ta ceelallol nanu dubuk inki footimat nantifiqem umman liyyitte. takkay immay atu kalah mango footimaami daffessam duuddah inki liyyitte, too liyyitte mango maydaddaaroori gitaak geytimtam faxximta.

2. Tokkeek nanu dagoo adranto edde osisenno woo maydaddaaroori milagnam dudnah

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

gubitte aftok, atu kalah gersi cibtih liyyittel tantifiqem duddah ceelalloh cubbusso sandugut, raadiyo gubitte, dooro booxaaxi kee tonnal.

kah tablennah, gubitte caddooda CSS meexo. nanu elle gaba kalnennal, too gubat xukkutaanam muucitte taybulleem too CSS meexot ramaddos. Metteebanni gurral filter doorit ta caddo fan massoosele.

atu kalah mangoomuy centibbaaru le meexot tantifiqem duuddah. ceelalloh :not(.animals) kaxxam taamitele, tonnah .animals.people kee .animals, .people .

3. ellecaboh, nanu gubitte div kontineerit kobxisnam kee Giridzy gallery fan ken axawah hayneh, filterControls doorit daffeysak:

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

kah tablennah, nanu kalah CSS meexot nantifiqem filterControls dooriti. div kontineer lih id weelo dubuk ayfaf taceem gubitte sahlinuk meexituh too CSS meexoh gitaak.

Toh teeti!

Java iskiriptih fidga doortek, API cubbus.

API

Gridzy isi API lem takkay immay, mango caagiida tet sinnim takkem bictah, uxxuuk DOM wagsiisak. Giriizi tet yubleeh, firqanfiir massoosele. Takkay immay kaxxam caylale API yan...

DOM yaylaaqeenimi

inkih tan sanad duyyeh ceelol (DOM) maylatak nanu naharak kontineer liyyitte fanna:

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

muucitte osis

toh tuxxiq le inki gabuuk xisaanam kee qusba awki liyyitte kibtam atu edde osissam naharal kontineer liyyitte. Akkewaytek Giriizi gitat yan acassaale yaaxigem maduuda.

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

muucitte kala

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

Doorit milaag

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

mangom wagittaamal DOM atu gorrissam duddah MDN qarok qari sanadittel . kalah DOM culma tan.

ikoytiinu API

API xoqoysimnuh, nanu naharak Gridzy ceelalloh fanna, Giridzy kontineerittet axawah taniimi:

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

Doorit Gey

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

Inkih tan doorititte geya

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

Doorit massoosa

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

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

maydaddaara abnis

maydaddaara assabalta dubuk farmo doorit filter too faxe gitat yan CSS meexo:

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

Qagitak seecoh abnissoosa osis

2.4.0 bicseenak qemmissa haanam BAXXAQEN
qasriinot doqaysimam kee mangom milallaagime tekkookat aftok. Addatinoh ciggilta exxa wagita.

~~Gridzy.js 2 qoklah dagoo doorititte qagi seecoh abnissoosa. oson dubuk massoosaanam duudaanah lewanna API, takkay immay hununuh gersi doorititteh innal:~~

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

	~~Baxxaqisiyya~~
~~`onBeforeOptionsChanged`~~	~~qagi seecoh abnisso too saanih seecimte doorititteh farmo.~~
~~`onOptionsChanged`~~	~~qagi seecoh abnisso too saanih seecimte doorititteh kobxiseynak lakal.~~
~~`onBeforeRender`~~	~~Qagitaak seecoh abto saanih xayyoysak naharal seecimte.~~
~~`onRender`~~	~~qagi seecoh abnisso too saanih seecimte maqnissok lakal.~~

tekkookat doqaysima

2.4.0 bicsaak qemmissa haanam

Atu Gridzy tekkookat hununuh Java iskiriptih tekkookah innal xoqoysimtam duddah:

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

Inki inki tekkooka Gridzy konteiner elementittel geytimtaah, gersi tekkooka kaadu konteyner elementitte addat tan cankâ qaynatih elementittel geytimta.

tekkooka girah Giriizih kontineeri liyyitteh amol:

	Baxxaqisiyya
`gridzyBeforeInit`	Giraari mayballaah qimmok naharal.
`gridzyInit`	Gira mayballaah arac qemmiseek widiril.
`gridzyBeforeOptionsChanged`	Doorit daffeysak naharal gira.
`gridzyOptionsChanged`	Doorit daffeyseenik lakal gira.
`gridzyBeforeRender`	Gira tatrussaamak afal.
`gridzyRender`	Gira maqnissok lakal.

Atu akkel faxe tekkooka waytek, ku maganak qokol essero rub.

event.target Giriizih kontineeri liyyitte xayyoosa.
event.detail.instance xayyoysam Giriizih ceelallo.

tekkooka girah uwwayti liyyittel:

	Baxxaqisiyya
`gridzyItemBeforeInit`	Gira uwwayti qemmisak naharal.
`gridzyItemInit`	Uwwayti qemmisiyyih lakal gira.
`gridzyItemLoading`	Uwwayti quuki qimbisa wak gira.
`gridzyItemReady`	Gira uwwayti giriid cisaabissoh gulguluh gaca wak. tonnal ceeloh caddo timixxigeh, takkay immay muuci uxih quukam takkeh.
`gridzyItemComplete`	Gira uwwayti muuci inki gabuuk quuka wak.

Atu akkel faxe tekkooka waytek, ku maganak qokol essero rub.

event.target xayyoysam assakoxxa le uwwaytih liyyitte.
event.detail.instance xayyoysam Giriizih ceelallo.

API - Baadal

toh dagoo tuxxiiqitte too currik tan Gridzy ceelalloola. tonnal nanu mafanna ceelalloh naharal geynam.

sugte doorit gey

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

inkih tan sugte doorititte gey

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

sugte doorititte massoosa

Tah inkih tan qimmoh addah Gridzy ceelalloh doorit maqaddoosa, takkay immay qusba ceelalloh rakiibo baxxaqissa. Takkay immay, doorit yanih yan ceelalloh qimmol null , qusba qimmoh qimmot yantifiqeenim faxximta.

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

Atu tamahat xoqoysimtam duddah baad caddol doorit massossuh, DOM gulguluh gacak naharal teetih haytek. tonnal atu mafaxxa doorit daffessam kilqaaqih innal.

Awtomaatizim

Giridzy.js 2 inkih yan automatism taamitak geytimam fanah, gubal tan cogdaadi faxximtam matan. takkay immay isih is duuda aliftam duuddah Gridzy mango qaada gitat yantifiqoonuh:

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

too dooritittek dagoom mabicta oyti data-gridzy- weeloola hinnay gitaak setOptions() , kah kinnim maknay sababitte:

	sugte caddo	Baxxaqisiyya
`autoInitOnDomReady`	`true`	footima lih liyyitte geytam gali `gridzy` amol kee ken qimbissa. `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` mutation wagiite	`true`	qusba liyyitteh geyto `gridzy` lih sissikuk DOM addat tanbulleem kee ken qimmissa. (ceelalloh gali tabaatabit doqaysimak) `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` mutation wagiite	`true`	urri liyyitte ( muucitte) ossimtem kee duugumtem kee giriid sissikuk tasqussube. oyti gitaak `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	baxxaaqis `data-gridzy-` weeloola amolladih xoqoysil asse akkek ane waytam. tah `false` doorit tekkek dubuk lewanna API gitaak massoowele. `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` mutation wagiite	`true`	`data-gridzy-` weeloola, kee giriid sissikuk yaqusbuseenimi. kalah geytem `gridzyAnimated` footima ossimteh hinnay duugumteh kee `style` weelo milaagitte tekkek. `useOptionAttributes` `false` tekkek, toh dubuk `style` kilqah milaagitte geytam. oyti gitaak `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` mutation wagiite	`true`	inkih tan urri liyyittek ( muucitte) `class` kilqaaqih milaagitte yaaxige. maydaddaaroori wagittaamal ramad le. oyti gitaak `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` mutation wagiite 2.5.0 bicsaak qemmissa haanam	`true`	Inkih tan muucitteh `src` kilqaaqih milaagitte geyne. gacsa akkek ceela kitoobah buxaaxit xoqoysiman wak ramad le. oyti gitaak `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Wagitey Giddakiino milaaga 2.6.0 bicsaak qemmissa haanam	`true`	liyyitte fidnal milaagitte geyne. gacsi goolisso wagittaamal ramad le. ( bicsak naharal 2.6.0 xangabi caddo milaaguh tekkooka ankacsa edde yintifiqqen) oyti gitaak `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Gabat qimbisa

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

ceelallo bayis

Amotlih iyyem, Gridzy qimbisak saduh tanim.

gridzyInstance.destroy();
gridzyInstance = null;

Alaaqâ rorsa gabat celsis

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

Inki awki liyyitte gabat celsis

Mango uddur mafaxxiima, kaxxam dago caaloota akke waytek.

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

weeloola gabat celsis

woo useOptionAttributes doorit true takkem faxximtam kassit.

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

Cayli Mabla

Mango uddur mafaxxiima, walaa inkih yan isih taamitam alfime wayta way

gridzyInstance.render();

WordPress culseena

Jaava iskiriptih kitoobah buxa

Ayfaafaya

Mabla 2.x