A rilru a hah lutuk chuan a rilru a buai em em a. Gridzy.Gallery

Website chu automatic in a letling tawh a ni. Thil chiang lo a awm chuan English documentation hi lo en ve teh.

Hman dan bulpui

Gridzy files te chu i server ah upload la, i website ah add rawh (a tlangpuiin head section ah):

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

HTML code (body section hmun dangah pawh):

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

Chu chu a ni ta! Chu chu entirnan fully functional tak a ni. Extra initialization a ngai lo.

Configuration a awm bawk

Gridzy configure dan awlsam ber chu, HTML attribute hmang mai mai hi a ni. Option hmingte chu data-gridzy- hmanga prefix chauh i mamawh a ni. Chuvangin, spaceBetween option set tur chuan attribute data-gridzy-spaceBetween kha add mai tur a ni.

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

Thil thlan tur pawimawh ber berte

	Default Value a ni	Hrilhfiahna
`animate`	`true`	Grid a inthlak hunah (entir nan, browser window size tihdanglam hunah emaw filter set hunah) animation hman tur nge tih a ruat thin.
`layout`	`justified`	Layout hman tur a sawifiah. Gridzy.js 2 hian layout hrang hrang pahnih `justified` leh `waterfall` a support a ni. Anmahni hian option parameter dang an nei vek a, chu chu he table hnuaiah hian i hmu thei ang.
`filter`	`*`	Eng thlalak nge lantir tur tih a ruat. Hetah hian CSS-selector eng pawh hi value atan hman theih a ni. A tlangpuiin `filterControls` hmangin automatic in a set thin (option dang en rawh). Filters tih hi en la
`filterControls`		Eng form element nge images filter nan hman theih ang tih a ruat. CSS selector eng pawh, HTML form elements thlangtu chu hetah hian value atan hman theih a ni. Filters tih hi en la
`autoConsiderScrollBars`	`true`	Scroll bars a lo lang emaw a bo emaw a nih chuan a zau zawng awm zat sawi lawk nan. He automatism hian harsatna a thlen loh chuan `true` -ah dah mai a tha fo.

Justified Layout duhthlan tur

	Default Value a ni	Hrilhfiahna
`autoFontSize`	`false`	Box tin font-size property chu original box size a zirin automatic in a update thin. Default-ah chuan font-size property hi chiang takin a set lo.
`desiredHeight`	`190`	Element row hrang hrangte san zawng duh zat a sawifiah. A san zawng tak tak chu a zau zawng leh row chhunga element awm dan azirin chhut a ni ang.
`hideOnMissingImage`	`true`	Load theih loh images awmna box a thup.
`spaceBetween`	`4`	Element inkar hlat zawng chu pixel-in a sawifiah.
`lastRowAlign` version 2.3.0 atang khan	`justified`	Row hnuhnung ber awm dan tur a sawifiah. Value phalsak chu `left` , `center` , `right` leh `justified` a ni.
`singleRowAlign` version 2.3.0 atang khan	`justified`	Row pakhat chauh a awm chuan behavior a sawifiah. Value phalsak chu `left` , `center` , `right` leh `justified` a ni.
~~`fillLastRow`~~ ~~version 2.1.0 atang khan~~	~~`true`~~	Version 2.4.0 atang khan REMOVED a ni ( Version 2.3.0 atang khan hman tawh loh a ni ) Row hnuhnung ber chu a khat vek theih nan images te chu a dahkhawm thin. Dynamically images append i tum a nih chuan hei hi deactivate a tha thei ang. Row pakhatah nghawng a nei lo ( `fillSingleRow` en rawh ).
`fillSingleRow` version 2.1.0 atang khan	~~`true`~~	Version 2.4.0 atang khan REMOVED a ni ( Version 2.3.0 atang khan hman tawh loh a ni ) ~~Row pakhat chauh a awm chuan row chu a khat vek theih nan images te chu a dah fel vek a ni. Gallery-ah hian image pakhat emaw pahnih emaw chauh i neih theih chuan hei hi deactivate a tha thei ang.~~

Waterfall Layout duhthlan tur

	Default Value a ni	Hrilhfiahna
`autoFontSize`	`false`	Box tin font-size property chu original box size a zirin automatic in a update thin. Default-ah chuan font-size property hi chiang takin a set lo.
`desiredWidth`	`250`	Column zau zawng duh zat a sawifiah. A zau zawng tak tak chu a zau zawng awm leh column awm zat a zirin chhut a ni ang.
`hideOnMissingImage`	`true`	Load theih loh images awmna box a thup.
`horizontalOrder`	`false`	Element te chu veilam atanga dinglam column tinah element pakhat strict takin dah a ni tih a sawifiah a, chutah chuan veilam ber column-ah independent takin eng column-ah nge hmun tam zawk a awm tih a sawifiah leh a ni. Default-ah chuan elements te chu a san zawng tlem ber column-ah dah reng a ni ang.
`spaceBetween`	`4`	Element inkar hlat zawng chu pixel-in a sawifiah.
`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`.

Advanced zawk duhthlan tur

Advanced options duh tan API hi en la.

Semantic HTML a ni

Gridzy HTML structure awlsam ber chu hei hi a ni:

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

Mahse, Gridzy hi a flexible hle a, HTML structure dang zawng zawng deuhthaw i hmang thei. Ngaihtuah tur tlemte chauh a awm:

Container element a child tin hian grid chhunga item pakhat a entir a.
Container element leh a fate pahnih hi tag type eng pawh a ni thei a, ul leh li te pawh a ni thei (browser defaults reset mai tur ngaihtuah mai rawh).
img element chu direct child a nih loh chuan class gridzyImage a mamawh a ni.

Chuvangin hei pawh hi HTML structure hnathawk tak a ni:

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

A bik takin caption i dah duh chuan HTML structure hmasawn tak i mamawh a ni. A chungchang hrechiang duh tan Captions & Skins hi en la.

Captions & Skins te pawh a awm bawk

I gallery-ah caption i dah duh chuan a lan dan tur i define a ngai a ni. Chuvangin, predefined skin thenkhat chu a awm bawk. Skin tin hi CSS file atanga siam a ni. Gridzy file lian ber ber (a tlangpuiin head section-ah) bakah hian he file hi i dah belh a ngai a ni:

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

Chubakah HTML structure hmasawn tak i mamawh bawk:

<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 structure chungchang i ngaihtuah a nih chuan Semantic HTML hi han en teh.

Caption atan chuan tag chi hrang hrang i hmang thei a, class gridzyCaption a neih ngei ngei tur a ni. img element hian class gridzyImage a mamawh a ni.

A chunga entirnan hian vun gridzySkinClassic a rawn tarlang a ni. A dang hman tur chuan vun hming chu heng zinga pakhat hmang hian thlak mai rawh:

Skins pawh a tel

	Class awm thei te
gridzySkinBlank a ni mahni vun siamna atana bul tanna tha tak a ni live preview a ni	`gridzySkinBlank`
gridzySkinClassic live preview a ni	`gridzySkinClassic` `gridzySkinClassicLight`(Version 2.6.0 atang khan DEPRECATED a ni tawh)
gridzySkinFullOverlay live preview a ni	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(Version 2.6.0 atang khan DEPRECATED a ni tawh)
gridzySkinLift live preview a ni	`gridzySkinLift` `gridzySkinLiftLight`(Version 2.6.0 atang khan DEPRECATED a ni tawh)
gridzySkinMagnifier zoom functionality a tel lo live preview a ni	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(Version 2.6.0 atang khan DEPRECATED a ni tawh)

A chunga skin zawng zawng hian CSS file chauh a mamawh a, mahse JavaScript file mamawh bawk skin dang a awm bawk:

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

	Class awm thei te
gridzySkinBlur IE ah a thawk lo live preview a ni	`gridzySkinBlur` `gridzySkinBlurLight`(Version 2.6.0 atang khan DEPRECATED a ni tawh)
gridzySkinCard live preview a ni	`gridzySkinCard` `gridzySkinCardLight`(Version 2.6.0 atang khan DEPRECATED a ni tawh)

Vun duhthlan tur

Version 2.6.0 atang khan built-in skins configure na tur Options a awm. Skin bik a zirin background color, text color leh text shadow te i set thei bawk. Heta i hmuh ang hian CSS custom properties i hmang mai tur a ni:

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

Skin tinte tana supported variable leh default value te chu hetah hian en la:

gridzySkinClassic

A danglam thei	Default Value a ni	Hriattirna
`--background`	`rgba(0, 0, 0, .7)`	CSS background value eng pawh a phalsak
`--color`	`rgb(255, 255, 255)`	CSS color value eng pawh a phalsak
`--text-shadow`	`none`	CSS text-shadow value eng pawh a phalsak

gridzySkinFullOverlay

A danglam thei	Default Value a ni	Hriattirna
`--background`	`rgba(0, 0, 0, .7)`	CSS background value eng pawh a phalsak
`--color`	`rgb(255, 255, 255)`	CSS color value eng pawh a phalsak
`--text-shadow`	`none`	CSS text-shadow value eng pawh a phalsak

gridzySkinLift

A danglam thei	Default Value a ni	Hriattirna
`--background`	`rgba(0, 0, 0, .7)`	CSS background value eng pawh a phalsak
`--color`	`rgb(255, 255, 255)`	CSS color value eng pawh a phalsak
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	CSS text-shadow value eng pawh a phalsak

gridzySkinMagnifier

A danglam thei	Default Value a ni	Hriattirna
`--background`	`rgba(0, 0, 0, .7)`	CSS background value eng pawh a phalsak
`--color`	`rgb(255, 255, 255)`	CSS color value eng pawh a phalsak

He skin hian --text-shadow a support lo

gridzySkinBlur

A danglam thei	Default Value a ni	Hriattirna
`--background`	`rgba(0, 0, 0, .7)`	CSS background value eng pawh a phalsak
`--color`	`rgb(255, 255, 255)`	CSS color value eng pawh a phalsak
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	CSS text-shadow value eng pawh a phalsak

gridzySkinCard

A danglam thei	Default Value a ni	Hriattirna
`--background`	`rgba(0, 0, 0, 1)`	CSS background value eng pawh a phalsak
`--color`	`rgb(255, 255, 255)`	CSS color value eng pawh a phalsak
`--text-shadow`	`none`	CSS text-shadow value eng pawh a phalsak

Predefined skin zawng zawng hian simple text caption chauh an support vek. I duh ang leh complex zawk skin i siam thei. Style Gridzy hi lo en ve teh .

Style Gridzy a ni

I mamawh ang zela vun ruat lawk a awm loh chuan nangmah ngeiin i style thei ang.

A awlsam ber chu vun awmsa copy hmasa la, i mamawh ang zela siamrem hi a ni. Predefined skin gridzySkinBlank hian foundation tha tak a pe tlangpui ang a, chubakah CSS file ah documentation tha tak a pe bawk ang:

/** 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 ah hian class gridzySkinBlank , gridzyImage leh gridzyCaption i hmu ang. Gridzy ngei pawhin heng class te hi a mamawh lo. Styling atan chauh hman an nih avangin i duh chuan i paih thei a, i hming pawh i thlak thei bawk.

Tin, CSS class gridzyItem pawh i hmu bawk ang. Gridzy hian he class hi main container element a direct child zawng zawngah automatic in a set vek a ni. Chuvangin, he class hi i gallery a thil awmte style nan i hmang thei ang.

Rilru Thil Pawimawh

Item chhunga thu awmte chu fully responsive a ni tur a ni. Element size hi a danglam ngei ang tih hi ngaihtuah teh. Pixel value ai chuan percentage value hmang zawk rawh. Tin, Gridzy layout option autoFontSize kha han en teh, chu chuan font-size chu item box size-ah a binding a ni.
Item tin hian aspect ratio mumal tak a nei tur a ni. Item aspect ratio hi a danglam ngai lovang a, grid chhiar nan a mamawh a ni. Chuvangin item pakhatin aspect ratio chiang taka a neih loh chuan manual-in (eg via css) predefine rawh.

A then phei chuan Gridzy hian initialize hmaa items content style a awlsam zawk mai thei. Hei atan hian class gridzy emaw Gridzy javascript file emaw chu rei lo te atan paih mai rawh.

Chu chu a ni ta! Chu chu nangmah ngeiin i vun siam nan i mamawh chauh a ni. Predefined skin tam zawk hian hei aia tam hi an hmang lo.

Mahse i duh chuan a tam zawk a awm thei ...

Advanced Skins tih hi a ni

Gridzy hian gridzyItem chauh ni lovin CSS class a hmang tam zawk. A tam zawk chu automatic in set a ni ang a, styling atan pawh i hmang thei bawk.

Container Class lian ber berte

Class Hming	Hrilhfiahna
`gridzy` manual-a set tur a ni	Gridzy hian he class hmang hian elements chu automatic in a zawng a, a initialize thin.
`gridzyAnimated`	Option `animate` a `true` chuan automatic in a set ang . He class hi manual-a set a nih chuan option `animate` pawh hi automatic in `true` a ni ang (explicit taka `false` -a set a nih loh chuan ).

Item Class hrang hrang te

Class Hming	Hrilhfiahna
`gridzyItem`	Item initializing process a tan veleh set a ni ang. A chhuak ngai lovang.
`gridzyItemInitializing`	Item initializing process a tan veleh set a ni ang. Item chu fully initialized a nih veleh `gridzyItemReady` hmangin a thlak nghal ang. Images chu a load kim tihna a ni lo ( `gridzyItemLoading` en rawh), mahse item chu hmuh theih turin a inpeih tawh tihna a ni.
`gridzyItemReady`	Item chu a initialize kim veleh `gridzyItemInitializing` a thlak nghal ang. A chhuak ngai lovang. Images chu a load kim tihna a ni lo ( `gridzyItemComplete` en rawh), mahse item chu hmuh theih turin a inpeih tawh tihna a ni.
`gridzyItemLoading`	Item initializing process a tan veleh set a ni ang. A chhunga images (a tlangpuiin pakhat chauh) te chu a load kim veleh `gridzyItemComplete` in a thlak ang.
`gridzyItemComplete`	A chhunga images (a tlangpuiin pakhat chauh) te chu a load kim veleh `gridzyItemLoading` a thlak nghal ang. A chhuak ngai lovang.
`gridzyItemInitialToVisible`	Item chu a vawi khatna atana a rawn lang tan veleh set a ni ang. Item chu a hmuh theih kim veleh lakchhuah a ni ang.
`gridzyItemVisible`	Item chu a hmuh theih kim veleh set a ni ang. Item a bo tan veleh lakchhuah nghal a ni ang.
`gridzyItemVisibleToHidden`	Item a bo tan veleh set a ni ang. Item chu a thup kim vek veleh lakchhuah a ni ang.
`gridzyItemHidden`	Item chu a thup vek veleh set a ni ang. Item a rawn lang tan veleh lakchhuah a ni ang.
`gridzyItemHiddenToVisible`	Item a rawn lang tan veleh set a ni ang (a vawi khatna atana a lan tih loh chu – class `gridzyItemInitialToVisible` en rawh ). Item chu a hmuh theih kim veleh lakchhuah a ni ang.
`gridzyItemVisibleToVisible`	Grid-a thil pakhat a inthlak veleh set a ni ang a, mahse item ngei pawh kha a ni a, a lang reng ang. Change animation a zawh veleh remove nghal a ni ang.

Default-ah chuan process indicator leh image lo lang leh bo tur animation te chu Gridzy main CSS file hian a predefine a ni.

Heng a chunga kan sawi tak CSS class te hmang hian i process indicator leh animation te chu i style thei ang. Gridzy main CSS file chu han en ngam la, eng nge i override a ngai dawn tih hriatthiam nan. Hlauhna awm lo, chutah chuan engkim hi document tha tak a ni.

Loading chu optimize rawh

Image tam tak i hman chuan Gridzy-a grid siam chak zawka tanpui hi a tha hle ang.

Jumping Images tih loh nan

Gridzy hian grid chhut nan hian image zawng zawng aspect ratio a mamawh tak zet a ni. Heng thudikte hian thlalak thenkhat chu a inpeih tawh a, thenkhat chu a inpeih lo a nih chuan jumping elements a thlen thin. Image a tam poh leh he effect hi a ti thinrim zual thei.

Hetiang thil hi ven nan img element zawng zawng tan width leh height attribute set mai tur a ni. Image pakhat zel value dik tak set a pawimawh a, chuti lo chuan images te chu a distort ang. Value dik tak chu a image hrang hrangte original width leh height a 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>

Chumi hnuah chuan Gridzy chuan grid chu a chhut nghal thei a, a thlalak te size tak tak hriat a ngai lo.

Lazy Loading a ni

Visible viewport-a awm images chauh load tur chuan heng step te hi zawm mai tur a ni:

A chunga kan sawi tawh ang khan width leh height attribute te dah lut rawh (value dik tak hman ngei ngei tur a ni)
A hnuaia kan hmuh ang hian src attribute zawng zawng chu data-gridzylazysrc hmangin thlak vek rawh ( srcset attribute pawh i neih chuan data-gridzylazysrcset hmangin thlak rawh ).

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

Heng step te hnuah hian images te chu viewport hnaih emaw a chhungah emaw an awm veleh a load nghal ang.

Process Indicator a ni

Process indicator chu image load lai a animated icon te tak te lo lang thin kha a ni. Captions & skins i hman chuan process indicator chu a rawn lang nghal mai ang. Chutiang a nih loh chuan siamthatna engemaw zat i mamawh a ni:

img element tin chu div element ah dah rawh
(or element dang eng pawhah – a tam zawk chu semantic HTML en rawh)
img element tin ah class gridzyImage hi dah la

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

Chumi hnuah chuan images te load nan hun a duh chuan process indicator te i hmu tur a ni.

Filter hrang hrang a awm

Gridzy-a filter te hi a awlsam khawp mai mahse chak tak a ni. Eng ang filter pawh mamawh mahse, a realizable a nih a rinawm hle. I mamawh chu, CSS tlem leh HTML form element tlemte ...

Entirna functional tak chu hetiang hi a ni:

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

Step khat hnu Step khatin I Siam Ang

1. A hmasa berin Gridzy a HTML structure pangngai kan mamawh a, gallery item zawng zawng class hming kan set ang a, chutiang chuan a hnuah kan filter thei ang

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

He entirnan hian element tin tan class pakhat chauh kan hmang a. Mahse element pakhat tan class tam tak i set thei bawk a, chu element chu filter tam tak hmanga hmuh theih a nih chuan.

2. Tichuan button thenkhat kan dah a, chuta tang chuan filter te chu kan thlak thei ang

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

Buttons ai chuan form element dang checkbox, radio button, select field leh a dangte pawh i hmang thei bawk.

Kan hmuh angin buttons value te hi CSS selector pangngai a ni. Kan tih zawh meuh chuan chutiang button chu click chuan chu CSS selector nena inmil images te chu a rawn lang ang. Technically chuan filter option chu he value ah hian a set mai thin.

Selector complex zawk pawh i hmang thei bawk. Entirnan :not(.animals) pawhin hna a thawk ang a, chutiang bawkin .animals.people leh .animals, .people .

3. A tawp berah chuan buttons te hi div container ah kan encapsulate a, Gridzy gallery ah kan bind a, filterControls option kan set a:

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

Kan hmuh angin filterControls option atan CSS selector kan hmang bawk. id attribute nei div container hian chu CSS selector hmanga buttons thlan awlsam zawk nan chauh a thawk a ni.

Chu chu a ni ta!

JavaScript solution i duh chuan API hi en la.

API a ni

Gridzy hian API nei mah se, thil tam zawk chu a tel lovin tih theih a ni a, DOM manipulate mai mai a ni. Gridzy chuan a hrechhuak ang a, grid chu a siamrem ang. Mahse API chak tak a awm bawk ...

DOM chu manipulate a ni

Document Object Model (DOM) manipulations zawng zawng atan hian container element hi kan mamawh hmasa ber a ni:

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

Hmanlai thlalak te dah belh rawh

Container element-a i dah hmain child element thar hi fully build leh fill hmasak a pawimawh. Chutiang a nih loh chuan Gridzy hian dimension dik tak a detect thei lo.

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

Images te chu paih chhuak rawh

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

Options thlak danglam rawh

// 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 manipulate chungchang hi MDN web docs ah hian i hmu thei ang. DOM chungchang Introduction pawh a awm bawk.

API neitu nihna a ni

API hman tur chuan Gridzy instance kan mamawh hmasa a, chu chu Gridzy container element-ah bind a ni:

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

Option hmu rawh

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

Option zawng zawng hmu rawh

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

Options te chu set rawh

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

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

Filter hmangin hnawih rawh

Filter apply hi CSS selector dik tak eng pawh ni thei option filter setting mai a ni:

// 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 Functions te chu add rawh

Version 2.4.0 atang khan DEPRECATED a ni
Chu ai chuan Events tunlai leh flexible zawk hmang zawk rawh. A chipchiar zawkna chu a dawt leh section en rawh.

~~Gridzy.js 2 hian callback function hrang hrang atan option thenkhat a support a. Proprietary API hmang chauhvin set theih a ni a, mahse option dang ang bawkin:~~

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

	~~Hrilhfiahna~~
~~`onBeforeOptionsChanged`~~	~~Callback function chu options setting hmaa direct invoked a ni.~~
~~`onOptionsChanged`~~	~~Callback function chu options setting zawhah direct in a invok thin.~~
~~`onBeforeRender`~~	~~Rendering hmaa direct-a invoked thin callback function.~~
~~`onRender`~~	~~Callback function chu rendering zawhah direct-a invoked a ni.~~

Events hmang rawh

version 2.4.0 atang khan

Gridzy events hi JavaScript event pangngai ang chiah khan i hmang thei ang:

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

Event thenkhat chu Gridzy container element ah fire a ni a, event thenkhat chu container element chhunga item element hrang hrang ah fire a ni bawk.

Gridzy container element-a thil thleng kah chhuah:

	Hrilhfiahna
`gridzyBeforeInit`	Gallery initialization hmain a kang thin.
`gridzyInit`	Gallery initialization hnuah kangmei a chhuak.
`gridzyBeforeOptionsChanged`	Options setting hmain a kang thin.
`gridzyOptionsChanged`	Options setting hnuah a fire thin.
`gridzyBeforeRender`	Render hmain a kang thin.
`gridzyRender`	Rendering hnuah a kang thin.

Hetah hian event i neih loh chuan support request thawn la .

event.target Gridzy container element a pe a.
event.detail.instance Gridzy instance a pe a.

Item elements-a thil thleng (fired) te:

	Hrilhfiahna
`gridzyItemBeforeInit`	Item initialization hmain a kang thin.
`gridzyItemInit`	Item initialization hnuah a kang thin.
`gridzyItemLoading`	Item a load tan chuan a kang thin.
`gridzyItemReady`	Item chu grid calculation atana a inpeih hunah a kang thin. Chuvangin aspect ratio chu hriat a ni a, mahse image chu a la load reng mai thei.
`gridzyItemComplete`	Item image a load kim chuan a fire thin.

Hetah hian event i neih loh chuan support request thawn la .

event.target item element hrang hrang a pe a.
event.detail.instance Gridzy instance a pe a.

API – Khawvel pum huap

Gridzy instance atanga innghat lo function thenkhat a awm bawk. Chuvangin a hmain instance kan neih a ngai lo.

Default Option chu hmu rawh

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

Default Option zawng zawng hmu rawh

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

Default Options te chu set rawh

Hei hian Gridzy instance initialized tawh zawng zawng option a set lo va, instance thar siamna tur basis a tichiang zawk a ni. Mahse, instance awmsa option pakhat chu value null hmanga reset a nih chuan default value thar chu a hmang ang.

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

Hei hi globally options set nan i hmang thei a, DOM a inpeih hmaa i call chuan. Chuvangin options te chu attribute atan i set a ngai tawh lovang.

Automatisms te hi a awm

Gridzy.js 2 a automatism zawng zawng active a nih chhung chuan a hnuaia methods te hi a ngai tawh lo. Mahse automatisms te hi Gridzy hi traditional zawka hman turin switch off theih a ni:

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

Heng option thenkhat hi data-gridzy- attributes hmang emaw setOptions() hmangin emaw set theih a ni lo a, a chhan chu a dik em em a ni:

	Default Value a ni	Hrilhfiahna
`autoInitOnDomReady`	`true`	Page loading-ah class `gridzy` nei elements a detect a, initialize a ni. `Gridzy.setDefaultOptions()` hmanga set theih a ni.
`autoInitOnDomMutation` MutationObserver a ni	`true`	DOM-a element thar a lo lan veleh class `gridzy` hmangin a detect nghal a, a initialize nghal bawk. (eg page transition hman chungchangah) `Gridzy.setDefaultOptions()` hmanga set theih a ni.
`autoSyncChildListMutation` MutationObserver a ni	`true`	Child element (images) te dah belh leh paih loh a hriat theih a, grid chu a update nghal vek bawk. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmanga set theih a ni.
`useOptionAttributes`	`true`	`data-gridzy-` attribute te hi a tlangpuiin hman a nih leh nih loh a sawifiah. Hei hi `false` a nih chuan options chu proprietary API kaltlangin chauh set theih a ni. `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmanga set theih a ni.
`autoSyncAttributesMutation` MutationObserver a ni	`true`	`data-gridzy-` attribute inthlak danglamna a hmuchhuak a, grid chu a update nghal vek bawk. Tin, `gridzyAnimated` class chu add emaw remove emaw a nih leh nih loh leh `style` attribute inthlak danglam a nih leh nih loh a detect bawk. `useOptionAttributes` hi `false` a nih chuan `style` attribute inthlak danglamna chauh a detect thin. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmanga set theih a ni.
`autoSyncChildClassMutation` MutationObserver a ni	`true`	Child element (images) zawng zawng `class` attribute inthlak danglamna a hmuchhuak. Filter chungchangah a inzawm tlat. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmanga set theih a ni.
`autoSyncImageMutation` MutationObserver a ni version 2.5.0 atang khan	`true`	Image zawng zawng `src` attribute inthlak danglamna a hmuchhuak. React emaw a ang chi library emaw nena hman a nih chuan a inzawm tlat. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmanga set theih a ni.
`autoRenderOnResize` ResizeObserver tih a ni version 2.6.0 atang khan	`true`	Element zau zawng inthlak danglamna a hmuchhuak. Responsive design chungchangah a inzawm tlat. (Version 2.6.0 hma khan window resize event listener hman thin a ni) `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmanga set theih a ni.

Manual hmangin initialize rawh

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

Instance chu tichhia rawh

Roughly said, Gridzy initialize nen a kalh zawngin.

gridzyInstance.destroy();
gridzyInstance = null;

Child List chu Manual hmangin Sync rawh

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

Single Child Element chu Manual-in Sync rawh

A tlangpuiin a ngai lo, a tlem hle tih loh chu.

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

Attributes te chu Manual in Sync rawh

Hei atan hian useOptionAttributes option hi a true tur a ni tih hre reng ang che.

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

Force Rendering a ni

A tlangpuiin a ngai lo, automatism zawng zawng off vek pawh nise

gridzyInstance.render();

WordPress Plugin hmanga siam a ni

JavaScript Library ah hian a awm a

Thawhna

Version 2.x a ni