Version 2.x – Gridzy.Gallery

Website cu amah tein leh a si cang. A fiang lomi thil pakhatkhat a um ahcun, Mirang cauk kha zoh.

A hrampi hmannak

Gridzy file pawl kha na server ah upload tuah law na website ah chap (a tlangpi in a lu lei ah):

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

HTML code kha chap (a pum chung hmun paoh ah):

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

Cucu a si! Cucu a tlingmi tahchunhnak a si. A dang thawkternak tuah a hau lo.

Hmanthlak

Gridzy remh khawhnak lam fawi bik cu, HTML sining lawng hman hi a si. Thimnak min pawl kha data-gridzy- lawng in na ttial a hau. Cucaah, spaceBetween thimnak chiah awkah, data-gridzy-spaceBetween timi sining kha chap sawhsawh.

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

Thimnak Bik

	A hramthawk man	Langhtermi
`animate`	`true`	Grid aa thlen tikah (tahchunhnak ah, browser window a ngan le a hme thlen tikah asiloah filter chiah tikah) animation hman ding a si le si lo a khiah.
`layout`	`justified`	A hmanmi suaisamnak kha a fianter. Gridzy.js 2 nih aa dangmi layout pahnih `justified` le `waterfall` a dirpi. Anmah le anmah thimnak parameters an ngei, cu hna cu hi cabuai tang ah na hmuh khawh hna.
`filter`	`*`	Zei hmanthlak dah langhter ding a si ti kha a khiah. Hika ah hin zeibantuk CSS-thimmi paoh kha man ah hman khawh a si. `filterControls` hmangin amah tein a um tawn (a hnu thimnak zoh). Filter pawl kha zoh
`filterControls`		Hmanthlak pawl thleidannak caah zeibantuk form element dah hman khawh a si ti kha a khiah. HTML form thilri a thimmi CSS thimtu paohpaoh cu hika ah man ah hman khawh a si. Filter pawl kha zoh
`autoConsiderScrollBars`	`true`	Scroll bars a langh asiloah a tlau ahcun a ummi kauhnak chimchung awkah. Hi automatism nih buainak a chuahpi lo ahcun `true` ah chiah zungzal ding in ruahnak cheuh a si.

Justified Layout Thimnak

	A hramthawk man	Langhtermi
`autoFontSize`	`false`	A hramthawk bawm ngan le hme cung ah hram bunh in bawm pakhat cio i font-size sining kha amah tein a tharchuah. A hramthawk tein font-size thilri cu fiang tein chiah a si lo.
`desiredHeight`	`190`	Element tlar hna i an duhmi sannak kha a fianter. A sannak taktak cu a ummi kauhnak le tlar chung i a ummi thilri hna cungah aa hngat in tuak a si lai.
`hideOnMissingImage`	`true`	Hman khawh lomi hmanthlak aa telmi bawm pawl kha a thuh hna.
`spaceBetween`	`4`	Pixel in thilri karlak hlatnak kha a fianter.
`lastRowAlign` Version 2.3.0 thawk in	`justified`	A donghnak tlar ziaza kha a fianter. A ngahmi man hna cu `left` , `center` , `right` le `justified` an si.
`singleRowAlign` Version 2.3.0 thawk in	`justified`	Tlang pakhat lawng a um ahcun ziaza kha a fianter. A ngahmi man hna cu `left` , `center` , `right` le `justified` an si.
~~`fillLastRow`~~ ~~Version 2.1.0 thawk in~~	~~`true`~~	Version 2.4.0 in hloh a si cang ( Version 2.3.0 thawk in hloh a si cang) A donghnak tlar cu a khat dih zungzal nakhnga hmanthlak pawl kha a chiah hna. Hmanthlak pawl kha aa thleng lengmangmi in chap na timh ahcun, hi kha phih cu ruahnak tha a si kho. Tlang pakhat lawng ah zeihmanh huham a ngei lo ( `fillSingleRow` zoh).
`fillSingleRow` Version 2.1.0 thawk in	~~`true`~~	Version 2.4.0 in hloh a si cang ( Version 2.3.0 thawk in hloh a si cang) Tlang pakhat lawng a um ahcun, hmanthlak pawl kha tlar cu a tling zungzal nakhnga a chiah hna. Hmanthlak chiahnak ah hmanthlak pakhat asiloah pahnih lawng na ngeih khawh ahcun, hi thil hi phih cu ruahnak tha a si kho.

Waterfall Layout Thimnak

	A hramthawk man	Langhtermi
`autoFontSize`	`false`	A hramthawk bawm ngan le hme cung ah hram bunh in bawm pakhat cio i font-size sining kha amah tein a tharchuah. A hramthawk tein font-size thilri cu fiang tein chiah a si lo.
`desiredWidth`	`250`	Column hna i an duhmi kauhnak kha a fianter. A kauhnak taktak cu a ummi kauhnak le column zat cungah aa hngat in tuak a si lai.
`hideOnMissingImage`	`true`	Hman khawh lomi hmanthlak aa telmi bawm pawl kha a thuh hna.
`horizontalOrder`	`false`	Elements pawl cu kehlei in orhlei ah column pakhat cio ah element pakhat cio chiah an si ti kha a fianter, cun zei column dah a tam deuh timi aa hngat lomi kehlei bik column ah aa thawk ṭhan. A hramthawk tein thilri pawl cu a hme bik a sangmi column ah chiah an si zungzal lai.
`spaceBetween`	`4`	Pixel in thilri karlak hlatnak kha a fianter.
`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`.

A sang deuhmi thimnak

A sang deuhmi thimnak caah, API kha zoh.

Semantic HTML

Gridzy i a sawhsawh bikmi HTML sining cu hihi a si:

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

Sihmanhsehlaw, Gridzy cu a nem tuk i a dang HTML sining vialte na hman khawh. Ruah awk a simi thil tlawmpal lawng a um:

Container element fa pakhat cio nih grid chung i thil pakhat cio a aiawh.
Container element le a fale hna cu ul le li tibantuk tag phun paoh an si kho (browser default pawl kha thlen tthan ding lawng ruat).
img element cu amah tein direct fa a si lo ahcun, gridzyImage phun a herh.

Cucaah hi zong hi rian a ttuanmi HTML dirhmun a si:

<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 hlei in caption na chap duh ahcun, a sangmi HTML sining na herh. Mah kong tam deuh in hngalh na duh ahcun, Captions & Skins kha zoh.

Caption & Skins

Na hmanthlak chiahnak ah caption na chap duh ahcun, a muisam kha na fianter a hau. Cucaah, a hlankan in khiahmi vun cheukhat cu hmuh khawh a si. CSS file aa telmi vun pakhat cio. Hi file hi Gridzy file ngan deuh (a tlangpi in lu tthen ah) lengah na chap a hau:

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

Cun a sangmi HTML sining na herh:

<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 sining kong na ruah ahcun, Semantic HTML kha zoh.

Caption caah zeibantuk tag hmanh na hman khawh, gridzyCaption timi phun a ngeih kha i cinken. img element nih gridzyImage phun a herh.

A cunglei tahchunhnak nih vun gridzySkinClassic a langhter. A dang pakhat hman awk ah, vun min kha hi hna lakah pakhatkhat in thlen:

Aa telmi Vun

	A ummi Cawnnak
gridzySkinBlank mah vun sernak caah hramthawknak tha live zoh hmasa	`gridzySkinBlank`
gridzySkinClassic live zoh hmasa	`gridzySkinClassic` `gridzySkinClassicLight`(Version 2.6.0 thawk in hman ti lo)
gridzySkinFullOverlay live zoh hmasa	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(Version 2.6.0 thawk in hman ti lo)
gridzySkinLift live zoh hmasa	`gridzySkinLift` `gridzySkinLiftLight`(Version 2.6.0 thawk in hman ti lo)
gridzySkinMagnifier zoom riantuannak aa tel lo live zoh hmasa	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(Version 2.6.0 thawk in hman ti lo)

A cunglei vun vialte nih CSS file lawng an herh, asinain JavaScript file zong a herhmi vun dang an um rih:

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

	A ummi Cawnnak
gridzySkinBlur IE ah rian a ttuan lo live zoh hmasa	`gridzySkinBlur` `gridzySkinBlurLight`(Version 2.6.0 thawk in hman ti lo)
gridzySkinCard live zoh hmasa	`gridzySkinCard` `gridzySkinCardLight`(Version 2.6.0 thawk in hman ti lo)

Vun thimnak

Version 2.6.0 thawk in a chung i a ummi vun pawl remh khawhnak ding caah thimnak a um. A bik in vun cung ah aa hngat in hnulei rong, cafang rong le cafang thlalang kha na chiah khawh. Hika ah na hmuh khawh bantukin CSS thilri hna kha na hman a hau:

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

Hika ah vun pakhat cio caah a dirkamhmi thilri le a hmanmi man pawl kha zoh hna:

gridzySkinClassic

Aa thleng khomi	A hramthawk man	Thawngpang
`--background`	`rgba(0, 0, 0, .7)`	CSS hnulei man paoh a onh
`--color`	`rgb(255, 255, 255)`	CSS rong man paoh a onh
`--text-shadow`	`none`	CSS cafang-hmuhsaknak man paoh a onh

gridzySkinFullOverlay

Aa thleng khomi	A hramthawk man	Thawngpang
`--background`	`rgba(0, 0, 0, .7)`	CSS hnulei man paoh a onh
`--color`	`rgb(255, 255, 255)`	CSS rong man paoh a onh
`--text-shadow`	`none`	CSS cafang-hmuhsaknak man paoh a onh

gridzySkinLift

Aa thleng khomi	A hramthawk man	Thawngpang
`--background`	`rgba(0, 0, 0, .7)`	CSS hnulei man paoh a onh
`--color`	`rgb(255, 255, 255)`	CSS rong man paoh a onh
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	CSS cafang-hmuhsaknak man paoh a onh

gridzySkinMagnifier

Aa thleng khomi	A hramthawk man	Thawngpang
`--background`	`rgba(0, 0, 0, .7)`	CSS hnulei man paoh a onh
`--color`	`rgb(255, 255, 255)`	CSS rong man paoh a onh

Hi vun nih hin --text-shadow a dirpi lo

gridzySkinBlur

Aa thleng khomi	A hramthawk man	Thawngpang
`--background`	`rgba(0, 0, 0, .7)`	CSS hnulei man paoh a onh
`--color`	`rgb(255, 255, 255)`	CSS rong man paoh a onh
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	CSS cafang-hmuhsaknak man paoh a onh

gridzySkinCard

Aa thleng khomi	A hramthawk man	Thawngpang
`--background`	`rgba(0, 0, 0, 1)`	CSS hnulei man paoh a onh
`--color`	`rgb(255, 255, 255)`	CSS rong man paoh a onh
`--text-shadow`	`none`	CSS cafang-hmuhsaknak man paoh a onh

A hlankan in khiahmi vun vialte nih cafang sawhsawh lawng an dirpi. Nangmah tein le a har deuhmi vun na ser khawh. Style Gridzy kha zoh hmanh.

Style Gridzy

Na herhmi he aa tlakmi a hlankan in khiahmi vun a um lo ahcun, nangmah tein vun na suai khawh.

A fawi bikmi lam cu a um cangmi vun kha copy hmasa law na herh ning in remh kha a si. A hlankan in khiahmi vun gridzySkinBlank a tlangpi in CSS file chung i hrampi ttha le cazin ttha a pek tawn:

/** 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 chungah gridzySkinBlank , gridzyImage le gridzyCaption timi phun pawl na hmuh hna lai. Gridzy hrimhrim nih hi cawnnak pawl hi a herh lo. Style tuahnak caah lawng hmanmi an si caah na duh ahcun na hloh khawh hna asiloah min na thlen khawh hna.

Cun CSS phun gridzyItem zong na hmuh lai. Gridzy nih hi class cu a tlangpi in container element i direct fale vialte ah amah tein a chiah. Cucaah, na hmanthlak chiahnak thilri pawl kha style tuahnak caah hi class hi na hman khawh.

Lungthin A Biapimi Thil

Thilri chung thilri cu a tlingmi a si awk a si. Element size cu aa thleng hrimhrim lai ti kha ruat. Pixel man si loin zatuak man kha hmang. Cun Gridzy layout thimnak autoFontSize kha zoh, mah nih cun font-size kha item box size ah a peh.
Thil pakhat cio nih a ttha tein a fiantermi aspect ratio an ngeih awk a si. Thilri a muisam aa thleng bal lai lo i grid tuaktannak caah a herh. Cucaah thil pakhatkhat nih amah tein a ttha tein a fiantermi aspect ratio a ngeih lo ahcun, kut in fianternak tuah hmasa (tahchunhnak ah css hmangin).

Cheukhat ahcun, Gridzy nih a thawk hlanah thilri pawl a chunglei kha style tuah a fawi deuh men lai. Mah caah cun class gridzy asiloah Gridzy javascript file kha caan tawite chung hloh sawhsawh.

Cucu a si! Cu lawng cu nangmah vun sernak caah na herhmi a si. A hlankan in khiahmi vun tam deuh nih cun hi nak tam an hmang lo.

Asinain na duh ahcun a dang zong an um kho men ...

A sangmi vun

Gridzy nih gridzyItem lawng nakin CSS phun tam deuh a hman. A tam deuh cu amah tein an i set lai i style tuahnak caah zong na hman khawh hna.

Main Container Classes

Cawnnak Min	Langhtermi
`gridzy` kut in chiah	Gridzy nih hi phun he aa pehtlaimi thilri pawl kha amah tein a kawl hna i a thawk hna.
`gridzyAnimated`	`animate` timi thimnak cu a `true` ahcun amah tein a um lai. Hi class hi kut in chiah a si ahcun, `animate` timi thimnak zong amah tein a `true` ve lai ( `false` tiah fiang tein chiah a si lo ahcun).

Thilri phun

Cawnnak Min	Langhtermi
`gridzyItem`	Thilri nih hramthawknak rian a thawk cangka in chiah a si lai. Zeitikhmanh ah hloh a si lai lo.
`gridzyItemInitializing`	Thilri nih hramthawknak rian a thawk cangka in chiah a si lai. Thilri cu a tling tein aa thawk cangka in `gridzyItemReady` nih a thlen lai. Hmanthlak pawl cu a tlingmi an si tinak a si lo ( `gridzyItemLoading` zoh), asinain thilri cu hmuh khawh dingin timhcia a si cang tinak a si.
`gridzyItemReady`	Thilri cu a tling tein aa thawk cangka in `gridzyItemInitializing` a thlen lai. Zeitikhmanh ah hloh a si lai lo. Hmanthlak pawl cu a tlingmi an si tinak a si lo ( `gridzyItemComplete` zoh), asinain thilri cu hmuh khawh dingin timhcia a si cang tinak a si.
`gridzyItemLoading`	Thilri nih hramthawknak rian a thawk cangka in chiah a si lai. A chung hmanthlak (a tlangpi in pakhat lawng) a tling dih tik ah `gridzyItemComplete` nih a thlen lai.
`gridzyItemComplete`	A chung hmanthlak (a tlangpi in pakhat lawng) a tling dih tik ah `gridzyItemLoading` a thlen lai. Zeitikhmanh ah hloh a si lai lo.
`gridzyItemInitialToVisible`	Thilri cu a voikhatnak a langh hram aa thawk cangka in chiah a si lai. Thilri cu a tling tein a lang tik paoh ah hloh a si lai.
`gridzyItemVisible`	Thilri cu a tling tein a lang tik paoh ah chiah a si lai. Thilri a tlau hram aa thawk cangka in hloh a si lai.
`gridzyItemVisibleToHidden`	Thilri a tlau hram aa thawk cangka in chiah a si lai. Thilri cu a thuh dih tik paoh ah hloh a si lai.
`gridzyItemHidden`	Thilri cu a thuh dih cangka in chiah a si lai. Thilri a langh hram aa thawk cangka in hloh a si lai.
`gridzyItemHiddenToVisible`	Thilri a langh hram aa thawk cangka in chiah a si lai (a voikhatnak a langh ti lo ahcun – `gridzyItemInitialToVisible` timi phun zoh). Thilri cu a tling tein a lang tik paoh ah hloh a si lai.
`gridzyItemVisibleToVisible`	Grid chung i thil pakhatkhat aa thleng tik paoh ah chiah a si lai, asinain thilri cu amah tein a um i a lang peng lai. Thlennak animation a dih cangka in hloh a si lai.

A hramthawk tein a langmi le a tlaumi hmanthlak hna caah a kalning langhtertu le a cawlcangmi hna cu Gridzy main CSS file nih a hlankan in a khiah.

A cunglei langhtermi CSS phun hna he cun nangmah tein na kalning langhtertu le hmanthlak pawl kha na suai khawh. Zeidah na thlen a hau lai ti hngalhthiam awkah Gridzy main CSS file kha zoh ngam. Ṭih hlah, cuka ahcun zeizong vialte kha ṭha tein ṭial dih a si.

Loading kha ttha tein ser

Hmanthlak tampi na hman ahcun, Gridzy kha rang deuh in grid sernak ah bawmh cu ruahnak tha a si kho.

Hmanthlak a zuangmi kha kham

Gridzy nih grid tuak khawhnak dingah hmanthlak vialte i an muisam tlukruannak kha a herh hrimhrim. Hi thil hna nih hin hmanthlak cheukhat cu an i timh cia i a dang cu an i timh rih lo ahcun a zuangmi thilri hna a chuahter. Hmanthlak a tam deuhdeuh ah, hi thil nih hin a lung a fahter deuhdeuh.

Hi bantuk ziaza hrial khawhnak ding caah, img thilri vialte caah width le height sining kha chiah ko. Hmanthlak pakhat cio caah a dikmi man chiah a biapi, cu lo ahcun hmanthlak pawl cu an i thlen sual lai. A dikmi man cu hmanthlak pakhat cio i a hramthawk kauhnak le sannak kha a si:

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

Cu hnu ah Gridzy nih hmanthlak hna i an ngan le hme hngalh hau loin grid kha a tuak colh khawh.

Lazy Loading

Hmuh khawhmi zohnak ah a ummi hmanthlak lawng luhter awkah, a tanglei lamhruainak hna hi zulh:

A cunglei langhtermi bantuk in width le height sining hna kha khumh (a dikmi man kha hman hrimhrim)
A tanglei langhtermi bantuk in src sining vialte kha data-gridzylazysrc in thlen ( srcset sining zong na ngeih ahcun, data-gridzylazysrcset in thlen).

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

Hi step pawl hnu ah hmanthlak pawl cu viewport pawng ah asiloah chung ah an um cangka in an load lai.

Riantuan ning langhtertu

Thil sining langhtertu cu hmanthlak a luh lio ah a langmi a hmete a nungmi hmelchunhnak a si. Caption & skins na hman ahcun, tuahsernak hmelchunhnak cu amah tein a lang lai. Cu lo ahcun thlennak cheukhat na herh:

img element pakhat cio kha div element ah chiah
(asiloah a dang thilri pakhatkhat ah – tam deuh caah semantic HTML zoh)
img element pakhat cio ah gridzyImage phun kha chap

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

Cu hnu ah hmanthlak pawl nih caan an lak ahcun kalning langhtertu pawl kha na hmuh awk a si.

Filter pawl

Gridzy chung i filter pawl cu a sawhsawh ngai nain a thawng. Zeibantuk filter na herh zongah, a si kho men. Na herhmi cu, CSS tlawmpal le HTML phun tlawmpal lawng a si …

Hihi riantuannak tahchunhnak a si:

<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 in Sak Usih

1. Pakhatnak ah Gridzy i a hlan bantuk HTML sining kan herh i gallery thilri vialte caah class min kan chiah a hau i cuticun a hnu ah kan thleidan khawh hna lai

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

Hi tahchunhnak ah hin element pakhat cio caah class pakhat lawng kan hman. Asinain thil pakhat caah phun tampi zong na chiah khawh, cu thil cu filter tampi in hmuh khawh a si ahcun.

2. Cun filter pawl kan thlen khawhnak ding caah button cheukhat kan chap

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

Button hna ai ah, checkbox, radio button, thimmi field le a dangdang hna bantuk form thilri dang zong na hman khawh.

Na hmuh khawh bantukin, button pawl man cu a tlangpi in CSS thimtu an si. Kan dih cangka in, cu bantuk hmehnak hmehnak nih CSS thimtu he aa tlakmi hmanthlak pawl kha a langhter lai. A taktak ahcun filter thimnak kha hi man ah a chiah sawhsawh.

A har deuhmi thimnak zong na hman khawh. Tahchunhnak ah :not(.animals) zong nih a ttha ve lai, cu bantuk cun .animals.people le .animals, .people .

3. A donghnak ah, div container chungah button pawl kha kan khumh hna i Gridzy gallery ah kan hren hna, filterControls thimnak kha chiah in:

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

Na hmuh khawh bantukin, filterControls thimnak caah CSS thimnak zong kan hman. id sining he div container nih cun CSS thimtu hmangin hmetnak pawl kha thim a fawiter deuh.

Cucu a si!

JavaScript a phichuak na duh deuh ahcun, API kha zoh.

API

Gridzy nih amah tein API a ngei ko nain, thil tam deuh cu mah loin tuah khawh a si, DOM kha thlen sawhsawh in. Gridzy nih a hmuh lai i grid kha a remh lai. Asinain a tthawng tukmi API zong a um ...

DOM thlennak

Document Object Model (DOM) thlennak vialte caah container element kan herh hmasa:

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

Hmanthlak chap

Container element ah na chap hlanah ngakchia element thar kha tling tein ser le khahter a biapi. Cu lo ahcun Gridzy nih a dikmi tahfung kha a hmu kho lai 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);

Hmanthlak pawl hloh

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

Thimnak thlen

// 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 thlennak kong tam deuh cu MDN web docs ah na hmuh khawh. DOM kong hngalhternak zong a um.

Ngeihmi API

API hman awkah, Gridzy instance kan herh hmasa, cucu Gridzy container element he aa pehtlaimi a si:

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

Thimnak Hmuh

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

Thimnak vialte hmuh

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

Thimnak Chiah

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

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

Filter hman

Filter hman cu a hmanmi CSS thimtu a si khomi thimnak filter chiah sawhsawh a si:

// 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 Riantuannak pawl chap

Version 2.4.0 hnu in hman ti lo
Cu nakin chanthar le a fawi deuhmi puai kha hmang. A tawinak caah a hnu ṭhen kha zoh.

~~Gridzy.js 2 nih callback riantuannak caah thimnak cheukhat a bawmh. Annih cu anmah ta a simi API hmang lawngin chiah khawh an si, asinain thimnak dang bantuk tein:~~

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

	~~Langhtermi~~
~~`onBeforeOptionsChanged`~~	~~Thimnak chiah hlan ah direct in auhmi callback riantuannak.~~
~~`onOptionsChanged`~~	~~Thimnak chiah hnu ah direct in auhmi callback riantuannak.~~
~~`onBeforeRender`~~	~~Rendering tuah hlan ah direct in auhmi callback riantuannak.~~
~~`onRender`~~	~~Rendering tuah hnu ah direct in auhmi callback riantuannak.~~

Thil cangmi hman

Version 2.4.0 thawk in

Gridzy thil cangmi hna cu a hlan JavaScript thil cangmi hna bantuk tein na hman khawh:

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

Thil cangmi cheukhat cu Gridzy container element ah an kah i a dang thil cangmi cu container element chung i thilri pakhat cio ah an kah.

Gridzy container element ah a chuakmi thil cangmi hna:

	Langhtermi
`gridzyBeforeInit`	Gallery thawk hlan ah a kang.
`gridzyInit`	Gallery thawk hnu ah a kang.
`gridzyBeforeOptionsChanged`	Thimnak chiah hlanah a kang.
`gridzyOptionsChanged`	Thimnak chiah hnu ah a kang.
`gridzyBeforeRender`	Render tuah hlanah a kang.
`gridzyRender`	Render tuah hnu ah a kang.

Hika ah puai pakhatkhat na philh ahcun, bawmhnak halnak kuat.

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

Thilri thilri cung ah a cangmi thil:

	Langhtermi
`gridzyItemBeforeInit`	Thilri thawk hlan ah a kang.
`gridzyItemInit`	Thilri thawk hnu ah a kang.
`gridzyItemLoading`	Thilri cu a luh hram aa thawk tikah a kang.
`gridzyItemReady`	Thilri cu grid tuaktannak caah timhcia a si tikah a kang. Cucaah a muisam tlukruannak cu theih a si, asinain hmanthlak cu a ttha rih ko lai.
`gridzyItemComplete`	Thilri hmanthlak cu a tling dih tikah a kang.

Hika ah puai pakhatkhat na philh ahcun, bawmhnak halnak kuat.

event.target aa pehtlaimi thilri a pek.
event.detail.instance Gridzy instance a pek.

API – Vawleicung pumpi

Gridzy instances he aa pehtlaimi riantuannak cheukhat an um. Cucaah a hlan ah tahchunhnak kan hmuh a hau lo.

A hlankan in thimnak hmuh

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

A hlankan in thimnak vialte hmuh

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

A hlankan in thimnak pawl kha chiah

Mah nih hin a hramthawk cangmi Gridzy instance vialte thimnak kha a chiah lo, asinain instance thar caah hrampi kha a fianter. Sihmanhsehlaw, a um cangmi instance pakhatkhat i thimnak pakhatkhat kha man null hmangin thlen a si ahcun, a thar in a ummi man kha a hman lai.

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

DOM a tling hlan ah na auh ahcun, vawleicung pumpi ah thimnak chiahnak caah na hman khawh. Cucaah thimnak kha sining ah chiah a hau ti lai lo.

Automatisms

Gridzy.js 2 i automatism vialte an cawlcangh chung paoh cu, a tanglei lam hna hi a herh lo. Asinain Gridzy kha phungning deuh in hman khawhnak ding caah automatism pawl cu phih khawh an si:

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

Hi thimnak cheukhat cu data-gridzy- sining asiloah setOptions() hmangin chiah khawh a si lo, a ruang a ruang a um:

	A hramthawk man	Langhtermi
`autoInitOnDomReady`	`true`	Cahmai luhternak ah class `gridzy` he a ummi thilri pawl kha a hmuh hna i a thawk hna. `Gridzy.setDefaultOptions()` hmangin chiah khawh a si
`autoInitOnDomMutation` MutationObserver	`true`	DOM ah an langh cangka in class `gridzy` he thil thar pawl kha a hmuh hna i a thawk colh hna. (tahchunhnak ah cahmai thlennak hmannak kong) `Gridzy.setDefaultOptions()` hmangin chiah khawh a si
`autoSyncChildListMutation` MutationObserver	`true`	Ngakchia thilri (hmanthlak) an chap le hloh a si le si lo a hngalh, cun grid kha amah tein a tharchuah. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmangin chiah khawh a si
`useOptionAttributes`	`true`	`data-gridzy-` sining hna cu a tlangpi in hman a si le si lo a fianter. Mah cu `false` ahcun thimnak cu a ngeitu API hmang lawngin chiah khawh a si. `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmangin chiah khawh a si
`autoSyncAttributesMutation` MutationObserver	`true`	`data-gridzy-` sining thlennak a hmuh, cun grid kha amah tein a tharchuah. Cun `gridzyAnimated` phun cu chap a si maw hloh a si le si lo le `style` sining thlennak a um maw ti zong a hmuh. `useOptionAttributes` cu `false` ahcun, `style` sining thlennak lawng a hmuh. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmangin chiah khawh a si
`autoSyncChildClassMutation` MutationObserver	`true`	Ngakchia thilri (hmanthlak) vialte i `class` thlennak kha a hmuh. Filter he pehtlai in aa pehtlaimi. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmangin chiah khawh a si
`autoSyncImageMutation` MutationObserver Version 2.5.0 thawk in	`true`	Hmanthlak vialte i `src` sining thlennak kha a hmuh. React asiloah aa lo ngaimi cauk chiahnak he hman tikah aa pehtlaimi. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmangin chiah khawh a si
`autoRenderOnResize` ResizeObserver version 2.6.0 thawk in	`true`	Element kauhnak thlennak a hmuh. A lehrulh khomi suaisamnak he aa pehtlaimi. (Version 2.6.0 hlan ahcun window thlennak thil cangmi ngaitu hman a si) `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` hmangin chiah khawh a si

Kut in thawk

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

Instance kha hrawh

A tlangpi in chim ahcun, Gridzy thawknak he aa ralchanhmi a si.

gridzyInstance.destroy();
gridzyInstance = null;

Ngakchia cazin kha kut in i fonh

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

Ngakchia Element pakhat kha kut in i fonh

A tlangpi in a herh lo, a tlawm tukmi thil sining ti lo ahcun.

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

Attributes kha kut in i fonh

Hi caah useOptionAttributes thimnak cu a true a hau ti kha philh hlah.

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

Hramhram in langhternak

A tlangpi in a herh lo, automatism vialte an phih dih hmanh ah

gridzyInstance.render();

WordPress Plugin

JavaScript Library

Riantuanpiaknak