2.x - Gridzy.Gallery

Website ni kok no twiwi kok salaijak kha. Khoroksa swk no saimanya hwnkhe, English ni koktwma no naiwi naiwi naidi.

Buini swnammung

Gridzy file no nini server o upload khai di tei nini website o add khai di (kwbangma khe bokhorok ni thani):

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

HTML code no swnamdi (bwsakni je jagao phano):

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

Abo se! Obo kaisa kwtal khe samung tangmani udhahoron. Extra swkang swkang wngnani nangya.

swnammani

Gridzy no swnamna bagwi jotoni slai kwrak lama wngkha, HTML ni rangchak no simi se swnamnani. Nwng rangni mungrokni swkang data-gridzy- bai simi se rwna nangnai. Hakhe, spaceBetween chongmung snamna bagwi, data-gridzy-spaceBetween hwnwi mungwi rwdi.

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

Kwplaisa chongmungrok

	swkangni rang	Sukrubui samani
`animate`	`true`	Grid swlaijak phuru (udhahoronni bagwi, browser ni window ni size swlaijak phuru eba filter set wngphuru) animation rok no swlaiwi rwna nangnai hwnwi saimannai.
`layout`	`justified`	Using wngmani layout no swlaiwi rwkha. `waterfall` 2 wngkha khoroknwi juda juda `justified` no chubachu khlaio. Bohrokni bisingo khoroksa khoroksani sak sakni parameters tongo, abo norok o table ni tolao nugwi mano.
`filter`	`*`	Je image no phunukna nangno hwnwi decide khlaio. Jesa phano CSS-select wngwi rang wngwi mano. Kwbangma jorao `filterControls` bisingtwi sak bai sak set wngwi thango (swkangni chongmungno naidi). Filter rok no naidi
`filterControls`		Muchungmarokno filter khlainani bagwi tamo formni manwirokno swnamwi mano abono saimannai. Jesa phano CSS ni chongnai, HTML form ni manwirok no chongnai, abo no value wngwi use khlaiwi mano. Filter rok no naidi
`autoConsiderScrollBars`	`true`	Scroll bars nukjak eba nukjakya wngkhe tongnai width no saimanna bagwi. O automatism ni wngwi jwngjal wngwi tongkhe, abo `true` o tonwi tongnani nangnai.

Justified

	swkangni rang	Sukrubui samani
`autoFontSize`	`false`	Box ni font-size ni manwi no sak bai sak update khlaio. Default khe font-size ni manwi kaham khe set wngya.
`desiredHeight`	`190`	Element rows ni muchungma kotorma no phunukgo. Kubui khe kotorma wngnai, abo tongmani width tei row o tongnai manwirokni logi logi khe.
`hideOnMissingImage`	`true`	Load wngwi manliya abo hai image tongmani box rokno hide khlaio.
`spaceBetween`	`4`	Pixels ni bisingtwi manwirokni bisingo tongmani jagano phunuknai.
`lastRowAlign` 2.3.0 ni simi	`justified`	Last row ni tongmung no define khlaio. Rangchakni rang wngkha `left` , `center` , `right` tei `justified` .
`singleRowAlign` 2.3.0 ni simi	`justified`	Define khlaio, kaisa simi row tongkhe, aboni tongmungno define khlaio. Rangchakni rang wngkha `left` , `center` , `right` tei `justified` .
~~`fillLastRow`~~ ~~2.1.0 ni simi~~	~~`true`~~	2.4.0 ni simi swkakjak kha ( 2.3.0 ni simi KHLAIJAK KHA) Image rok no arrange khai di, abo hai khe last row o joto jora no kwtal khe wngwi tongnai. Nwng dynamic khe append khwlainani muchungkhe, omono deactivate khwlaiwi rwmani kaham wngnai. Kaisa row ni sakao mungsa effect wngya ( `fillSingleRow` no phurwi naidi ).
`fillSingleRow` 2.1.0 ni simi	~~`true`~~	2.4.0 ni simi swkakjak kha ( 2.3.0 ni simi KHLAIJAK KHA) Kaisa row simi tongkhe, abo image rokno arrange khlaio, abo hai khe row jora jora khe kwtal khe wngwi tongnai. Gallery o kaisa eba khoroknwi simi wngwi mano hwnkhe, omono deactivate khlaiwi rwmani kaham wngnai.

Waterfall swnamjakmani chongmungrok

	swkangni rang	Sukrubui samani
`autoFontSize`	`false`	Box ni font-size ni manwi no sak bai sak update khlaio. Default khe font-size ni manwi kaham khe set wngya.
`desiredWidth`	`250`	Column ni muchungma rangchak no define khlaio. Aswk wngwi tongmani wngwi tongmani wngwi tongmani wngwi tongmani wngwi tongmani wngwi tongmani wngwi tongmani wngwi tongmani.
`hideOnMissingImage`	`true`	Load wngwi manliya abo hai image tongmani box rokno hide khlaio.
`horizontalOrder`	`false`	Define khlaio, abo strictly kaisa element no khoroksa khoroksa column o rwjak, aboni ulo tei uáisa swkangni simi swkangni column o swkang wngwi thango, aboni bisingo column kwbángma jaga tongo. Default khe abo jephuru phano column o tongnai.
`spaceBetween`	`4`	Pixels ni bisingtwi manwirokni bisingo tongmani jagano phunuknai.
`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`.

Teibo swkangni chongmungrok

Tei kwbangma swkangni optionsni bagwi, API no naiwi naidi .

Kokborok HTML

Gridzy ni HTML ni kwchakma swnamjakma wngkha omo:

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

Tamokhe, Gridzy belai kheno rangchak tei HTML ni structure no nwng use khlaiwi mano. Kwbangma point no uansukna nangnai:

Konteiner ni khoroksa khoroksa chwrai grid o kaisa manwi no phunukgo.
Konteina manwi tei bini bwsarok jesa phano tag jati wngwi mano, jephru ul tei li (browser ni swkangni manwirokno swlaina bagwi simi uansukdi).
img manwi direct bwsa sak sak wngya khe, aboni bagwi gridzyImage class nangnai.

Hakhe omobo kaisa samung tangnai HTML swnammung:

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

Khairokma khe nwng caption rwna muchung khe HTML ni kwtal structure nangnai. Aboni kokno saimanna bagwi, Captions & Skins .

Kokborok tei Skin

Nwng nini gallery o captions rwna muchung khe, nwng aboni mwkhang no define khwlai na nangnai. Aboni bagwino, kisa kisa swkangni skins wngwi mano. Jesa kheno CSS file tongnai. Nwng o file no Gridzy ni file rok ni slai (kwbangma jorao bokhorok ni jagao) add khwlai na nangnai:

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

Teibo nwng kaisa kotor HTML swnammung nangnai:

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

HTML ni structure no twiwi nwng uansuk tongkhe, Semantic HTML .

Caption ni bagwi nwng jesa phano tag use khlaiwi mano, aboni bisingo gridzyCaption tongmano simi naidi. img manwirokni bagwi gridzyImage wngnai.

Aboni ulo khe nwng gridzySkinClassic ni skin no phunuknai. Tei kaisa use khwlaina bagwi, skin ni mung no omo hai khe swlai di:

Skins rok

	Class tongo
gridzy hakchal kwrwi sakni bwsak swnamna bagwi kaham khe chengmani jaga kwthang nukjakma	`gridzySkinBlank`
gridzySkinClassic kwthang nukjakma	`gridzySkinClassic` `gridzySkinClassicLight`(2.6.0 ni simi KHLAIJAK KHA)
gridzySkinFullOverlay kwthang nukjakma	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(2.6.0 ni simi KHLAIJAK KHA)
gridzySkinLift kwthang nukjakma	`gridzySkinLift` `gridzySkinLiftLight`(2.6.0 ni simi KHLAIJAK KHA)
gridzySkinMagnifier zoom samung tangmani kwrwi kwthang nukjakma	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(2.6.0 ni simi KHLAIJAK KHA)

Aboni ulo joto skin rok no CSS file simi se nangnai, phiya tei kaisa skin rok nobo JavaScript file nangnai:

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

	Class tongo
gridzySkinBlur IE o samung tangya kwthang nukjakma	`gridzySkinBlur` `gridzySkinBlurLight`(2.6.0 ni simi KHLAIJAK KHA)
gridzySkinCard kwthang nukjakma	`gridzySkinCard` `gridzySkinCardLight`(2.6.0 ni simi KHLAIJAK KHA)

Skin ni chongmung

2.6.0 ni simi swnamjak skin no swnamna bagwi Options tongo. Khoroksa swk bwsakni logi logi nwng bwskangni rang, swijak rang tei swijak mwnakno set khlaiwi mano. Nwng CSS ni custom ni manwi rok no use khwlai na nangnai je hai khe nwng o nuknai:

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

Chubachu khlaijaknai swlaimungrok tei swkangni manwirokno naidi khoroksa khoroksani bwsakni bagwi:

gridzySkinClassic

swlaijak	swkangni rang	Kokthum
`--background`	`rgba(0, 0, 0, .7)`	jesa phano CSS bwskangni manwi no rwgo
`--color`	`rgb(255, 255, 255)`	jesa phano CSS rangni rang rwnai
`--text-shadow`	`none`	jesa phano CSS swijak-mwnakjak manwi no rwgo

gridzySkinFullOverlay

swlaijak	swkangni rang	Kokthum
`--background`	`rgba(0, 0, 0, .7)`	jesa phano CSS bwskangni manwi no rwgo
`--color`	`rgb(255, 255, 255)`	jesa phano CSS rangni rang rwnai
`--text-shadow`	`none`	jesa phano CSS swijak-mwnakjak manwi no rwgo

gridzySkinLift

swlaijak	swkangni rang	Kokthum
`--background`	`rgba(0, 0, 0, .7)`	jesa phano CSS bwskangni manwi no rwgo
`--color`	`rgb(255, 255, 255)`	jesa phano CSS rangni rang rwnai
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	jesa phano CSS swijak-mwnakjak manwi no rwgo

gridzySkinMagnifier

swlaijak	swkangni rang	Kokthum
`--background`	`rgba(0, 0, 0, .7)`	jesa phano CSS bwskangni manwi no rwgo
`--color`	`rgb(255, 255, 255)`	jesa phano CSS rangni rang rwnai

O hayungno chubachu khlai ya --text-shadow

gridzySkinBlur

swlaijak	swkangni rang	Kokthum
`--background`	`rgba(0, 0, 0, .7)`	jesa phano CSS bwskangni manwi no rwgo
`--color`	`rgb(255, 255, 255)`	jesa phano CSS rangni rang rwnai
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	jesa phano CSS swijak-mwnakjak manwi no rwgo

gridzySkinCard

swlaijak	swkangni rang	Kokthum
`--background`	`rgba(0, 0, 0, 1)`	jesa phano CSS bwskangni manwi no rwgo
`--color`	`rgb(255, 255, 255)`	jesa phano CSS rangni rang rwnai
`--text-shadow`	`none`	jesa phano CSS swijak-mwnakjak manwi no rwgo

Joto swkangni simi saimanjak skinrok kwchak kuphur swijak koktwmarokno simi se chubachu khlaio. Nwng nini belai kheno sakni tei kwbangma complex skins swnamwi mano. Style gridzy no naiwi naiwi naiwi naidi .

Gridzy ni style

Nini nangmani skin no swkang swkang khe saimanjakya hwnkhe, nwng nini style no swnamwi mano.

Tei kaham khe swkang swkang tongnai skin no copy khaiwi nini nangmani tẃi khe adapt khlaiwi mano. CSS file o kaham khe swnamjaknai tei gridzySkinBlank hai kheno kaham khe swnamjaknai:

/** 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 file ni bisingo gridzyCaption gridzyImage gridzySkinBlank nuknai , . Gridzy sak sak no o class rok no nangya. Bohrok stylingni bagwi simi se use khlaijak tei aboni bagwi nwng muchungkhe bohrokno swkakwi eba mung swlaiwi mano.

Tei abohai kheno nwng CSS ni class gridzyItem nugwi mano . Gridzy o class no sak bai sak bebak direct bwsarokni bagwi setup khlaio. So, nwng o class no nini gallery ni manwi rok no style khwlaiwi mano.

Buj thumdi nangkukmani kokrok

Item ni content rok no jotono rwna nangnai. Element ni size wngwi tongnai hwnwi uansukdi. Pixel ni slai percentage ni mung no use khai di. Tei Gridzy ni autoFontSize chongmungno naiwi naidi, abo font-ni kotorma no manwi box ni kotorma bai chapnai.
Joto manwi ni kaham khe saimanjak ratio tongna nangnai. Item ni aspect ratio wngwi tongnai tei abo grid no rang rwna bagwi nangnai. Hakhe kaisa manwi ni aspect ratio kaham khe saimanjakya hwnkhe, abono manual khe swnamjaknai (e.g. css ni bisingtwi).

Kwbangma jorao, Gridzy initial khlaimani swkang manwirokni style khlainani belai kheno kwrak wngwi mano. Oboni bagwi class gridzy eba gridzy jabascript file no jora jora khe swkak di.

Abo se! Abo no nini sakni skin no swnamna bagwi nangnai. Kwbangma predefined skin rok no aboni slai kwbang use khlai ya.

Tamo khe nwng muchung khe teibo tongwi mano ...

Kwtal Skins

Gridzy gridzyItem ni class no kwbangma use khlaio. Kwbangma khe set wngnai tei styling ni bagwibo use khwlaiwi mano.

Kwplaisa konteina klas

Class ni mung	Sukrubui samani
`gridzy` yak bai set khwlaina bagwi	Gridzy sak bai sak o class bai tongnai manwirokno tubuo tei bohrokno swkangni simi khlaio.
`gridzyAnimated`	`animate` `true` tongkhe abo sak bai sak set wngnai. O class no yak bai set khai khe, `animate` option bo sak bai sak `true` wngnai (abo `false` swkang khe set khai khe ).

Manwi klass

Class ni mung	Sukrubui samani
`gridzyItem`	Item no swkang swkang wngnani swkang set wngnai. Tei kaisa phano remove wngnai ya.
`gridzyItemInitializing`	Item no swkang swkang wngnani swkang set wngnai. Aboni ulo `gridzyItemReady` bai swlaijaknai. Aboni meaning wngkha, rangchakrok kwtal khe rwjak ( `gridzyItemLoading` naidi), phiya rangchakrok nukjakna bagwi tiyar wngwi tongo.
`gridzyItemReady`	`gridzyItemInitializing` swlaiwi rwnai, abo wngkha, abo wngkha. Tei kaisa phano remove wngnai ya. Aboni meaning wngkha, rangchakrok bebak wngwi thangkha ( `gridzyItemComplete` naiwi naidi), phiya manwirok nukjakna bagwi tiyar wngwi thangkha.
`gridzyItemLoading`	Item no swkang swkang wngnani swkang set wngnai. `gridzyItemComplete` bai swlaijaknai, abo wngkha, aboni bisingo tongnai rangchakrok (kwbangma jorao khoroksa simi) wngwi thangmani ulo.
`gridzyItemComplete`	`gridzyItemLoading` swlaiwi rwnai, aboni bisingo tongnai rangchakrok (kwbangma jorao kaisa simi) rangchak wngwi thangma jorao. Tei kaisa phano remove wngnai ya.
`gridzyItemInitialToVisible`	Item puila nukjakna chengma hai kheno set wngnai. Item no kwtal khe nukjak khe no remove khaijaknai.
`gridzyItemVisible`	Item no kwtal khe nukjak khe set wngnai. Item wngwi thangma hai kheno remove wngnai.
`gridzyItemVisibleToHidden`	Item wngwi thangna bagwi set wngnai. Item no kwtal khe hidden khaimani ulo no remove khaijaknai.
`gridzyItemHidden`	Item no kwtal khe hidden khaimani ulo set wngnai. Item nukjakna chengmani ulono remove wngnai.
`gridzyItemHiddenToVisible`	Item nukjakna chengmani ulo’-no set wngnai (puila nukjakmani slai – class `gridzyItemInitialToVisible` no naidi ). Item no kwtal khe nukjak khe no remove khaijaknai.
`gridzyItemVisibleToVisible`	Grid o mungsa swk swlaijakma hai kheno set wngnai, phiya ba abo sak bai sak tongmani tei nukjaknai. Animation swlaijakmani ulono swlaijaknai.

Default khe samung tangmani phunukmung tei nukjaknai tei nukjakya wngnai mwkhangrokni bagwi swnamjak manwirok Gridzy main CSS file bai swkangni simino swnamjak.

O sakani CSS class rok bai nwng nini sakni samung no style khwlaiwi mano. Gridzy ni CSS file no naiwi naiwi naidi, nwng tamo tamo no override khwlai nai abono saimanna bagwi. Kirijakya, jotono kaham khe document khlaijak aro.

Load wngma no kaham khe khlai di

Nwng kwbangma image use khaikhe, Gridzy no grid no teibo rangcha khe swnamna bagwi chubachu khwlaimani kaham wngwi mano.

Jump khaimani mangpilirokno rakdi

Gridzy no grid swngna bagwi joto mangpili ni aswk nangkukgo. O kokrokni bisingtwi khoroksa khoroksa mwkhang tiyar wngwi tongkhe tei khoroksa khoroksa wngwi tongliya hwnkhe, abo jumping elements wngwi thango. Jesa kheno image kwbang tongnai, abo hai kheno annoying wngwi mano o effect.

O tongmungno rakna bagwi, bebak img manwirokni bagwi width tei height simi se set khlai di. Joto khoroksa khoroksani image ni bagwi kaham khe value set khlainani nangnai, abo hai wngyakhe image rok distort wngnai. Kwthar rang wngkha aswk mangpili ni aswk kotorma tei kotorma:

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

Aboni ulo Gridzy rangchakni size no saimannani nangyawi grid no rangchakni rangchakno rangchak khe calculate khlaiwi mano.

Load khaimani

Nugwi mano nukjaknai viewport o tongnai mangpilirokno simi load khlainani bagwi, o steprokno simi khlai di:

Sakao swijakma hai khe width tei height manwirokno tubudi (kaham rangno swnamdi)
Joto src rangchak no data-gridzylazysrc bai swlaiwi rwdi (nwng srcset rangchak rokbo tongkhe, data-gridzylazysrcset no swlai di ).

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

O steps ni ulo viewport ni ganao eba bini bisingo tongma jorao image load wngnai.

Samung phunukma

Process phunukma wngkha, mwkhang load wngwi tongphuru nukjaknai chini swnamjak icon. Caption & skins use khai khe, samung tangmani kok no phunuknai. Abohai wngyakhe nwng kiching kiching swlaimung nangnai:

Joto img manwi no div manwi o ton di
(eba tei mungsa swk manwirokni bisingo – kwbangma saimanna bagwi HTML no naiwi naidi)
Img ni manwi img gridzyImage mangpili no chapdi

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

Aboni ulo nwng process ni kok no nuknai, image rok load wngna bagwi jora nangkhe.

philter

Gridzy ni filter rok belai kheno kwchak kuphur wngwi tongo. Jesa phano filter nangnai, abo belai kheno realise wngnai. Nwng nangmani wngkha, kisa CSS tei kisa HTML form ni manwi ...

Obo kaisa samungni udhahoron:

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

Chwng Step bai Step khe swnam lai anw

1. Puila chwngno Gridzy ni HTML swnammung nangnai tei joto gallery ni manwirokni bagwi class mung set khlaina nangnai aboni ulo chwng abono filter khlaiwi mano .

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

O udhahoron o chwng kaisa class no simi se use khlaio. Tamokhe nwng kaisa manwini bagwi kwbangma class set khlaiwi mano, abo kwbangma filter ni bisingtwi manwi mano hwnkhe.

2. Aboni ulo chwng kiching kiching button add khaio aboni bisingtwi chwng filter rokno swlaiwi mano aboni ulo .

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

Buton ni jagao, nwng tei kubun form ni manwirok jesa khe checkbox, radio ni button, field no chongmani tei abo hairok nobo use khlaiwi mano.

Nwng nukmani hai, button ni value rok wngkha CSS ni rangrok. Chwng wngwi thangma jorao, omohai button o click khaikhe, abo CSS selector bai kwrwngnai pics nukjaknai. Teknik bai khe abo filter chongmung no o rang no simi se set khlaio.

Tei nwng kwbangma kwbangma selectors rokbo use khwlaiwi mano. Udhaharani khe :not(.animals) bo samung tangnai, abo hai kheno .animals.people tei .animals, .people .

3. Poito khe, chwng button no div ni thani tubuo tei abo no gridzy gallery o tonwi, filterControls thani tubuo:

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

Nwng nukma hai, chwng CSS filterControls selector nobo swnamnai. id wngwi tongnai div ni thani abo CSS ni bisingtwi button no chongna bagwi simi se samung khlaio.

Abo se!

Nwng JavaScript ni kokno muchungkhe, API no naiwi naidi .

API

Gridzy ni API tongphano, kwbangma samung no abo kwrwi khe khlaiwi mano, DOM no manipulate khlaiwi simi. Gridzy no nuknai tei grid no swlaiwi rwnai. Tamo khe aro belai kheno phan gwnang APIbo tongo ...

DOM no swlaiwi

Joto swijak manwirokni model (DOM) swlaimungni bagwi chwngno puila twijlangni manwi nangnai:

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

Mwtairok tubudi

Container ni manwi no rwnani swkang nwng kwtal chwrai manwi no kwtal khe swnamnani tei phurwi mannani nangnai. Abo hai wngya khe Gridzy thik khe wngwi mano.

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

Mwtairokno swkakdi

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

Chongmungrokno swlai di

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

DOM no swnamnani kok no nwng MDN ni web docs o nugwi mano . Tei DOM ni Introduction bo tongo.

Manwi API

API no swnamna bagwi, chwngno puila Gridzy ni mung nangnai, abo Gridzy ni manwi bai chapjak:

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

Option manwi

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

Joto chongmung manwi

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

Set khaimani

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

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

Filter swnamdi

Filter swnammani filter jesa phano kaham CSS chongnai wngwi mano:

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

Callback samungrok chapdi

2.4.0 ni simi khwnajak kha
Aboni slai kwtal tei kwtal Events rokno use khaidi. Kwbangma kokni bagwi swkangni section no naidi.

~~Gridzy.js 2 wngkha kok salaimani samungrokni bagwi kiching kiching chongmungrokno chubachu khlaio. Bohrok API ni bisingtwi simi se set khlaiwi mano, phiya kubun options hai kheno:~~

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

	~~Sukrubui samani~~
~~`onBeforeOptionsChanged`~~	~~Callback samung abo swkang swkang ringjak.~~
~~`onOptionsChanged`~~	~~Callback samung abo khairokmarokno swnammani ulo direct khe ringjak.~~
~~`onBeforeRender`~~	~~Callback samung abo swkang swkang ringjak.~~
~~`onRender`~~	~~Rendering khlaimani ulo direct khe ringjaknai callback samung.~~

Samungrokno swnamdi

2.4.0 ni simi

Nwng Gridzy wngmarokno swkangni JavaScript wngma hai kheno swnamwi mano:

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

Kwbangma samungrok Gridzy konteinarni manwirokni sakao rwjak tei kwbangma samungrok konteinerni manwirokni bisingo tongnai khoroksa khoroksani manwirokni sakao rwjak.

Gridzy konteinar manwi sakao wngmarok:

	Sukrubui samani
`gridzyBeforeInit`	Gallery swkangni swkang wngkha.
`gridzyInit`	Gallery swkangni wngmani ulo wngkha.
`gridzyBeforeOptionsChanged`	Option set wngmani swkang wngkha.
`gridzyOptionsChanged`	Option set wngmani ulo wngkha.
`gridzyBeforeRender`	Rendering wngmani swkang wngkha.
`gridzyRender`	Rendering wngmani ulo wngkha.

Nwng o jagao mungsa swk event miss wngwi tongkhe, support sanmung rohor di .

event.target Gridzy ni manwi no rwnai.
event.detail.instance Gridzy samungno rwnai.

Item ni manwirokni sakao wngmarok:

	Sukrubui samani
`gridzyItemBeforeInit`	Item swkangni swkang wngkha.
`gridzyItemInit`	Item swkangni wngmani ulo wngkha.
`gridzyItemLoading`	Item load wngnani chengphuru khe wngwi thango.
`gridzyItemReady`	Grid ni rang rwna bagwi manwi tiyar wngma jorao hór wngnai. Hakhe aspect ratio saimanjak, phiya image tabukbo load wngwi tongwi mano.
`gridzyItemComplete`	Item ni image no load khai khe fire wngnai.

Nwng o jagao mungsa swk event miss wngwi tongkhe, support sanmung rohor di .

event.target wngkha rangchakni manwirokno rwnai.
event.detail.instance Gridzy samungno rwnai.

API – Swngchar gwnangwi

Gridzy ni instance ni slai kwbangma samungrok tongo. So chwng swkang instance mannani nangya.

swkangni chongmung manwi

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

Joto swkangni chongmungrok manwi

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

swkangni chongmungrokno swnamdi

Obo bebak swkangni swkangni Gridzy ni options no set khlai ya, phiya kwtal ni bagwi fundament no define khlaio. Tamokhe, kaisa tongnai instance ni option no null ni bisingtwi reset khlaijak khe, abo kwtal default ni bisingtwi use khlaijaknai.

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

Nwng omono swngchar gwnangwi options set khwlaina bagwi use khwlaiwi mano, DOM wngwi thangmani swkang nwng call khwlaiwi mano. Hakhe nwng option no attribute wngwi set khwlainani nangya.

Automatism

Gridzy.js 2 ni joto automatism rok tongwi tongma jorao, aboni bagwino nwng nwng nwng nwng nwng nwng nwng nwng nwng nwng nwng. Tamo khe Gridzy no teibo swkangni lama bai swnamna bagwi automatism rok no swkakwi mano:

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

O kokrokni bisingo khoroksa khoroksano data-gridzy- samungrok eba setOptions() ni bisingtwi set khlaiwi manliya, logical karonni bagwi:

	swkangni rang	Sukrubui samani
`autoInitOnDomReady`	`true`	Page load wngma jorao `gridzy` tongnai manwirokno nuknai tei bohrokno swkang khlainai. `Gridzy.setDefaultOptions()` swnamwi mano
`autoInitOnDomMutation` Mutation naikolnai	`true`	DOM o nukjakma hai kheno class `gridzy` bai kwtal manwirokno nuknai tei aborokno swkangni simi khlaio. (e.g. page swlaimungno swnammani) `Gridzy.setDefaultOptions()` swnamwi mano
`autoSyncChildListMutation` Mutation naikolnai	`true`	Chwrairok (photo) rwjak eba rwjakya hwnwi saimannai, tei grid no sak bai sak update khlaio. `data-grizy-` ni bisingtwi swnamwi mano-, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	`data-gridzy-` wngwi tongmani abo jotono wngwi tongmani eba wngwi tongmani kokno phunuknai. Obo wngkha `false` tongkhe, abo API ni bisingtwi simi se set khlaiwi mano. `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Mutation naikolnai	`true`	`data-gridzy-` ni swlaimung no nuknai, tei grid no sak bai sak kwtal khlaio. Tei `gridzyAnimated` class swlaijak eba swlaijak tei `style` swlaijakmani koknobo saimannai. `useOptionAttributes` `false` tongkhe, abo `style` swlaijakmani simi se nuknai. `data-grizy-` ni bisingtwi swnamwi mano-, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Mutation naikolnai	`true`	Joto chwrai manwirokni (photo) ni `class` ni swlaimung no nugwi mano. Filter ni kok no twiwi nangkukmani. `data-grizy-` ni bisingtwi swnamwi mano-, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Mutation naikolnai 2.5.0 ni simi	`true`	Joto pic ni `src` ni swlaimung no nuknai. React eba abo hai library bai swnamjak khe nangkukmani. `data-grizy-` ni bisingtwi swnamwi mano-, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Naikolnai no kotor swlai di 2.6.0 ni simi	`true`	Element ni swlaimung no nuknai. Responsa design ni kok no twiwi nangkukmani. (2.6.0 ni swkang window ni kotor kotor khwnanai swnamjak kha) `data-grizy-` ni bisingtwi swnamwi mano-, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Yago yak bai chengdi

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

Instance no sokomor di

Rough khe sajak, Gridzy no swkang swkang khlaimani ulta.

gridzyInstance.destroy();
gridzyInstance = null;

Chwrai list no yak bai sync khai di

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

Chwrai khoroksano yak bai yak bai sync khlai di

Usually nangya, belai kheno rare khe simi.

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

Yago yak bai sync khai di

Norok uansukdi, useOptionAttributes option no true wngna nangnai.

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

phan rwmani

Kwbangma jorao nangya, joto automatism no swkakjak phano

gridzyInstance.render();

Wdrphd plugin

JavaSkript ni bijap nok

Samung

Kwtal 2.x