Kit me 2.x – Gridzy.Gallery

Kabedo me wilobo ni ki loko ne kene. Ka gin mo pe tye ka nen maber, nen coc ma ki coyo i leb Munu.

Tic ma yot

Ket jami ma ki lwongo ni Gridzy i cim ni ki i med gi i website ni (pol kare i dul ma malo):

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

Med coc me HTML (ka mo keken i dul kom):

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

Meno aye! Man obedo labol ma tiyo maber. Pe mitte ni ki lok mukene.

Kit me yubu

Yo mayot me yubu Gridzy tye, me tic ki jami ma ki lwongo ni HTML. Myero i ket nying jami ma iyero ki data-gridzy- keken. Ki dong, me keto spaceBetween , med gin ma ki lwongo ni 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>

Jami ma pire tek

	wel ma ki keto con	Kit me titu
`animate`	`true`	Moko ka jami ma ki nyutu omyera ki ti kwede ka grid ni oloko (me labolle, ka ki loko dit pa wang ot me neno piny onyo ka ki keto gin ma ki lwongo ni filter).
`layout`	`justified`	Tito kit ma ki tiyo kwede. Gridzy.js 2 miiyo kony i kom yub aryo ma pat pat `justified` ki `waterfall` . Gin acel acel tye ki jami ma ki medo iye, ma in itwero nongo piny kany.
`filter`	`*`	moko cal mene ma omyera ki nyuti. CSS-selector mo keken ki twero tic kwede calo wel kany. Pol kare ki keto kene kun kitiyo ki `filterControls` (nen gin ma lubo). Nen Filters
`filterControls`		Moko ngo ma ki twero tic kwede me poko cal ni. Gin mo keken ma yero CSS, ma yero jami ma ki coyo i HTML, ki twero tic kwede calo wel kany. Nen Filters
`autoConsiderScrollBars`	`true`	Me byeko lac ma tye ka jami ma ki lwongo ni scroll bar onyute onyo orweny woko. Pol kare ki waco ni myero iwek obed `true` kono ka gin ma timme kene ni okelo peko.

Justified Kit me yubu

	wel ma ki keto con	Kit me titu
`autoFontSize`	`false`	loko rwom me coc pa bok acel acel malube ki dit pa bok macon. Pi kit ma ki keto kwede, dit pa coc pe ki keto atir.
`desiredHeight`	`190`	nyutu bor ma mite pi rwom me jami. Bore kikome ki bi kwano malube ki lac ma tye ki jami ma tye i dul ni.
`hideOnMissingImage`	`true`	Kano bok ma tye ki cal ma pi ki twero keto ne.
`spaceBetween`	`4`	nyutu bor ma tye i kin jami ma tye i pixels.
`lastRowAlign` cake i dul me 2.3.0	`justified`	Nyutu kit ma rwom me agiki ni tye kwede. Wel ma ki yer tye `left` , `center` , `right` ki `justified` .
`singleRowAlign` cake i dul me 2.3.0	`justified`	Nyutu kit ma ki tiimo kwede ka tye dul acel keken. Wel ma ki yer tye `left` , `center` , `right` ki `justified` .
~~`fillLastRow`~~ ~~cake i dul me 2.1.0~~	~~`true`~~	Ki kwanyo woko nicako i dul me 2.4.0 (KI KWERO woko cake i dul me 2.3.0 ) Yub cal ni wek dul me agiki ni obed ma opong. Ka imito medo cal ma rwate, twero bedo tam maber me juku ne. Pe kelo adwogi mo i kom dul acel acel (nen `fillSingleRow` ).
`fillSingleRow` cake i dul me 2.1.0	~~`true`~~	Ki kwanyo woko nicako i dul me 2.4.0 (KI KWERO woko cake i dul me 2.3.0 ) ~~Ka tye dul acel keken, en yubu cal ni wek dul ni obed ma opong. Ka twero time ni in itye ki cal acel onyo aryo keken i ot ma ki gwoko iye cal, twero bedo tam maber me juku ne.~~

Waterfall Kit me yubu

	wel ma ki keto con	Kit me titu
`autoFontSize`	`false`	loko rwom me coc pa bok acel acel malube ki dit pa bok macon. Pi kit ma ki keto kwede, dit pa coc pe ki keto atir.
`desiredWidth`	`250`	nyutu lac pa dul ma miite. Lac ne kikome ki bi kwano malube ki lac ma tye ki wel dul ma tye.
`hideOnMissingImage`	`true`	Kano bok ma tye ki cal ma pi ki twero keto ne.
`horizontalOrder`	`false`	nyutu ni jami ni ki keto gin acel keken i dul acel acel ki tung lacuc me oo tung lacuc, ki dong cako odoco i dul ma lacuc loyo ma pe jenge i kom dul mene ma tye ki kabedo madwong iye. Ki kit ma ki keto kwede jami ni ki bi keto gi i dul ma tye ki bor ma nok loyo.
`spaceBetween`	`4`	nyutu bor ma tye i kin jami ma tye i pixels.
`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`.

Jami mukene ma ki medo i kom gi

Pi jami mukene ma ki medo, nen API .

Semantic HTML

Kit ma ki yubu kwede HTML ma yot pa Gridzy tye eni:

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

Ento, Gridzy tye ma yot ata ki in itwero tic ki dul HTML mukene weny. Tye jami manok ma myero ki tam iye:

Latin acel acel me gin ma ki keto iye ni nyutu gin acel i kin jami ma ki keto ni.
Gin weng ma tye i container ki lutino ne twero bedo kit tag mo keken, ma calo ul ki li (tam me dwoko rwom me tic pa layeny piny).
Ka gin ma ki lwongo img element pe obedo latin kikome, en mito dul ma ki lwongo gridzyImage .

Man bene tye yub me 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>

tutwale ka imiito medo coc ma ki coyo piny, omyera ibed ki yub me HTML ma malo. Me pwonyo jami mapol i kome, nen Captions & Skins .

Coc ma ki coyo piny ki del kom

Ka imiito medo coc i kom cal ni, omyera i lok kit ma nen kwede. Pi meno, del kom mogo ma ki ngeyo con tye. Del kom acel acel tye ki CSS file. Myero i med gin ni i kom gin ma ki lwongo ni Gridzy (pol kare i dul ma malo):

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

Medo ikom meno, imito yub me HTML ma malo:

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

Ka itye ka tamo pi kit ma ki yubu kwede HTML, nen Semantic HTML .

Pi coc ma ki coyo piny ni itwero tic ki kit coc mo keken, nen ni tye ki dul ma ki lwongo gridzyCaption . Gin ma ki lwongo img mito dul ma ki lwongo ni gridzyImage .

Labol ma malo ni nyuti del kom gridzySkinClassic . Me tic ki mukene, lok nying del kom ni ki acel i kin magi:

Del kom ma tye iye

	kilaci ma tye
gridzySkinBlank kabedo maber me cako yubu del kom ma megi neno anyim	`gridzySkinBlank`
gridzySkinClassic neno anyim	`gridzySkinClassic` `gridzySkinClassicLight`(KI KWERO woko cake i dul me 2.6.0)
gridzySkinFullOverlay neno anyim	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(KI KWERO woko cake i dul me 2.6.0)
gridzySkinLift neno anyim	`gridzySkinLift` `gridzySkinLiftLight`(KI KWERO woko cake i dul me 2.6.0)
gridzySkinMagnifier tic me zoom pe tye iye neno anyim	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(KI KWERO woko cake i dul me 2.6.0)

Jami ma ki waco malo ni weng mito CSS keken, ento tye jami mukene ma mito JavaScript file:

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

	kilaci ma tye
gridzySkinBlur pe tiyo i IE neno anyim	`gridzySkinBlur` `gridzySkinBlurLight`(KI KWERO woko cake i dul me 2.6.0)
gridzySkinCard neno anyim	`gridzySkinCard` `gridzySkinCardLight`(KI KWERO woko cake i dul me 2.6.0)

Kit me del kom

Cake i dul me 2.6.0 tye yoo me yubu del kom ma ki yubu iye. Malube ki del kom ma imito in itwero keto kala me angec, kala me coc ki tipu me coc. Myero ibed ki jami ma ki yubu me CSS ma calo ma itwero neno kany:

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

Nen jami ma ki cwako ki wel ma kiketo pi del kom acel acel kany:

gridzySkinClassic

Gin ma twero loko	wel ma ki keto con	Ngec
`--background`	`rgba(0, 0, 0, .7)`	ye ni CSS mo kiken ma tye i nge
`--color`	`rgb(255, 255, 255)`	yee wel rangi pa CSS mo keken
`--text-shadow`	`none`	ye ni gin mo kiken ma ki lwongo ni CSS coc-shadow wel

gridzySkinFullOverlay

Gin ma twero loko	wel ma ki keto con	Ngec
`--background`	`rgba(0, 0, 0, .7)`	ye ni CSS mo kiken ma tye i nge
`--color`	`rgb(255, 255, 255)`	yee wel rangi pa CSS mo keken
`--text-shadow`	`none`	ye ni gin mo kiken ma ki lwongo ni CSS coc-shadow wel

gridzySkinLift

Gin ma twero loko	wel ma ki keto con	Ngec
`--background`	`rgba(0, 0, 0, .7)`	ye ni CSS mo kiken ma tye i nge
`--color`	`rgb(255, 255, 255)`	yee wel rangi pa CSS mo keken
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ye ni gin mo kiken ma ki lwongo ni CSS coc-shadow wel

gridzySkinMagnifier

Gin ma twero loko	wel ma ki keto con	Ngec
`--background`	`rgba(0, 0, 0, .7)`	ye ni CSS mo kiken ma tye i nge
`--color`	`rgb(255, 255, 255)`	yee wel rangi pa CSS mo keken

Del kom man pe cwako --text-shadow

gridzySkinBlur

Gin ma twero loko	wel ma ki keto con	Ngec
`--background`	`rgba(0, 0, 0, .7)`	ye ni CSS mo kiken ma tye i nge
`--color`	`rgb(255, 255, 255)`	yee wel rangi pa CSS mo keken
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ye ni gin mo kiken ma ki lwongo ni CSS coc-shadow wel

gridzySkinCard

Gin ma twero loko	wel ma ki keto con	Ngec
`--background`	`rgba(0, 0, 0, 1)`	ye ni CSS mo kiken ma tye i nge
`--color`	`rgb(255, 255, 255)`	yee wel rangi pa CSS mo keken
`--text-shadow`	`none`	ye ni gin mo kiken ma ki lwongo ni CSS coc-shadow wel

Del kom ma ki yubu con ni gicwako coc ma yot keken. Itwero yubu del kom ma megi ki ma rwate. Tim ber inen Style Gridzy .

Kit ma ki lwongo ni Gridzy

Ka pe tye del kom ma ki yubu ma rwate ki gin ma imito, ki in itwero yubu del kom ni keni.

Yo mayot loyo en me cako kwanyo del kom ma dong tye con ki loko ne ma rwate ki gin ma imito. Gin ma ki lwongo ni condefined skin gridzySkinBlank pol kare obi miiyo guti maber ki bene coc maber i CSS file:

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

I CSS file in ibi nongo dul ma ki lwongo ni gridzySkinBlank , gridzyImage ki gridzyCaption . Gridzy kikome pe mito kwan eni. Ki tiiyo kwede me yubu jami keken ki in itwero kwanyo onyo loko nying gi ka imito.

Medo ikom meno ibi nongo CSS kilaci gridzyItem . Gridzy keto kilaci ni oyot bot lutino weny ma tye i gin ma ki lwongo ni main container element. Pi meno, itwero tic ki kilaci man me yubu jami ma i ot cal ni.

Tam i kom jami ma pigi tego

Jami ma tye iye omyera obed ma opore. Tam ni dit pa jami ni obi loko. Tii ki wel pacenti ma ka wel pixel. Ki nen i Gridzy layout option autoFontSize , ma keto dit pa coc i kom dit pa gin ma ki keto iye.
Gin acel acel omyera obed ki rwom ma ki ngeyo maber. Kit ma gin ni nen kwede pe obi loko ki mitte me kwano grid. Pi meno ka gin mo pe tye ki rwom ma ki ngeyo maber, yub ne ki cingi (me labolle ki css).

I kare mogo, twero bedo yot me yubu jami ma tye iye ma peya Gridzy oyabe. Kwanyo dul ma ki lwongo ni gridzy onyo Gridzy javascript file pi kare manok pi man.

Meno aye! Meno aye gin ma imito me yubu del kom ni. Pol pa del kom ma ki yubu con pe tiyo ki jami mapol makato man.

Ento twero bedo tye mukene ka imito ...

Del kom ma malo

Gridzy tiyo ki dul CSS mapol makato gridzyItem keken. Pol ne ki bi keto ne kene ki in itwero tic kwede me yubu jami bene.

dul ma ki keto iye jami madongo

Nying kilaci	Kit me titu
`gridzy` me keto ki cing	Gridzy nongo jami ma tye ki dul man ki cako gi.
`gridzyAnimated`	Ki bi keto kene ka `animate` ma ki yero ni tye `true` . Ka ki keto kilaci ni ki cing, gin `animate` ki yero ni obi bedo `true` bene (labongo ka ki keto ni `false` ).

kilaci me jami

Nying kilaci	Kit me titu
`gridzyItem`	Ki bi keto cut cut ka gin ni oyabo tic me cako ne. Pe kibi kwanyo ne matwal.
`gridzyItemInitializing`	Ki bi keto cut cut ka gin ni oyabo tic me cako ne. Ki bi loko ne ki `gridzyItemReady` cut ka gin ni oyabe maber. Man tere ni pe ni cal ni ki keto gii weny (nen `gridzyItemLoading` ), ento gin ni tye atera me nen.
`gridzyItemReady`	Obi loko `gridzyItemInitializing` cut ka gin ni oyabe maber. Pe kibi kwanyo ne matwal. Man tere ni pe ni cal ni ki keto gii weny (nen `gridzyItemComplete` ), ento gin ni tye atera me nen.
`gridzyItemLoading`	Ki bi keto cut cut ka gin ni oyabo tic me cako ne. Ki bi loko ne ki `gridzyItemComplete` cut cut ka cal ma tye iye (pol kare acel keken) dong ki keto ne weny.
`gridzyItemComplete`	Obi loko `gridzyItemLoading` cut cut ka cal ma tye iye (pol kare acel keken) dong opong. Pe kibi kwanyo ne matwal.
`gridzyItemInitialToVisible`	Ki bi keto cut cut ka gin ni oyabo nen i tyen mukwongo. Ki bi kwanyo ne cut cut ka gin ni nen maber.
`gridzyItemVisible`	Ki bi keto cut cut ka gin ni nen maber. Ki bi kwanyo ne cut cut ka gin ni oyabo rweny woko.
`gridzyItemVisibleToHidden`	Ki bi keto cut cut ka gin ni oyabo rweny woko. Ki bi kwanyo ne cut cut ka gin ni ki kano woko.
`gridzyItemHidden`	Ki bi keto cut cut ka gin ni ki kano woko. Ki bi kwanyo ne cut cut ka gin ni oyabo nen.
`gridzyItemHiddenToVisible`	Ki bi keto ne cut cut ka gin ni oyabo nen (labongo nen i tyen mukwongo - nen kilaci `gridzyItemInitialToVisible` ). Ki bi kwanyo ne cut cut ka gin ni nen maber.
`gridzyItemVisibleToVisible`	Ki bi keto ne cut cut ka gin mo ma tye i grid ni oloko, ento gin ni kikome onwongo tye ki tye ka nen. Ki bi kwanyo ne cut cut ka alokaloka ni otum.

Ki kit ma ki keto kwede, lanyut me yub ki jami ma nyutu cal ma nen ki ma rweny ki yubu con ki Gridzy main CSS file.

Ki dul CSS ma kiloko i kom gi malo ni in itwero yubu lanyut me tic ni ki jami ma nen. Nen i Gridzy main CSS file, me niang ngo ma myero i lok iye. Pe ibed ki lworo, jami weng ki coyo maber kunu.

Yub me keto ne maber

Ka itiyo ki cal mapol, twero bedo tam maber me konyo Gridzy me yubu grid ni oyoto.

Gengo cal ma tye ka ngwec

Gridzy mito aspect ratio pa cal weny me kwano grid. Lok magi kelo adwogi maber ka cal mogo tye atera ki mukene pe. Ka cal tye madwong, ci adwogi ne twero bedo gin ma cwero cwiny dano.

Me gengo tim eni, ket lac ki borre width height ma ki lwongo ni img . Pire tek me keto wel ma opore pi cal acel acel, ka kumeno cal ni obi doko marac. Wel ma tye kakare tye lac ki bor pa cal ni:

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

I ngeye Gridzy twero kwano grid cut cut labongo ngeyo dit pa cal ni.

Keto jami labongo tic

Me keto cal ma tye i ka neno, lub jami eni:

Ket width ki height ma calo ma ki waco malo ni (nen ni itiyo ki wel ma tye kakare)
Lok jami weny ma ki lwongo src ki data-gridzylazysrc kit ma ki nyutu piny kany (ka itye ki jami srcset bene, lok gi ki 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>

Iyonge jami eni cal ni obi nen cut cut ka gu oo cok onyo i kin kama ki neno iye.

Lanyut me kit me tic

Gin ma nyutu kit ma jami tye ka wot kwede obedo lanyut matidi ma nen ka cal ni tye ka nen. Ka itiyo ki coc ma ki coyo ki del kom , lanyut me tic ni obi nyute kene. Ka kumeno ku omyera i lok jami mogo:

Ket gin acel acel img i gin me div
(onyo i gin mo keken – nen HTML ma mako lok mukene)
Med gin ma ki lwongo gridzyImage i kom gin acel acel ma ki lwongo img element

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

Ingee meno omyera inen lanyut ma nyutu kit ma cal ni tero kare me yabo ne.

Jami ma ki kwanyo

Gin ma ki lwongo ni Filters i Gridzy yot ento tek. Labongo pare ne ngo ma imito, twero bedo ni twere. Gin ma imito en, CSS manok ki jami mogo ma ki coyo i HTML ...

Kany tye labol 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>

Wek wa yub ne rwom ki rwom

1. Mukwongo wamito kit me HTML ma rwate ki Gridzy ki keto nying dul pi jami weny ma ki keto i gallery wek wa twero yero gi lacen

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

I labol man wa tiyo ki dul acel keken pi gin acel acel. Ento ki in bene itwero keto dul mapol pi gin acel, ka gin ni omyera ki nong ki i filter mapol.

2. Ki dong wa medo bute mogo ma wa twero loko iye jami ma ki tiyo kwede

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

Ma ka tic ki bute, ki in bene itwero tic ki jami mukene ma calo bok ma ki keto iye lanyut, bute ma ki keto i redio, kabedo ma ki yero ki mukene.

Kit ma itwero nenone kwede, wel ma tye i bute ni obedo gin ma ki yero CSS. Ka dong wa tyeko, dii i kom bute ma kit meno obi nyutu cal ma rwate ki gin ma ki yero me CSS ni. I yoo me tic, en keto gin ma ki lwongo ni filter i wel man.

Itwero bene tic ki jami ma ki yero ma tek. ma calo :not(.animals) romo tic bene, ma calo .animals.people ki .animals, .people .

3. Me agiki, wa keto bute ni i div container ki wa keto gi i Gridzy gallery, kun wa keto filterControls option:

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

Kit ma itwero nenone kwede, wa tiyo ki CSS selector pi filterControls option. Gin ma ki lwongo div container ki id ni tiyo me miyo bute bedo yot me yero ki i CSS selector ni.

Meno aye!

Ka imiito kony me JavaScript, nen API .

API

Kadi bed ni Gridzy tye ki API ne, jami mapol ki twero tiimo labongo en, ki loko DOM. Gridzy obi neno ne ki obi loko grid ni. Ento tye API mo matek atika ...

Tic ki DOM

Pi jami weny ma ki lwongo ni Document Object Model (DOM) ma ki tiyo kwede omyera kong ki ket gin ma ki lwongo ni container element:

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

Med cal

Pire tek me yubu ki pongo gin manyen ma peya i medo ne i gin ma ki keto iye. Ka kumeno Gridzy pi twero nongo dit pa gin moni.

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

Kwany cal

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

Lok jami ma iyero

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

Lok mukene ikom tic ki DOM in itwero nongo ne i MDN web docs . Ki dong tye lok ma ki cako kwede i DOM ma tye.

API ma tye ki twero

Me tic ki API, mukwongo wamito Gridzy instance, ma ki keto i Gridzy container element:

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

Nongo gin ma ibi yero

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

Nong jami weng ma itwero yero

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

Ket gin ma itwero yero

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

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

Tii ki gin ma kwanyo

Tic ki gin ma ki lwongo ni filter tye me keto gin ma ki lwongo ni option filter ma twero bedo CSS selector 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 tic me lwongo

KI KWERO woko nicake i dul me 2.4.0
Tii ki jami manyen ki ma twero loko loko. Nen dul ma lubo man pi ngec matut.

~~Gridzy.js 2 miiyo kony bot jami mogo ma ki tiyo kwede me lwongo dano. Ki twero keto gi ki i API ma ki keto, ento calo jami mukene:~~

// 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 me titu~~
~~`onBeforeOptionsChanged`~~	~~Tic me lwongo ma ki lwongo cut cut ma peya ki keto gin ma ki yero.~~
~~`onOptionsChanged`~~	~~Tic me lwongo ma ki lwongo cut cut inge keto gin ma ki yero.~~
~~`onBeforeRender`~~	~~Tic me lwongo ma ki lwongo cut cut ma peya ki nyutu.~~
~~`onRender`~~	~~Tic me lwongo ma ki lwongo cut cut ingee nyutu.~~

Tii ki jami ma time

cake i dul me 2.4.0

Itwero tic ki yub me Gridzy ma calo yub me 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.
});

Jami mogo ma time ki keto i kom gin ma ki lwongo ni Gridzy container element ki jami mukene ki keto i kom jami acel acel ma tye i container element.

Jami ma otimme i kom gin ma ki lwongo ni Gridzy container element:

	Kit me titu
`gridzyBeforeInit`	Mac ma peya ki cako tic ki cal.
`gridzyInit`	Mac ingee yabo ot ma ki nyutu iye cal.
`gridzyBeforeOptionsChanged`	Mac ma pwod pi i keto gin ma imito.
`gridzyOptionsChanged`	Mac ingee keto jami ma imito.
`gridzyBeforeRender`	Mac ma peya ki nyutu.
`gridzyRender`	Mac ingee nyutu ne.

Ka ipe ki yub mo kany, tim ber i cwal waraga me kony .

event.target miyo gin ma ki lwongo ni Gridzy container element.
event.detail.instance miyo Gridzy instance.

Jami ma otimme i kom jami:

	Kit me titu
`gridzyItemBeforeInit`	Mac ma peya gin ni oyabe.
`gridzyItemInit`	Mac ingee cako gin moni.
`gridzyItemLoading`	Tye ka lyel ka gin ni oyabo keto ne.
`gridzyItemReady`	Tye ka lyel ka gin ni dong tye atera me kwano grid. Pi meno rwom me cal ni ki ngeyo, ento cal ni twero bedo ka nen.
`gridzyItemComplete`	Tye ka lyel ka cal pa gin ni dong opong.

Ka ipe ki yub mo kany, tim ber i cwal waraga me kony .

event.target miyo gin ma miite.
event.detail.instance miyo Gridzy instance.

API – Global

Tye tic mogo ma pe jenge i kom jami ma ki lwongo ni Gridzy. Pi meno pe wamito ni wanong labol mo ma peya.

Nongo gin ma ki keto con

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

Nongo jami weny ma ki keto con

// 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 jami ma ki yero

Man pe keto jami ma ki yero ma dong ki cako Gridzy, ento nyutu guti pa jami manyen. Ento, ka gin ma ki yero me gin ma dong tye ni ki dwoko cen kun kitiyo ki wel null , en obi tiyo ki wel manyen ma ki keto.

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

Itwero tic ki man me keto jami ma ki yero i wilobo weny, ka i lwongo ne ma peya DOM tye atera. Pi meno pi ibi miito ni i ket jami ma ki yero calo gin ma ki miini.

Automatisms

Ka jami weny ma ki lwongo ni Gridzy.js 2 tye ka tic, pe mitte ni ki tii ki yoo ma piny kany. Ento jami ma tiyo kene ni ki twero juku ne me tic ki Gridzy i yoo macon:

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

Jami mogo ma ki yero ni pe kitwero keto gi ki data-gridzy- attributes onyo ki setOptions() , pi tyen lok ma rwate:

	wel ma ki keto con	Kit me titu
`autoInitOnDomReady`	`true`	Nongo jami ma tye ki dul ma ki lwongo ni `gridzy` i kare ma tye ka yabo pot karatac ki cako gi. Ki twero keto ne ki `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Nongo jami manyen ki dul ma ki lwongo ni `gridzy` cut cut ka gi nen i DOM ki cako gi. (me labolle i kom tic ki pot karatac) Ki twero keto ne ki `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Nongo ka jami ma ki lwongo ni child elements (cal) ki medo onyo ki kwanyo, ki loko grid ni kene. Ki twero keto ne ki `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	nyutu ka ce jami ma `data-gridzy-` ki tiyo kwede pol kare onyo ku. Ka man tye `false` jami ma ki yero ni ki twero keto ne ki i API ma ki ngeyo. Ki twero keto ne ki `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Nongo alokaloka pa jami ma ki lwongo ni `data-gridzy-` , ki loko grid ni kene. Ki bene nongo ka dul `gridzyAnimated` ki medo onyo ki kwanyo ki ka alokaloka `style` ma ki yubu kwede. Ka `useOptionAttributes` tye `false` , en nongo alokaloka `style` . Ki twero keto ne ki `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Nongo alokaloka i kit ma `class` tye kwede i kom jami matino tino (cal). Pire tek ma mako jami ma ki lwongo ni filters. Ki twero keto ne ki `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver cake i dul me 2.5.0	`true`	Nongo alokaloka pa jami ma ki lwongo ni `src` i kom cal weny. Ber ka kitiyo kwede ki React onyo jami ma kit meno. Ki twero keto ne ki `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` loko dit pa gin ma ki lwongo niObserver cake i dul me 2.6.0	`true`	Nongo alokaloka i lac pa gin ni. Pire tek ma lubu kit ma ki yubu kwede jami. (Mapwod peya ki yubu 2.6.0 ki tiyo ki gin ma winyo lok ma ki loko dit pa wang ot) Ki twero keto ne ki `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Yab ki cingi

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

balo gin ma tye ni

Ki waco ne, gin ma pat ki yabo Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Ket rwom pa lutino kacel ki cingi

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

Ket gin acel ma ki lwongo ni Single Child Element ki cingi

Pol kare pe mitte, kono i kare mogo manok.

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

Ket jami ni kacel ki cingi

Nen ni tic ki gin ma ki lwongo useOptionAttributes omyera obed true pi man.

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

Diyo nyutu

Pol kare pi miite, kede ka jami weny ma tiime piire kene ki neko woko

gridzyInstance.render();