Mofuta wa 2.x – Gridzy.Gallery .

Webosaete e ranotswe ka go itirisa. Fa sengwe se sa tlhaloganyesege, tsweetswee leba ditokomane tsa Seesemane.

Tiriso ya Motheo

Laisa difaele tsa Gridzy mo sefareng ya gago mme o di tsenye mo webosaeteng ya gago (gantsi mo karolong ya tlhogo):

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

Tsenya khoutu ya HTML (gongwe le gongwe mo karolong ya mmele):

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

Ke gone! Seo ke sekai se se dirang ka botlalo. Ga go tlhokege go simolola gape.

Thulaganyo

Tsela e e bonolo go gaisa ya go rulaganya Gridzy ke, go dirisa fela diponagalo tsa HTML. O tlhoka fela go tsenya maina a ditlhopho pele ka data-gridzy- . Ka jalo, go seta tlhopho ya spaceBetween , tsenya fela tshwano ya 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>

Ditlhopho tsa Botlhokwa

	Boleng jwa thulaganyetsoruri	Tlhaloso
`animate`	`true`	E tlhomamisa gore a ditshwantsho tse di tshelang di tshwanetse go dirisiwa fa keriti e fetoga (ka sekai, fa o fetola bogolo jwa fensetere ya sebatli kgotsa fa o seta setlhotlhi).
`layout`	`justified`	E tlhalosa thulaganyo e e dirisitsweng. Gridzy.js 2 e tshegetsa dithulaganyo tse pedi tse di farologaneng tsa `justified` le `waterfall` . E mong le e ba bona o na le lona eketsehileng kgetho paramethara, tseo u ka fumana ka tlase tafoleng ena.
`filter`	`*`	E tlhomamisa gore ke ditshwantsho dife tse di tshwanetseng go bontshiwa. Setlhophi sengwe le sengwe sa CSS se ka dirisiwa jaaka boleng fano. Gantsi e setiwa ka go itirisa ka `filterControls` (bona kgetho e e latelang). Tlhola Ditlhotlhi
`filterControls`		E tlhomamisa gore ke dielemente dife tsa foromo tse di ka dirisiwang go sefa ditshwantsho. Setlhophi sengwe le sengwe sa CSS, se se tlhophang dielemente tsa foromo ya HTML, se ka dirisiwa jaaka boleng fano. Tlhola Ditlhotlhi
`autoConsiderScrollBars`	`true`	Go bonela pele bophara jo bo leng teng fa dibara tsa go tsamaya di tlhagelela kgotsa di nyelela. Go kgothalediwa ka metlha go e tlogela e le mo `true` ntle le fa go itirisa gono go baka mathata.

Justified tsa Thulaganyo

	Boleng jwa thulaganyetsoruri	Tlhaloso
`autoFontSize`	`false`	E ntšhwafatsa ka go itirisa thoto ya bogolo jwa fonto ya lebokoso lengwe le lengwe go ikaegilwe ka bogolo jwa lebokoso la ntlha. Ka thulaganyetsoruri popego ya bogolo jwa fonto ga e a setiwa ka tlhamalalo.
`desiredHeight`	`190`	E tlhalosa bogodimo jo bo batlegang jwa mela ya dielemente. Bogodimo jwa nnete bo tla balelwa go ikaegile ka bophara jo bo leng teng le dielemente tse di mo moleng.
`hideOnMissingImage`	`true`	E fitlha mabokoso a a nang le ditshwantsho tse di neng di sa kgone go laisiwa.
`spaceBetween`	`4`	E tlhalosa sekgala magareng ga dielemente ka dipiksele.
`lastRowAlign` fa e sa le ka mofuta wa 2.3.0	`justified`	E tlhalosa boitshwaro jwa mola wa bofelo. Boleng jo bo letleletsweng ke `left` , `center` , `right` le `justified` .
`singleRowAlign` fa e sa le ka mofuta wa 2.3.0	`justified`	E tlhalosa boitshwaro fa go na le mola o le mongwe fela. Boleng jo bo letleletsweng ke `left` , `center` , `right` le `justified` .
~~`fillLastRow`~~ ~~fa e sa le ka mofuta wa 2.1.0~~	~~`true`~~	E TLOSITSWE fa e sa le ka mofuta wa 2.4.0 ( E TLHOKOMEDITSWE fa e sa le ka mofuta wa 2.3.0 ) E rulaganya ditshwantsho gore mola wa bofelo o nne o tletse ka botlalo ka metlha. Fa o rulaganya go tsenya ditshwantsho ka maatla, e ka nna kgopolo e e siameng go tima seno. Ga e na seabe mo meleng e le nngwe (bona `fillSingleRow` Mongwe ).
`fillSingleRow` fa e sa le ka mofuta wa 2.1.0	~~`true`~~	E TLOSITSWE fa e sa le ka mofuta wa 2.4.0 ( E TLHOKOMEDITSWE fa e sa le ka mofuta wa 2.3.0 ) Fa go na le mola o le mongwe fela, e rulaganya ditshwantsho gore ka metlha mola o tlale ka botlalo. Fa go ka direga gore o nne le setshwantsho se le sengwe kgotsa di le pedi fela mo lefelong la ditshwantsho, e ka nna kakanyo e e siameng go tima seno.

Waterfall tsa Thulaganyo

	Boleng jwa thulaganyetsoruri	Tlhaloso
`autoFontSize`	`false`	E ntšhwafatsa ka go itirisa thoto ya bogolo jwa fonto ya lebokoso lengwe le lengwe go ikaegilwe ka bogolo jwa lebokoso la ntlha. Ka thulaganyetsoruri popego ya bogolo jwa fonto ga e a setiwa ka tlhamalalo.
`desiredWidth`	`250`	E tlhalosa bophara jo bo batlegang jwa dikholomo. Bophara jwa nnete bo tla balelwa go ikaegile ka bophara jo bo leng teng le palo ya dikholomo.
`hideOnMissingImage`	`true`	E fitlha mabokoso a a nang le ditshwantsho tse di neng di sa kgone go laisiwa.
`horizontalOrder`	`false`	E tlhalosa gore dielemente di beilwe ka tlhomamo elemente e le nngwe mo kholomong nngwe le nngwe go tswa molemeng go ya kwa mojeng, morago ga moo e simolola gape mo kholomong e e kafa molemeng thata go sa kgathalesege gore ke kholomo efe e e nang le lefelo le lentsi mo go yone. Ka thulaganyetsoruri dielemente di tla nna di beilwe mo kholomong e e nang le bogodimo jo bonnye go gaisa.
`spaceBetween`	`4`	E tlhalosa sekgala magareng ga dielemente ka dipiksele.
`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`.

Ditlhopho tse dingwe tse di gatetseng pele

Go bona ditlhopho tse dingwe tse di gatetseng pele, leba API .

HTML ya bokao

Popego e e bonolo thata ya HTML ya Gridzy ke eno:

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

Leha ho le joalo, Gridzy e tenyetseha haholo mme o ka sebelisa hoo e ka bang sebopeho sefe kapa sefe se seng sa HTML. Go na le dintlha di le mmalwa fela tse o tshwanetseng go di akanyetsa:

Ngwana mongwe le mongwe wa elemente ya setshodi o emela ntlha e le nngwe mo keriting.
Bobedi setshelo elements le bana ba lona e ka ba mofuta ofe kapa ofe tag, tse kang ul le li (feela nahana ho reset sebatli defaults).
Fa elemente img e se ngwana yo o tlhamaletseng ka boyone, e tlhoka setlhopha sa gridzyImage .

Ka jalo seno gape ke popego ya HTML e e dirang:

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

Segolobogolo fa o batla go tsenya ditlhaloso, o tlhoka popego ya HTML e e gatetseng pele. Go ithuta go le gontsi ka yone, leba Ditlhaloso le Matlalo .

Ditlhaloso le Matlalo

Fa o batla go tsenya ditlhaloso mo lefelong la gago la ditshwantsho, o tlhoka go tlhalosa tebego. Ka jalo, matlalo mangwe a a tlhalositsweng pele a teng. Letlalo lengwe le lengwe le le nang le faele ya CSS. O tlhoka go tsenya faele eno mo godimo ga difaele tse dikgolo tsa Gridzy (gantsi mo karolong ya tlhogo):

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

Mo godimo ga moo o tlhoka popego ya HTML e e gatetseng pele:

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

Fa o ipotsa ka popego ya HTML, leba Semantic HTML .

Mo tlhalosong o ka dirisa mofuta mongwe le mongwe wa theke, netefatsa fela gore e na le setlhopha sa gridzyCaption . Elemente img e tlhoka setlhopha sa gridzyImage .

Sekao se se fa godimo se go bontsha gridzySkinClassic . Go dirisa e e farologaneng, emisetsa fela leina la letlalo ka lengwe la tseno:

Matlalo a A akareditsweng

	Ditlelase tse di leng teng
Letlalo le le senang sepe tshimologo e e siameng ya go itirela letlalo tebopele ya tlhamalalo	`gridzySkinBlank`
gridzySkinClassic tebopele ya tlhamalalo	`gridzySkinClassic` `gridzySkinClassicLight`(E TLHOKOMEDITSWE fa e sa le ka mofuta wa 2.6.0)
gridzySkinFullOverlay tebopele ya tlhamalalo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(E TLHOKOMEDITSWE fa e sa le ka mofuta wa 2.6.0)
gridzySkinLift tebopele ya tlhamalalo	`gridzySkinLift` `gridzySkinLiftLight`(E TLHOKOMEDITSWE fa e sa le ka mofuta wa 2.6.0)
gridzySkinMagnifier tiriso ya zoom ga e a akarediwa tebopele ya tlhamalalo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(E TLHOKOMEDITSWE fa e sa le ka mofuta wa 2.6.0)

Matlalo otlhe a a fa godimo a tlhoka fela faele ya CSS, mme go na le matlalo a mangwe a gape a tlhokang faele ya JavaScript:

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

	Ditlelase tse di leng teng
gridzySkinBlur Ga e dire mo IE tebopele ya tlhamalalo	`gridzySkinBlur` `gridzySkinBlurLight`(E TLHOKOMEDITSWE fa e sa le ka mofuta wa 2.6.0)
gridzySkinCard tebopele ya tlhamalalo	`gridzySkinCard` `gridzySkinCardLight`(E TLHOKOMEDITSWE fa e sa le ka mofuta wa 2.6.0)

Ditlhopho tsa Letlalo

Ho tloha ka mofuta wa 2.6.0 ho na le Dikgetho tsa ho hlophisa matlalo a hahilweng. Go ikaegile ka letlalo le le rileng o ka seta mmala wa lemorago, mmala wa sekwalwa le moriti wa sekwalwa. O tshwanetse go dirisa fela dipopego tsa CSS tse di tlwaelegileng jaaka o ka bona fano:

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

Leba diphetogo tse di tshegediwang le boleng jwa thulaganyetsoruri jwa letlalo lengwe le lengwe fano:

gridzySkinClassic

Sephetogo	Boleng jwa thulaganyetsoruri	Tshedimosetso
`--background`	`rgba(0, 0, 0, .7)`	e letla boleng bongwe le bongwe jwa lemorago la CSS
`--color`	`rgb(255, 255, 255)`	e letla boleng jwa mmala wa CSS
`--text-shadow`	`none`	e letla boleng bongwe le bongwe jwa moriti wa sekwalwa sa CSS

gridzySkinFullOverlay

Sephetogo	Boleng jwa thulaganyetsoruri	Tshedimosetso
`--background`	`rgba(0, 0, 0, .7)`	e letla boleng bongwe le bongwe jwa lemorago la CSS
`--color`	`rgb(255, 255, 255)`	e letla boleng jwa mmala wa CSS
`--text-shadow`	`none`	e letla boleng bongwe le bongwe jwa moriti wa sekwalwa sa CSS

gridzySkinLift

Sephetogo	Boleng jwa thulaganyetsoruri	Tshedimosetso
`--background`	`rgba(0, 0, 0, .7)`	e letla boleng bongwe le bongwe jwa lemorago la CSS
`--color`	`rgb(255, 255, 255)`	e letla boleng jwa mmala wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	e letla boleng bongwe le bongwe jwa moriti wa sekwalwa sa CSS

gridzySkinMagnifier

Sephetogo	Boleng jwa thulaganyetsoruri	Tshedimosetso
`--background`	`rgba(0, 0, 0, .7)`	e letla boleng bongwe le bongwe jwa lemorago la CSS
`--color`	`rgb(255, 255, 255)`	e letla boleng jwa mmala wa CSS

Letlalo le ga le tshegetse --text-shadow

gridzySkinBlur

Sephetogo	Boleng jwa thulaganyetsoruri	Tshedimosetso
`--background`	`rgba(0, 0, 0, .7)`	e letla boleng bongwe le bongwe jwa lemorago la CSS
`--color`	`rgb(255, 255, 255)`	e letla boleng jwa mmala wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	e letla boleng bongwe le bongwe jwa moriti wa sekwalwa sa CSS

gridzySkinCard

Sephetogo	Boleng jwa thulaganyetsoruri	Tshedimosetso
`--background`	`rgba(0, 0, 0, 1)`	e letla boleng bongwe le bongwe jwa lemorago la CSS
`--color`	`rgb(255, 255, 255)`	e letla boleng jwa mmala wa CSS
`--text-shadow`	`none`	e letla boleng bongwe le bongwe jwa moriti wa sekwalwa sa CSS

Matlalo otlhe a a tlhalositsweng pele a tshegetsa fela ditlhaloso tse di bonolo tsa mafoko. O ka tlhama matlalo a gago thata le a a raraaneng. Tsweetswee leba Setaele sa Gridzy .

Setaele sa Gridzy

Fa go se na letlalo le le tlhalositsweng pele le le tshwanelang ditlhoko tsa gago, o ka itirela setaele.

Tsela e e bonolo ke gore o kopolole pele letlalo le le leng teng mme o le fetolele go tsamaisana le ditlhoko tsa gago. Letlalo le le tlhalositsweng pele la gridzySkinBlank gantsi le ne le tla tlamela ka motheo o o siameng mmogo le ditokomane tse di siameng mo faeleng ya 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;
}

Mo faeleng ya CSS o tla fitlhela ditlhopha tsa gridzySkinBlank , gridzyImage le gridzyCaption . Gridzy ka boyone ga e tlhoke di class tse. Di dirisediwa fela go dira setaele mme ka jalo o ka di tlosa kgotsa wa di naya leina le lešwa fa o rata.

Mo godimo ga moo o tla fitlhela setlhopha sa CSS gridzyItem . Gridzy e beha sehlopha sena ka tsela e iketsang ho bana bohle ba tobileng ba elemente e ka sehloohong ea setshelo. Ka jalo, o ka dirisa tlelase eno go dira setaele sa dilwana tsa galeri ya gago.

Tlhaloganyo Dilo Tse di Botlhokwa

Diteng tsa ntlha di tshwanetse go tsiboga ka botlalo. Akanya ka gore bogolo jwa elemente ruri bo tla fetoga. Dirisa boleng jwa diperesente mo boemong jwa boleng jwa dipiksele. Mme o lebe tlhopho ya thulaganyo ya Gridzy autoFontSize , e e bofang bogolo jwa fonto mo bogolong jwa lebokoso la ntlha.
Ntlha nngwe le nngwe e tshwanetse go nna le selekanyo sa dikarolo tse di tlhalositsweng sentle. Tekanyo ya karolo ga e kitla e fetoga mme e a tlhokega go bala keriti. Ka jalo fa ntlha e se na selekanyo sa dikarolo se se tlhalositsweng sentle ka go itirisa, e tlhalose pele ka seatla (sekao, ka css).

Mo maemong mangwe, go ka nna bonolo go dira setaele sa diteng tsa dintlha pele ga Gridzy a simolola. Tlosa fela gridzy ya setlhopha kgotsa faele ya javascript ya Gridzy ka nakwana ya seno.

Ke gone! Ke sone se o se tlhokang go aga letlalo la gago tota. Bontsi jwa matlalo a a tlhalositsweng pele ga a dirise go feta seno.

Mme go ka nna le tse dingwe fa o rata ...

Matlalo a a Gatetseng Pele

Gridzy e dirisa ditlhopha tse dintsi tsa CSS go na le gridzyItem fela . Bontsi jwa tsone di tla setiwa ka go itirisa mme o ka di dirisa go dira setaele le wena.

Ditlhopha tsa Ditshodi tse dikgolo

Leina la Phaposi	Tlhaloso
`gridzy` go seta ka seatla	Gridzy ka go itirisa o batla dielemente tse di nang le setlhopha seno mme o di simolole.
`gridzyAnimated`	E tla setiwa ka go itirisa fa tlhopho ya `animate` e le `true` . Fa setlhopha seno se setilwe ka seatla, tlhopho ya `animate` le yone e tla nna `true` ka go itirisa (ntle le fa e setilwe ka tlhamalalo go `false` ).

Ditlhopha tsa Dilwana

Leina la Phaposi	Tlhaloso
`gridzyItem`	E tla bewa hang ha ntho e qala tshebetso ya ho qala. Ga e kitla e tlosiwa.
`gridzyItemInitializing`	E tla bewa hang ha ntho e qala tshebetso ya ho qala. E tla emisediwa ka `gridzyItemReady` fela fa ntlha e simolotswe ka botlalo. Ga go reye gore ditshwantsho di laisitswe ka botlalo (bona `gridzyItemLoading` ), mme ntlha e siametse go bonala.
`gridzyItemReady`	E tla emisetsa `gridzyItemInitializing` simolola fela fa ntlha e simolotswe ka botlalo. Ga e kitla e tlosiwa. Ga go reye gore ditshwantsho di laisitswe ka botlalo (bona `gridzyItemComplete` ), mme ntlha e siametse go bonala.
`gridzyItemLoading`	E tla bewa hang ha ntho e qala tshebetso ya ho qala. E tla emisediwa ka `gridzyItemComplete` fela fa ditshwantsho tse di mo teng (gantsi e le nngwe fela) di laisitswe ka botlalo.
`gridzyItemComplete`	E tla emisetsa `gridzyItemLoading` fela fa ditshwantsho tse di mo teng (gantsi e le nngwe fela) di laisitswe ka botlalo. Ga e kitla e tlosiwa.
`gridzyItemInitialToVisible`	E tla setiwa fela fa ntlha e simolola go tlhagelela lekgetlo la ntlha. E tla tlosiwa fela fa selo se bonala ka botlalo.
`gridzyItemVisible`	E tla bewa fela fa ntlha e bonala ka botlalo. E tla tlosiwa fela fa selo se simolola go nyelela.
`gridzyItemVisibleToHidden`	E tla setiwa fela fa ntlha e simolola go nyelela. E tla tlosiwa fela fa ntlha e fitlhegile gotlhelele.
`gridzyItemHidden`	E tla bewa fela fa ntlha e fitlhegile gotlhelele. E tla tlosiwa fela fa ntlha e simolola go tlhagelela.
`gridzyItemHiddenToVisible`	E tla setiwa fela fa ntlha e simolola go tlhagelela (ntle le fa e tlhagelela lekgetlo la ntlha – bona setlhopha sa `gridzyItemInitialToVisible` ). E tla tlosiwa fela fa selo se bonala ka botlalo.
`gridzyItemVisibleToVisible`	E tla bewa hang ha ntho e itseng ka keriting e fetohile, empa ntho ka boeona e ne e le mme e dule e bonahala. E tla tlosiwa fela fa motshikinyego wa phetogo o fedile.

Ka thulaganyetsoruri sesupo sa thulaganyo le ditshwantsho tse di tlhagelelang le tse di nyamelang di tlhalositswe pele ke faele e kgolo ya CSS ya Gridzy.

Ka tsena tse boletsweng ka holimo CSS dihlopha o ka setaele hao tshebetso pontshi le ditshwantsho. Dare go leba mo faeleng ya CSS e kgolo ya Gridzy, go tlhaloganya se o neng o tla tshwanelwa ke go se phimola. Ga go na poifo, sengwe le sengwe se kwadilwe sentle koo.

Tokafatsa go Laisa

Fa o dirisa ditshwantsho tse dintsi, e ka nna kakanyo e e siameng go thusa Gridzy go aga keriti ka bonako.

Thibela go Tlola ga Ditshwantsho

Gridzy o tlhoka ka botlalo selekanyo sa ditshwantsho tsotlhe go bala keriti. Ntlha eno e felela ka gore go nne le dielemente tse di tlolang fa ditshwantsho dingwe di siame mme tse dingwe di sa siama. Fa go na le ditshwantsho tse dintsi, phelelo eno e ka nna e e tenang thata.

Go thibela boitshwaro jono, seta fela diponagalo width le height tsa dielemente tsotlhe img . Go botlhokwa go seta boleng jo bo siameng jwa setshwantsho sengwe le sengwe ka bongwe, go seng jalo ditshwantsho di tla sokamisiwa. Boleng jo bo siameng ke bophara le bogodimo jwa setshwantsho se se farologaneng:

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

Morago ga moo Gridzy a ka bala keriti ka bonako ntle le go tlhoka go itse bogolo jwa ditshwantsho tota.

Go Laisa ka Botshwakga

Go laisa fela ditshwantsho tse di mo lefelong la pono le le bonalang, latela fela dikgato tseno:

Tsenya dipopego width le height jaaka go tlhalositswe fa godimo (tlhomamisa gore o dirisa boleng jo bo siameng)
Emisetsa diponagalo tsotlhe src ka data-gridzylazysrc jaaka go bontshitswe fa tlase (fa e le gore le wena o na le diponagalo srcset , di emisetse ka 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>

Morago ga dikgato tse ditshwantsho di tla laisa fela fa di le gaufi kgotsa mo teng ga lefelo la pono.

Sesupo sa Thulaganyo

Sesupo sa tshebetso ke aekhone e nyane e nang le diphoofolo e hlahang ha setshwantsho se ntse se laisa. Fa o dirisa ditlhaloso le matlalo , sesupo sa thulaganyo se tla bontshiwa ka go itirisa. Go seng jalo o tlhoka diphetogo dingwe:

Tsenya elemente nngwe le nngwe img mo elementeng div
(kgotsa mo elementeng epe e nngwe – leba HTML ya semantiki go bona go le gontsi)
Tsenya setshwantsho gridzyImage mo karolong nngwe le nngwe 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>

Morago ga moo o tshwanetse go bona ditshupo tsa thulaganyo fa ditshwantsho di tsaya nako go laisa.

Ditlhotlhi

Ditlhotlhi mo Gridzy di batla di le bonolo mme di na le maatla. Go sa kgathalesege gore o tlhoka setlhotlhi sa mofuta ofe, go ka direga thata gore se kgonege. Se o se tlhokang fela ke, CSS e nnye le dielemente di le mmalwa tsa foromo ya HTML ...

Sekao se se dirang ke se:

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

A re E Ageng Kgato ka Kgato

1. Sa ntlha re tlhoka popego e e tlwaelegileng ya HTML ya Gridzy le go seta maina a ditlhopha tsa dilwana tsotlhe tsa galeri gore re kgone go di tlhotlha morago ga moo

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

Mo sekaong se re dirisa fela tlelase e le nngwe mo elementeng nngwe le nngwe. Mme gape o ka seta ditlhopha tse dintsi tsa elemente e le nngwe, fa elemente eo e tshwanetse go bonwa ka ditlhotlhi tse dintsi.

2. Re bo re tsenya dikonopo dingwe tse re ka kgonang go fetola ditlhotlhi ka tsone

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

Mo boemong jwa dikonopo, o ka dirisa gape dielemente tse dingwe tsa foromo jaaka mabokoso a go tlhopha, dikonopo tsa radio, masimo a a tlhophilweng jalo le jalo.

Jaaka o ka bona, boleng jwa dikonopo ke ditlhophi tsa CSS tse di tlwaelegileng. Fela fa re sena go fetsa, go tobetsa konopo e e ntseng jalo go tla bontsha ditshwantsho tse di tsamaelanang le setlhophi seo sa CSS. Ka setegeniki e seta fela kgetho ya filter go boleng jono.

O ka dirisa gape ditlhophi tse di raraaneng thata. Ka sekai :not(.animals) le tsone di ka dira, mmogo le .animals.people le .animals, .people .

3. La bofelo, re tsenya dikonopo mo setshoding sa div mme re di bofe mo lefelong la ditshwantsho la Gridzy, ka go seta kgetho ya 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>

Jaaka o ka bona, gape re dirisa setlhophi sa CSS sa kgetho ya filterControls . Setshodi sa div se se nang le tshwano ya id se dira fela go dira gore dikonopo di nne bonolo go di tlhopha ka setlhophi seo sa CSS.

Ke gone!

Fa o rata tharabololo ya JavaScript, tlhola API .

API

Le fa Gridzy e na le API ya yone, bontsi jwa dilo di ka dirwa kwantle ga yone, fela ka go dirisa DOM ka boferefere. Gridzy o tla e lemoga mme a baakanye keriti. Mme gape go na le API e e maatla thata ...

Go dirisa DOM

Mo ditirisong tsotlhe tsa Mofuta wa Selo sa Tokomane (DOM) re tlhoka pele elemente ya setshodi:

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

Tsenya Ditshwantsho

Go botlhokwa go aga le go tlatsa elemente e ntšhwa ya ngwana ka botlalo pele o e tsenya mo elementeng ya setshodi. Ho seng jwalo Gridzy ha a kgone ho lemoha ditekanyetso tse nepahetseng.

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

Tlosa Ditshwantsho

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

Fetola Ditlhopho

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

Go le gontsi ka go dirisa DOM o ka go bona mo ditokomaneng tsa webo tsa MDN . Gape go na le Matseno a DOM a a leng teng.

API ya mong

Go dirisa API, re tlhoka pele sekai sa Gridzy, se se bofilweng mo elementeng ya setshodi sa Gridzy:

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

Bona Tlhopho

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

Bona Ditlhopho Tsotlhe

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

Seta Ditlhopho

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

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

Dirisa Setlhotlhi

Go dirisa setlhotlhi ke go seta fela filter sa tlhopho se se ka nnang setlhophi sepe fela se se dirang sa CSS:

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

Tsenya Ditiro tsa go Letsa Gape

GA e tlhole e dirisiwa fa e sa le ka mofuta wa 2.4.0
Dirisa Ditiragalo tsa segompieno le tse di fetofetogang go na le moo. Bona karolo e e latelang go bona dintlha.

~~Gridzy.js 2 e tshegetsa dikgetho dingwe tsa ditiro tsa go leletsa gape. Di ka setiwa fela ka API ya mong, mme fela jaaka ditlhopho tse dingwe:~~

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

	~~Tlhaloso~~
~~`onBeforeOptionsChanged`~~	~~Callback tshebetso e bitswang ka kotloloho pele ho beha dikgetho.~~
~~`onOptionsChanged`~~	~~Callback tshebetso e bitswang ka kotloloho ka mor'a ho beha dikgetho.~~
~~`onBeforeRender`~~	~~Tiro ya go bitsa gape e e bidiwang ka tlhamalalo pele ga go ranola.~~
~~`onRender`~~	~~Tiro ya go bitsa gape e e bidiwang ka tlhamalalo morago ga go ranola.~~

Dirisa Ditiragalo

fa e sa le ka mofuta wa 2.4.0

O ka dirisa ditiragalo tsa Gridzy fela jaaka ditiragalo tse di tlwaelegileng tsa 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.
});

Diketsahalo tse ding di thunngwa ho elemente ya setshelo sa Gridzy mme diketsahalo tse ding di thunngwa ho elemente ya ntho ka bomong ka hara elemente ya setshelo.

Ditiragalo tse di thuntshitsweng mo elementeng ya setshodi sa Gridzy:

	Tlhaloso
`gridzyBeforeInit`	Melelo pele ga go simolola gallery.
`gridzyInit`	Melelo morago ga go simolola gallery.
`gridzyBeforeOptionsChanged`	E tuka pele ga go seta dikgetho.
`gridzyOptionsChanged`	E tuka morago ga go seta dikgetho.
`gridzyBeforeRender`	Melelo pele ga go ranola.
`gridzyRender`	Melelo morago ga go ranola.

Fa o ka foswa ke ditiragalo dipe fano , tsweetswee romela kopo ya tshegetso .

event.target e tlamela ka karolo ya setshodi sa Gridzy.
event.detail.instance e tlamela ka sekai sa Gridzy.

Ditiragalo tse di thuntshitsweng mo dielemente tsa ntlha:

	Tlhaloso
`gridzyItemBeforeInit`	E tuka pele ga go simolola ntlha.
`gridzyItemInit`	E tuka morago ga go simolola ntlha.
`gridzyItemLoading`	E a tuka fa ntlha e simolola go laisa.
`gridzyItemReady`	E tuka fa ntlha e siametse go balelwa keriti. Ka jalo selekanyo sa setshwantsho se a itsiwe, mme setshwantsho se ka tswa se santse se laisa.
`gridzyItemComplete`	E tuka fa setshwantsho sa ntlha se laisitswe ka botlalo.

Fa o ka foswa ke ditiragalo dipe fano , tsweetswee romela kopo ya tshegetso .

event.target e fana ka elemente ya ntho e fapaneng.
event.detail.instance e tlamela ka sekai sa Gridzy.

API – Lefatshe Lotlhe

Go na le ditiro dingwe tse di ikemetseng ka nosi mo ditiragalong tsa Gridzy. Ka jalo ga re tlhoke go bona sekai pele.

Bona Tlhopho ya Thulaganyetsoruri

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

Bona Ditlhopho Tsotlhe tsa Thulaganyetsoruri

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

Seta Ditlhopho tsa Thulaganyetsoruri

Se ga se beye dikgetho tsa ditiragalo tsotlhe tsa Gridzy tse di setseng di simolotswe, mme se tlhalosa motheo wa ditiragalo tse dišwa. Le fa go ntse jalo, fa tlhopho ya tiragalo e e leng teng e ka setiwa sešwa ka boleng jwa null , e tla dirisa boleng jo bošwa jwa thulaganyetsoruri.

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

O ka dirisa se go seta ditlhopho lefatshe ka bophara, fa o e bitsa pele ga DOM e siame. Ka jalo ga o kitla o tlhola o tlhoka go seta ditlhopho jaaka diponagalo.

Boitiriso

Fa fela di-automatism tsotlhe tsa Gridzy.js 2 di dira, ga go tlhokege mekgwa e e fa tlase. Mme di-automism di ka timiwa go dirisa Gridzy ka tsela e e tlwaelegileng:

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

Dingwe tsa ditlhopho tseno ga di ka ke tsa setiwa ka diponagalo data-gridzy- kgotsa ka setOptions() , ka ntlha ya mabaka a a utlwalang:

	Boleng jwa thulaganyetsoruri	Tlhaloso
`autoInitOnDomReady`	`true`	E lemoga dielemente tse di nang le `gridzy` ya setlhopha fa tsebe e laisa le go di simolola. E ka rulaganngwa ka `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Moelatlhoko wa Phetogo ya Dijini	`true`	E lemoga dielemente tse dišwa tse di nang le `gridzy` ya setlhopha fela fa di tlhagelela mo DOM mme e di simolole. (sekao, ka go dirisa diphetogo tsa ditsebe) E ka rulaganngwa ka `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Moelatlhoko wa Phetogo ya Dijini	`true`	E lemoga gore a dielemente tsa bana (ditshwantsho) di a okediwa kgotsa di a tlosiwa, mme e ntšhwafatsa keriti ka go itirisa. E ka rulaganngwa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	E tlhalosa gore a diponagalo `data-gridzy-` di dirisiwa ka kakaretso kgotsa nnyaa. Fa seno e le `false` dikgetho di ka bewa fela ka API ya mong. E ka rulaganngwa ka `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Moelatlhoko wa Phetogo ya Dijini	`true`	E lemoga diphetogo tsa diponagalo `data-gridzy-` , mme e ntšhwafatsa keriti ka go itirisa. Gape e lemoga fa setlhopha sa `gridzyAnimated` se okeditswe kgotsa se tlositswe le fa diphetogo tsa tshwano `style` di diragala. Fa `useOptionAttributes` e le `false` , e lemoga fela diphetogo tsa popego `style` . E ka rulaganngwa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Moelatlhoko wa Phetogo ya Dijini	`true`	E lemoga diphetogo tsa diponagalo `class` tsa dielemente tsotlhe tsa bana (ditshwantsho). E maleba mabapi le ditlhotlhi. E ka rulaganngwa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Moelatlhoko wa Phetogo ya Dijini fa e sa le ka mofuta wa 2.5.0	`true`	E lemoga diphetogo tsa diponagalo `src` tsa ditshwantsho tsotlhe. E maleba fa e dirisiwa le React kgotsa dilaeborari tse di tshwanang. E ka rulaganngwa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Fetola Bogolo jwaMoelatlhoko fa e sa le ka mofuta wa 2.6.0	`true`	E lemoga diphetogo tsa bophara jwa elemente. E maleba mabapi le moralo o tsibogang. (Pele ga mofuta wa 2.6.0 go ne go dirisiwa moreetsi wa tiragalo ya go fetola bogolo jwa fensetere) E ka rulaganngwa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Simolola ka seatla

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

Senya Tiragalo

Ka bokhutshwane go builwe, se se fapaaneng le go simolola Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Tshwaraganya Lenaane la Bana ka Seatla

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

Kamaganya Elemente e le Nngwe ya Ngwana ka Seatla

Gantsi ga e tlhokege, fa e se mo maemong a a sa tlwaelegang thata.

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

Kamaganya Dipharologantsho ka Seatla

Ela tlhoko gore tlhopho ya useOptionAttributes e tshwanetse go nna true mo go seno.

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

Go Pateletsa go Ranola

Gantsi ga e tlhokege, le fa ditiriso tsotlhe di timilwe

gridzyInstance.render();