ဝႅပ်ႇယၢင်ႇ 2.x

ဝႅပ်ႉသၢႆႉၼႆႉ လႆႈပိၼ်ႇၽႃႇသႃႇဝႆႉ ႁင်းမၼ်းယဝ်ႉ။ သင်ဝႃႈ ဢမ်ႇၸႅင်ႈလႅင်းၼႆ ႁႂ်ႈတူၺ်း ၽိုၼ်လိၵ်ႈ ဢိင်းၵလဵတ်ႈ သေၵမ်း။

ပိုၼ်ႉထၢၼ်လွင်ႈၸႂ်ႉတိုဝ်း

ဢဝ်ၾၢႆႇ Gridzy ၸိူဝ်းၼၼ်ႉ သႂ်ႇၼႂ်း Server ၸဝ်ႈၵဝ်ႇသေ ဢဝ်သႂ်ႇၼႂ်းဝႅပ်ႉသၢႆႉၸဝ်ႈၵဝ်ႇ (ၵမ်ႈၼမ် တီႈၼႂ်းတွၼ်ႈႁူဝ်ၶေႃႈ) ၼၼ်ႉတႃႉ။

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

ထႅမ်သႂ်ႇ HTML code (တီႈလႂ်သေဢမ်ႇဝႃႈ ၼႂ်းတွၼ်ႈတူဝ်ၶိင်း) :

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

ၼၼ်ႉယဝ်ႉ! ဢၼ်ၼႆႉ ပဵၼ်တူဝ်ယၢင်ႇ ဢၼ်ႁဵတ်းၵၢၼ်လႆႈ တဵမ်ထူၼ်ႈ။ ဢမ်ႇလူဝ်ႇ ႁဵတ်း Initial ထႅင်ႈ။

လွင်ႈၶပ်ႉၶိုင်

လၢႆးႁဵတ်း Gridzy ဢၼ်ငၢႆႈသေပိူၼ်ႈတႄႉ တေလႆႈၸႂ်ႉတိုဝ်း HTML Attributes ၵူၺ်း။ လူဝ်ႇလႆႈဢဝ် data-gridzy- မႃးတၢင်ႇပၼ် ၸိုဝ်ႈဢၼ်လိူၵ်ႈဝႆႉၼၼ်ႉၵွႆး။ ယွၼ်ႉၼၼ် တႃႇတေတင်ႈ တီႈလိူၵ်ႈ spaceBetween ၼၼ်ႉ ဢဝ်ၶေႃႈမုၼ်း ဢၼ်ပဵၼ် data-gridzy-spaceBetween ၼၼ်ႉ သႂ်ႇပၼ်ၵွႆး။

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

လွၵ်းလၢႆးပိူင်လူင်

	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၸႅင်ႈၼႄ
`animate`	`true`	တႅပ်းတတ်းဝႃႈ မိူဝ်ႈၵရိတ်ႉ လႅၵ်ႈလၢႆႈၼၼ်ႉ တေလႆႈၸႂ်ႉတိုဝ်း ၶႅပ်းႁၢင်ႈ ဢၼ်တူင်ႉၼိုင်ၼၼ်ႉႁိုဝ် (တူဝ်ယၢင်ႇ မိူဝ်ႈလႅၵ်ႈလၢႆႈ တၢင်းယႂ်ႇ ၽၵ်းတူ ၶိူင်ႈတူၺ်းလိၵ်ႈ ဢမ်ႇၼၼ် မိူဝ်ႈတင်ႈ ၶိူင်ႈထတ်း)။
`layout`	`justified`	မၵ်းမၼ်ႈပၼ် လွၵ်းလၢႆးၸႂ်ႉတိုဝ်း။ Gridzy.js 2 ၼႆႉ မၼ်းၵမ်ႉထႅမ်ပၼ် လွၵ်းလၢႆး ဢၼ်ဢမ်ႇမိူၼ်ၵၼ် သွင်ဢၼ် ဢၼ်ပဵၼ် `justified` လႄႈ `waterfall` ၼၼ်ႉယဝ်ႉ။ ဢၼ်လႂ်ဢၼ်ၼၼ်ႉ မၼ်းမီးဝႆႉ ပရႃႇမီႇတႃႇ ဢၼ်တေလႆႈလိူၵ်ႈထႅင်ႈ ဢၼ်ၸဝ်ႈၵဝ်ႇ တေလႆႈႁၼ် တီႈတႂ်ႈ လွၵ်းၼႆႉယူႇ။
`filter`	`*`	တႅပ်းတတ်းဝႃႈ တေလႆႈၼႄၶႅပ်းႁၢင်ႈဢၼ်လႂ်။ တီႈၼႆႈ ၸႂ်ႉတိုဝ်းလႆႈ CSS-selector ဢၼ်လႂ်သေဢမ်ႇဝႃႈ ႁႂ်ႈပဵၼ် ၵႃႈၶၼ်။ ၵမ်ႈၼမ် မၼ်းတေတင်ႈပၼ် လူၺ်ႈ `filterControls` ႁင်းမၼ်း (တူၺ်းတီႈ တၢင်းလိူၵ်ႈထႅင်ႈ)။ တူၺ်းတီႈ Filters
`filterControls`		တႅပ်းတတ်းဝႃႈ တေၸႂ်ႉတိုဝ်းလႆႈ ၶူဝ်းၶွင် ဢၼ်လႂ် တႃႇထတ်းတူၺ်း ၶႅပ်းႁၢင်ႈၸိူဝ်းၼၼ်ႉ။ ၶိူင်ႈလိူၵ်ႈ CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ ဢၼ်လိူၵ်ႈဢဝ် ၶူဝ်းၶွင် HTML form ၼၼ်ႉ ၸႂ်ႉတိုဝ်းလႆႈ မိူၼ်ၼင်ႇ ၵႃႈၶၼ်တီႈၼႆႈ။ တူၺ်းတီႈ Filters
`autoConsiderScrollBars`	`true`	တႃႇတေလၢမ်းၶၢတ်ႈ တၢင်းၵႂၢင်ႈဢၼ်မီးဝႆႉ သင်ဝႃႈ scroll bars ဢွၵ်ႇမႃး ဢမ်ႇၼၼ် ႁၢႆၵႂႃႇ။ သင်ဝႃႈ လွင်ႈႁဵတ်းၵၢၼ်ႁင်းမၼ်းၼႆႉ ဢမ်ႇႁဵတ်းႁႂ်ႈမီးပၼ်ႁႃၼႆ ထုၵ်ႇလီဝႆႉမၼ်းတီႈ `true` တႃႇသေႇယဝ်ႉ။

Justified လွၵ်းလၢႆးလိူၵ်ႈ

	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၸႅင်ႈၼႄ
`autoFontSize`	`false`	မၼ်းႁဵတ်းႁႂ်ႈ ၽွၼ်ႉ-size ၶွင် box ၵူႈဢၼ်ဢၼ် ဢိင်ၼိူဝ် တၢင်းယႂ်ႇ box ဢၼ်ပဵၼ် ငဝ်ႈငႃႇမၼ်းၼၼ်ႉသေ ႁဵတ်းႁႂ်ႈမၼ်း ၶိုၼ်ႈယႂ်ႇမႃး ႁင်းမၼ်း။ ၸွမ်းၼင်ႇ ပိူင်မၼ်းတႄႉ ၶူဝ်းၶွင် font-size ၼၼ်ႉ ဢမ်ႇလႆႈတမ်းဝၢင်းဝႆႉ ၸႅင်ႈၸႅင်ႈလႅင်းလႅင်း။
`desiredHeight`	`190`	မၵ်းမၼ်ႈပၼ် တၢင်းသုင် ဢၼ်ၶႂ်ႈလႆႈ ၶွင် ထႅဝ် ဢႄးလီႇမႅၼ်ႇ။ တၢင်းသုင်ဢၼ်တေႉတေႉၼၼ်ႉ တေဢိင်ၼိူဝ် တၢင်းၵႂၢင်ႈဢၼ်မီးဝႆႉ လႄႈ ၶူဝ်းၶွင် ဢၼ်မီးၼႂ်းထႅဝ်ၼၼ်ႉသေ ၼပ်ႉသွၼ်ႇ။
`hideOnMissingImage`	`true`	လပ်ႉဝႆႉ ၶွပ်ႇဢၼ်ပႃးၶႅပ်းႁၢင်ႈ ဢၼ်ဢမ်ႇၸၢင်ႈဢဝ်သႂ်ႇလႆႈၼၼ်ႉ။
`spaceBetween`	`4`	မၵ်းမၼ်ႈပၼ် တၢင်းၵႆ ၼႂ်းၵႄႈ ၶူဝ်းၶွင် ဢၼ်ပဵၼ် ၽိၵ်ႉသိူဝ်ႇ။
`lastRowAlign` ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.3.0 ၼၼ်ႉယဝ်ႉ။	`justified`	မၵ်းမၼ်ႈပၼ် လွင်ႈႁဵတ်းသၢင်ႈ ထႅဝ်လိုၼ်းသုတ်း။ ၵႃႈၶၼ်ဢၼ်ပၼ်ၶႂၢင်ႉဝႆႉၼၼ်ႉ ပဵၼ် `left` ၊ `center` ၊ `right` လႄႈ `justified` ။
`singleRowAlign` ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.3.0 ၼၼ်ႉယဝ်ႉ။	`justified`	မၵ်းမၼ်ႈပၼ် လွင်ႈႁဵတ်းသၢင်ႈ သင်ဝႃႈ မီးထႅဝ်လဵဝ်ၵူၺ်း။ ၵႃႈၶၼ်ဢၼ်ပၼ်ၶႂၢင်ႉဝႆႉၼၼ်ႉ ပဵၼ် `left` ၊ `center` ၊ `right` လႄႈ `justified` ။
~~`fillLastRow`~~ ~~ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.1.0 ၼၼ်ႉယဝ်ႉ။~~	~~`true`~~	ဢဝ်ဢွၵ်ႇပႅတ်ႈ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.4.0 (ဢမ်ႇၸႂ်ႉယဝ်ႉ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.3.0 ) ၶပ်ႉၶိုင်ပၼ် ၶႅပ်းႁၢင်ႈ ႁႂ်ႈထႅဝ်လိုၼ်းသုတ်း တဵမ်တဵမ်ထူၼ်ႈထူၼ်ႈတႃႇသေႇ။ သင်ဝႃႈ ၸဝ်ႈၵဝ်ႇ ဝၢင်းၽႅၼ် တႃႇတေ သႂ်ႇၶႅပ်းႁၢင်ႈ လူၺ်ႈလၢႆး dynamically ၼႆၸိုင် တေၸၢင်ႊပဵၼ် လွင်ႈလီ တႃႇတေ ပိၵ်ႉပႅတ်ႈ လွင်ႈၼႆႉယူႇ။ ဢမ်ႇမီးၽွၼ်းလီသင် ၼိူဝ်ထႅဝ်ဢၼ်လဵဝ် (တူၺ်း `fillSingleRow` )။
`fillSingleRow` ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.1.0 ၼၼ်ႉယဝ်ႉ။	~~`true`~~	ဢဝ်ဢွၵ်ႇပႅတ်ႈ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.4.0 (ဢမ်ႇၸႂ်ႉယဝ်ႉ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.3.0 ) သင်ဝႃႈ မီးထႅဝ်လဵဝ်ၵူၺ်းၼႆ မၼ်းၸင်ႇၶပ်ႉပၼ် ၶႅပ်းႁၢင်ႈ ႁႂ်ႈထႅဝ်ၼၼ်ႉ တဵမ်တဵမ်ထူၼ်ႈထူၼ်ႈတႃႇသေႇ။ သင်ဝႃႈ မၼ်းၸၢင်ႈပဵၼ်မႃးလႆႈဝႃႈ ၼႂ်းၵႄႇလီႇၼၼ်ႉ မီးၶႅပ်းႁၢင်ႈ ဢၼ်လဵဝ် ဢမ်ႇၼၼ် သွင်ဢၼ်ၵူၺ်းၼႆၸိုင် တေၸၢင်ႈပဵၼ် လွင်ႈလီ တႃႇတေ ပိၵ်ႉပႅတ်ႈ လွင်ႈၼႆႉယူႇ။

Waterfall လွၵ်းလၢႆးလိူၵ်ႈ

	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၸႅင်ႈၼႄ
`autoFontSize`	`false`	မၼ်းႁဵတ်းႁႂ်ႈ ၽွၼ်ႉ-size ၶွင် box ၵူႈဢၼ်ဢၼ် ဢိင်ၼိူဝ် တၢင်းယႂ်ႇ box ဢၼ်ပဵၼ် ငဝ်ႈငႃႇမၼ်းၼၼ်ႉသေ ႁဵတ်းႁႂ်ႈမၼ်း ၶိုၼ်ႈယႂ်ႇမႃး ႁင်းမၼ်း။ ၸွမ်းၼင်ႇ ပိူင်မၼ်းတႄႉ ၶူဝ်းၶွင် font-size ၼၼ်ႉ ဢမ်ႇလႆႈတမ်းဝၢင်းဝႆႉ ၸႅင်ႈၸႅင်ႈလႅင်းလႅင်း။
`desiredWidth`	`250`	မၵ်းမၼ်ႈပၼ် တၢင်းၵႂၢင်ႈ ၶွပ်ႇဢၼ်ၶႂ်ႈလႆႈ။ တၢင်းၵႂၢင်ႈဢၼ်တေႉတေႉၼၼ်ႉ တေဢိင်ၼိူဝ် တၢင်းၵႂၢင်ႈဢၼ်မီးဝႆႉ လႄႈ တၢင်းၼမ်ထႅဝ်မၼ်းသေ ၼပ်ႉသွၼ်ႇ။
`hideOnMissingImage`	`true`	လပ်ႉဝႆႉ ၶွပ်ႇဢၼ်ပႃးၶႅပ်းႁၢင်ႈ ဢၼ်ဢမ်ႇၸၢင်ႈဢဝ်သႂ်ႇလႆႈၼၼ်ႉ။
`horizontalOrder`	`false`	မၵ်းမၼ်ႈဝႃႈ ၶူဝ်းၶွင်ၸိူဝ်းၼၼ်ႉ ဢဝ်တမ်းဝႆႉ ၶူဝ်းၶွင်ဢၼ်လဵဝ် ၼႂ်းထႅဝ်လႂ်ထႅဝ်ၼၼ်ႉ တႄႇဢဝ်ၽၢႆႇသၢႆႉၵႂႃႇၽၢႆႇၶႂႃ ယဝ်ႉၵေႃႈ တႄႇၶိုၼ်းတီႈထႅဝ်ၽၢႆႇသၢႆႉသုတ်း ဢၼ်လွတ်ႈလႅဝ်း တီႈဢၼ်ထႅဝ်ၼၼ်ႉ မီးတီႈယူႇၼမ်လိူဝ်ၼၼ်ႉယဝ်ႉ။ ၸွမ်းၼင်ႇပိူင်မၼ်းတႄႉ ၶူဝ်းၶွင်ၸိူဝ်းၼၼ်ႉ တေဝႆႉၼႂ်းထႅဝ်ဢၼ်မီးတၢင်းသုင်လဵၵ်ႉသုတ်းၼၼ်ႉတႃႇသေႇယဝ်ႉ။
`spaceBetween`	`4`	မၵ်းမၼ်ႈပၼ် တၢင်းၵႆ ၼႂ်းၵႄႈ ၶူဝ်းၶွင် ဢၼ်ပဵၼ် ၽိၵ်ႉသိူဝ်ႇ။
`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`.

တၢင်းလိူၵ်ႈဢၼ်ၶိုၼ်ႈယႂ်ႇထႅင်ႈ

တႃႇတေလႆႈ လွၵ်းလၢႆး ဢၼ်ၶိုၼ်ႈယႂ်ႇလိူဝ်ၼၼ်ႉ တူၺ်းတီႈ API ၼၼ်ႉတႃႉ။

တီႈပွင်ႇ HTML

လွၵ်းလၢႆး HTML ဢၼ်ငၢႆႈသေပိူၼ်ႈ ၶွင် Gridzy ၼႆႉ ပဵၼ်ၸိူင်ႉၼႆ။

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

ၵူၺ်းၵႃႈ Gridzy ၼႆႉ မၼ်းမီးလွင်ႈလႅၵ်ႈလၢႆႈလႆႈလီလႄႈ ၸႂ်ႉတိုဝ်းလႆႈ HTML structure တၢင်ႇဢၼ် ၶႂ်ႈဝႃႈၵူႈဢၼ်ယဝ်ႉ။ ဢၼ်တေလႆႈဝူၼ်ႉၼၼ်ႉ မီးၵမ်ႈၽွင်ႈၵူၺ်း-

လုၵ်ႈဢွၼ်ႇ ၶွင် ၶူဝ်းၶွင် ၶွၼ်ႇတႄႇၼႃႇ ၵူႊဢၼ်ၼႆႉ တၢင်တူဝ် ၶူဝ်းၶွင် ဢၼ်လဵဝ် ၼႂ်း ၵရိတ်ႉၼၼ်ႉယဝ်ႉ။
ၶူဝ်းၶွင် container လႄႈ လုၵ်ႈမၼ်း တင်းသွင်ဢၼ်ၼႆႉ ၸၢင်ႈပဵၼ်လႆႈ မဵဝ်း tag ဢၼ်လႂ်သေဢမ်ႇဝႃႈ မိူၼ်ၼင်ႇ ul လႄႈ li (ဝူၼ်ႉတႃႇတေ မႄးၶိုၼ်း လွင်ႈတမ်းဝၢင်း ၶွင် browser ၼၼ်ႉၵွႆး)။
သင်ဝႃႈ ၶူဝ်းၶွင် img ၼႆႉ ဢမ်ႇၸႂ်ႈလုၵ်ႈဢွၼ်ႇမၼ်းၵမ်းသိုဝ်ႈၼႆ မၼ်းလူဝ်ႇလႆႈမီး ၸၼ်ႉထၢၼ်ႈ gridzyImage ၼၼ်ႉယဝ်ႉ။

ယွၼ်ႉၼၼ် ဢၼ်ၼႆႉၵေႃႈ ပဵၼ် HTML ဢၼ်ႁဵတ်းၵၢၼ်လႆႈ -

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

ပိူင်လူင်မၼ်း သင်ဝႃႈ ၶႂ်ႈသႂ်ႇ ၶေႃႈၵႂၢမ်း ၼႆၸိုင် လူဝ်ႇလႆႈမီး HTML structure ဢၼ်ၶိုၵ်ႉၶႅမ်ႉ။ တႃႇတေႁူႉလွင်ႈမၼ်းထႅင်ႈၼၼ်ႉ တူၺ်းတီႈ ၶေႃႈၵႂၢမ်း & ၼိူဝ်ႉၼင် ။

ၶေႃႈၵႂၢမ်း လႄႈ ၽိဝ်ၼင်

သင်ဝႃႈ ၸဝ်ႈၵဝ်ႇၶႂ်ႈသႂ်ႇ ၶေႃႈၵႂၢမ်း တီႈၼႂ်း Gallery ၸဝ်ႈၵဝ်ႇၼႆၸိုင် လူဝ်ႇလႆႈ မၵ်းမၼ်ႈပၼ် ၽၢင်ႁၢင်ႈမၼ်း။ ၵွပ်ႈၼၼ် ၽိဝ်ၼင်ဢၼ်မၵ်းမၼ်ႈဝႆႉဢွၼ်တၢင်းၼၼ်ႉ ၵမ်ႈၽွင်ႈၵေႃႈ မီးဝႆႉယူႇ။ ၽိဝ်ၼင်ၵူႈဢၼ်ဢၼ် ဢၼ်ပႃး CSS file ။ လူဝ်ႇလႆႈသႂ်ႇ ၾၢႆႇၼႆႉ လိူဝ်သေ ၾၢႆႇ Gridzy ဢၼ်ပဵၼ်ပိူင်လူင် (ၵမ်ႈၼမ် တီႈတွၼ်ႈႁူဝ်) ၼၼ်ႉယဝ်ႉ၊

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

လိူဝ်ၼၼ်ႉ လူဝ်ႇလႆႈမီး HTML structure ဢၼ်ၶိုၵ်ႉၶႅမ်ႉ -

<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 ၼႆၸိုင် တူၺ်းတီႈ Semantic HTML ၼၼ်ႉလႄႈ။

တွၼ်ႈတႃႇ ၶေႃႈၵႂၢမ်း ဢၼ်ၸဝ်ႈၵဝ်ႇ ၸႂ်ႉတိုဝ်းလႆႈ ၶေႃႈမၢႆ ဢၼ်လႂ်သေဢမ်ႇဝႃႈ ႁႂ်ႈမၼ်ႈၸႂ်ဝႃႈ မၼ်းမီး ၸၼ်ႉ gridzyCaption ၼၼ်ႉၵွႆး။ ၶူဝ်းၶွင် img ၼႆႉ မၼ်းလူဝ်ႇ ၸၼ်ႉထၢၼ်ႈ gridzyImage ၼၼ်ႉယဝ်ႉ။

တူဝ်ယၢင်ႇပႃႈၼိူဝ်ၼႆႉ မၼ်းၼႄပၼ် ၽိဝ်ၼင် gridzySkinClassic ၼၼ်ႉယဝ်ႉ။ တႃႇၸႂ်ႉတိုဝ်းဢၼ်ပိူင်ႈၵၼ်ၼၼ်ႉ ဢဝ်ၸိုဝ်ႈၽိဝ်ၼင် မႃးတႅၼ်းတၢင် ဢၼ်လႂ်ဢၼ်ၼၼ်ႉၵူၺ်း။

ပႃးၽိဝ်ၼင်

	ၸၼ်ႉဢၼ်မီးဝႆႉ
ၵရိတ်ႉၸီႇသၵိၼ်ႇပလႅၼ်ႉ တီႈတႄႇဢၼ်လီ တႃႇႁဵတ်းဢွၵ်ႇ ၽိဝ်ၼင်တူဝ်ၵဝ်ႇ တူၺ်းၼႃႈ Live	`gridzySkinBlank`
gridzySkinClassic တူၺ်းၼႃႈ Live	`gridzySkinClassic` `gridzySkinClassicLight`(ဢမ်ႇၸႂ်ႉယဝ်ႉ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.6.0)
gridzySkinFullOverlay တူၺ်းၼႃႈ Live	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(ဢမ်ႇၸႂ်ႉယဝ်ႉ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.6.0)
gridzySkinLift တူၺ်းၼႃႈ Live	`gridzySkinLift` `gridzySkinLiftLight`(ဢမ်ႇၸႂ်ႉယဝ်ႉ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.6.0)
gridzySkinMagnifier လွင်ႈႁဵတ်းၵၢၼ် zoom ဢမ်ႇပႃး တူၺ်းၼႃႈ Live	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(ဢမ်ႇၸႂ်ႉယဝ်ႉ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.6.0)

ၽိဝ်ၼင် ဢၼ်လၢတ်ႈမႃးပႃႈၼိူဝ်ၼႆႉ တင်းမူတ်း လူဝ်ႇ CSS file ၵူၺ်းသေတႃႉ ၽိဝ်ၼင် ဢၼ်လူဝ်ႇ JavaScript file ၼၼ်ႉၵေႃႈ မီးထႅင်ႈယူႇ။

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

	ၸၼ်ႉဢၼ်မီးဝႆႉ
gridzySkinBlur ဢမ်ႇႁဵတ်းၵၢၼ်လႆႈၼႂ်း IE တူၺ်းၼႃႈ Live	`gridzySkinBlur` `gridzySkinBlurLight`(ဢမ်ႇၸႂ်ႉယဝ်ႉ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.6.0)
gridzySkinCard တူၺ်းၼႃႈ Live	`gridzySkinCard` `gridzySkinCardLight`(ဢမ်ႇၸႂ်ႉယဝ်ႉ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.6.0)

တၢင်းလိူၵ်ႈၽိဝ်ၼင်

တႄႇဢဝ် 2.6.0 မႃး မီး Options တႃႇတေ ၵေႃႇသၢင်ႈ ၽိဝ်ၼင် ဢၼ်မီးဝႆႉ ၼႂ်းမၼ်းၼၼ်ႉယဝ်ႉ။ ဢိင်ၼိူဝ် ၽိဝ်ၼင် ဢၼ်တႅတ်ႈၼႅတ်ႈၼၼ်ႉသေ ၸဝ်ႈၵဝ်ႇ ၸၢင်ႈတင်ႈပၼ် သီၽၢႆႇလင် သီလိၵ်ႈ လႄႈ သီငဝ်းတူဝ်လိၵ်ႈ လႆႈယူႇ။ လူဝ်ႇၸႂ်ႉတိုဝ်း CSS ဢၼ်ပဵၼ် ၶူဝ်းၶွင် ဢၼ်ၸဝ်ႈၵဝ်ႇ ၶႂ်ႈလႆႈၼၼ်ႉၵွႆး မိူၼ်ၼင်ႇ လႆႈႁၼ်တီႈၼႆႈ။

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

တူၺ်းတီႈ လွင်ႈလႅၵ်ႈလၢႆႈ ဢၼ်ၵမ်ႉထႅမ်ဝႆႉ လႄႈ ၵႃႈၶၼ် ဢၼ်တမ်းဝႆႉ တွၼ်ႈတႃႇ ၽိဝ်ၼင် ၵူႊဢၼ်ဢၼ် တီႈၼႆႈ:

gridzySkinClassic

ဢၼ်ၸၢင်ႈလႅၵ်ႈလၢႆႈ	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၶေႃႈမုၼ်း
`--background`	`rgba(0, 0, 0, .7)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်ၽၢႆႇလင် CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--color`	`rgb(255, 255, 255)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်သီ CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--text-shadow`	`none`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်တူဝ်လိၵ်ႈ-ႁၢင်ႈငဝ်း CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ

gridzySkinFullOverlay

ဢၼ်ၸၢင်ႈလႅၵ်ႈလၢႆႈ	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၶေႃႈမုၼ်း
`--background`	`rgba(0, 0, 0, .7)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်ၽၢႆႇလင် CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--color`	`rgb(255, 255, 255)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်သီ CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--text-shadow`	`none`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်တူဝ်လိၵ်ႈ-ႁၢင်ႈငဝ်း CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ

gridzySkinLift

ဢၼ်ၸၢင်ႈလႅၵ်ႈလၢႆႈ	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၶေႃႈမုၼ်း
`--background`	`rgba(0, 0, 0, .7)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်ၽၢႆႇလင် CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--color`	`rgb(255, 255, 255)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်သီ CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်တူဝ်လိၵ်ႈ-ႁၢင်ႈငဝ်း CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ

gridzySkinMagnifier

ဢၼ်ၸၢင်ႈလႅၵ်ႈလၢႆႈ	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၶေႃႈမုၼ်း
`--background`	`rgba(0, 0, 0, .7)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်ၽၢႆႇလင် CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--color`	`rgb(255, 255, 255)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်သီ CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ

ၽိဝ်ၼင်ၼႆႉ ဢမ်ႇၵမ်ႉထႅမ်ပၼ် --text-shadow

gridzySkinBlur

ဢၼ်ၸၢင်ႈလႅၵ်ႈလၢႆႈ	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၶေႃႈမုၼ်း
`--background`	`rgba(0, 0, 0, .7)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်ၽၢႆႇလင် CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--color`	`rgb(255, 255, 255)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်သီ CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်တူဝ်လိၵ်ႈ-ႁၢင်ႈငဝ်း CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ

gridzySkinCard

ဢၼ်ၸၢင်ႈလႅၵ်ႈလၢႆႈ	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၶေႃႈမုၼ်း
`--background`	`rgba(0, 0, 0, 1)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်ၽၢႆႇလင် CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--color`	`rgb(255, 255, 255)`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်သီ CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ
`--text-shadow`	`none`	ပၼ်ၶႂၢင်ႉ ၵႃႈၶၼ်တူဝ်လိၵ်ႈ-ႁၢင်ႈငဝ်း CSS ဢၼ်လႂ်သေဢမ်ႇဝႃႈ

ၽိဝ်ၼင် ဢၼ်မၵ်းမၼ်ႈဝႆႉ ဢွၼ်တၢင်းၼၼ်ႉ တင်းမူတ်း ၵမ်ႉထႅမ်ပၼ် ၶေႃႈၵႂၢမ်း ဢၼ်ငၢႆႈငၢႆႈၼၼ်ႉၵွၺ်း။ ႁဵတ်းဢွၵ်ႇလႆႈ ၽိဝ်ၼင် ဢၼ်ၸဝ်ႈၵဝ်ႇ ႁင်းၸဝ်ႈၵဝ်ႇ လႄႈ ဢၼ်သုၵ်ႉသၵ်ႉလိူဝ်ၼၼ်ႉ။ ၶႅၼ်းတေႃႈ တူၺ်းတီႈ Style Gridzy သေၵမ်း။

သတၢႆႇၵရိတ်ႉၸီႇ

သင်ဝႃႈ ဢမ်ႇမီးၽိဝ်ၼင် ဢၼ်မၵ်းမၼ်ႈဝႆႉ ဢွၼ်တၢင်း ဢၼ်ထုၵ်ႇမႅၼ်ႈၸွမ်း လွင်ႈလူဝ်ႇၸဝ်ႈၵဝ်ႇၼႆၸိုင် ၸဝ်ႈၵဝ်ႇၸၢင်ႈႁဵတ်း style ႁင်းၵူၺ်းလႆႈယူႇ။

လၢႆးငၢႆႈသုတ်းတႄႉ ဢွၼ်တၢင်းသုတ်း တေလႆႈဢဝ် ၽိဝ်ၼင်ဢၼ်မီးဝႆႉၼၼ်ႉသေ ႁဵတ်းႁႂ်ႈမၼ်းထုၵ်ႇမႅၼ်ႈၸွမ်း လွင်ႈလူဝ်ႇတူဝ်ၵဝ်ႇၼၼ်ႉယဝ်ႉ။ ၽိဝ်ၼင် gridzySkinBlank ဢၼ်မၵ်းမၼ်ႈဝႆႉဢွၼ်တၢင်းၼၼ်ႉ တေၵႆႉပၼ် ပိုၼ်ႉထၢၼ်ဢၼ်လီ ဢိၵ်ႇပႃး ၽိုၼ်လိၵ်ႈဢၼ်လီ ၼႂ်းၾၢႆႇ CSS ၼၼ်ႉယဝ်ႉ။

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

ၼႂ်း CSS ၼၼ်ႉ တေလႆႈႁၼ် ၸၼ်ႉ gridzyImage gridzySkinBlank gridzyCaption ၵရိတ်ႉၸီႇ တူဝ်ၵဝ်ႇ ဢမ်ႇလူဝ်ႇ ၸၼ်ႉၸိူဝ်းၼႆႉ။ ၸႂ်ႉတိုဝ်းတႃႇႁဵတ်းႁၢင်ႈၽၢင်ၵူၺ်းလႄႈ ပေႃးၶႂ်ႈဢဝ်ဢွၵ်ႇ ဢမ်ႇၼၼ် မႄးၸိုဝ်ႈၵေႃႈလႆႈယူႇ။

လိူဝ်သေၼၼ်ႉ တေလႆႈႁၼ် ၸၼ်ႉ CSS gridzyItem ၼၼ်ႉယဝ်ႉ။ Gridzy ၼႆႉ မၼ်းတမ်းဝၢင်းပၼ် ၸၼ်ႉထၢၼ်ႈၼႆႉ လူၺ်ႈတူဝ်မၼ်း တႃႇလုၵ်ႈဢွၼ်ႇ ဢၼ်ၵမ်းသိုဝ်ႈ ၶွင် ၶူဝ်းၶွင် ဢၼ်ပဵၼ် ပိူင်လူင်ၼၼ်ႉယဝ်ႉ။ ယွၼ်ႉၼၼ် ၸဝ်ႈၵဝ်ႇၸၢင်ႈၸႂ်ႉတိုဝ်း ၸၼ်ႉၼႆႉသေ ႁဵတ်း style ၶူဝ်းၶွင် ၼႂ်း Gallery ၸဝ်ႈၵဝ်ႇလႆႈယူႇ။

ၸႂ်လွင်ႈယႂ်ႇ

ၶေႃႈၼမ်းၶူဝ်းၶွင် ႁႂ်ႈတဵမ်ထူၼ်ႈ။ ဝူၼ်ႉဝႃႈ တၢင်းယႂ်ႇ ဢီႇလႅၼ်ႇ တေလႅၵ်ႈလၢႆႈၵႂႃႇ တိုၼ်းတေႉ။ ၸႂ်ႉတိုဝ်း ၵႃႈၶၼ် ႁူဝ်ပၢၵ်ႇ တႅၼ်းတီႈ ၵႃႈၶၼ် ၽိၵ်ႉသိူဝ်ႇ။ ယဝ်ႉၵေႃႈ တူၺ်းတီႈ လွၵ်းလၢႆး ၶပ်ႉမၢႆ Gridzy ဢၼ် autoFontSize ဢၼ်မတ်ႉဝႆႉ တၢင်းယႂ်ႇ တူဝ်လိၵ်ႈ တီႈၼိူဝ် တၢင်းယႂ်ႇ ၶွပ်ႇၶူဝ်းၶွင်ၼၼ်ႉလႄႈ။
ၶူဝ်းၶွင်ၵူႈဢၼ်ၼႆႉ ႁႂ်ႈမီး ၽၢင်ႁၢင်ႈ ဢၼ်မၵ်းမၼ်ႈဝႆႉလီလီ။ တၢင်းယႂ်ႇၶူဝ်းၶွင်ၼၼ်ႉ တေဢမ်ႇလႅၵ်ႈလၢႆႈသေပွၵ်ႈလႄႈ လူဝ်ႇလႆႈၼပ်ႉသွၼ်ႇ ၵရိတ်ႉၼၼ်ႉယဝ်ႉ။ ယွၼ်ႉၼၼ် သင်ဝႃႈ ၶူဝ်းၶွင်ဢၼ်ၼိုင်ႈ ဢမ်ႇမီး Aspect Ratio ဢၼ်မၵ်းမၼ်ႈဝႆႉလီလီ လူၺ်ႈတူဝ်မၼ်းၼႆၸိုင် ႁႂ်ႈမၵ်းမၼ်ႈဝႆႉ လူၺ်ႈမိုဝ်း (မိူၼ်ၼင်ႇ လူၺ်ႈ css) ၼၼ်ႉတႃႉ။

မၢင်ပွၵ်ႈမၢင်လႂ် ၵွၼ်ႇပႆႇတႄႇႁဵတ်း Gridzy ၼၼ်ႉ တေၸၢင်ႊႁဵတ်း style ၶေႃႈၼမ်း ၶူဝ်းၶွင်ၼၼ်ႉ ငၢႆႈငၢႆႈယူႇ။ ဢဝ်ဢွၵ်ႇပႅတ်ႈ ၶလႅတ်ႉ gridzy ဢမ်ႇၼၼ် ၾၢႆႇၸႃႇဝႃႇသၵရိတ်ႉ Gridzy ၸူဝ်ႈၵႅပ်ႉ တႃႇလွင်ႈၼႆႉၵွႆး။

ၼၼ်ႉယဝ်ႉ! တႃႇတေၵေႃႇသၢင်ႈ ၽိဝ်ၼင်တူဝ်ၵဝ်ႇၼၼ်ႉ လူဝ်ႇလႆႈႁဵတ်းၸိူင်ႉၼႆၵွႆး။ ၵမ်ႈၼမ် ဢၼ်မၵ်းမၼ်ႈဝႆႉ ၽိဝ်ၼင်ၼၼ်ႉ ဢမ်ႇၸႂ်ႉလိူဝ်ၼႆႉ။

ၵူၺ်းၵႃႈ ပေႃးသူင်ၸႂ်ၼႆ ၸၢင်ႈမီးထႅင်ႈယူႇ ...

ၽိဝ်ၼင်ၶိုၼ်ႈယႂ်ႇ

ၵရိတ်ႉၸီႇၼႆႉ ၸႂ်ႉတိုဝ်း CSS ၼမ်လိူဝ်သေ gridzyItem ၵူၺ်း။ ၵမ်ႈၼမ် မၼ်းတေႁဵတ်းပၼ် ႁင်းမၼ်းသေ ၸႂ်ႉတိုဝ်းလႆႈ တႃႇႁဵတ်း style ၵေႃႈလႆႈယူႇ။

ၸၼ်ႉၶွၼ်ႇတႅၼ်ႇပိူင်လူင်

ၸိုဝ်ႈၸၼ်ႉ ၸႅင်ႈၼႄ

gridzy
တႃႇတေတင်ႈလူၺ်ႈမိုဝ်း Gridzy ၼႆႉ မၼ်းႁႃႁၼ် ၶူဝ်းၶွင် ဢၼ်မီး ၸၼ်ႉထၢၼ်ႈၼႆႉ လူၺ်ႈမၼ်းသေ ႁဵတ်းႁႂ်ႈမၼ်း တႄႇတင်ႈမႃး။

gridzyAnimated ပေႃးဝႃႈ တၢင်းလိူၵ်ႈ animate ၼႆႉ true ၼႆ မၼ်းတေတင်ႈပၼ် ႁင်းမၼ်းယဝ်ႉ။ သင်ဝႃႈ ၸၼ်ႉထၢၼ်ႈၼႆႉ လႆႈတင်ႈဝႆႉ လူၺ်ႈမိုဝ်းၼႆၸိုင် တီႈလိူၵ်ႈ animate ၼၼ်ႉၵေႃႈ တေလႆႈ true ႁင်းမၼ်း (လိူဝ်သေ သင်ဝႃႈ မၼ်းတင်ႈဝႆႉ false ၸႅင်ႈၸႅင်ႈလႅင်းလႅင်း)။

ၸိုဝ်ႈၸၼ်ႉ	ၸႅင်ႈၼႄ
`gridzy` တႃႇတေတင်ႈလူၺ်ႈမိုဝ်း	Gridzy ၼႆႉ မၼ်းႁႃႁၼ် ၶူဝ်းၶွင် ဢၼ်မီး ၸၼ်ႉထၢၼ်ႈၼႆႉ လူၺ်ႈမၼ်းသေ ႁဵတ်းႁႂ်ႈမၼ်း တႄႇတင်ႈမႃး။
`gridzyAnimated`	ပေႃးဝႃႈ တၢင်းလိူၵ်ႈ `animate` ၼႆႉ `true` ၼႆ မၼ်းတေတင်ႈပၼ် ႁင်းမၼ်းယဝ်ႉ။ သင်ဝႃႈ ၸၼ်ႉထၢၼ်ႈၼႆႉ လႆႈတင်ႈဝႆႉ လူၺ်ႈမိုဝ်းၼႆၸိုင် တီႈလိူၵ်ႈ `animate` ၼၼ်ႉၵေႃႈ တေလႆႈ `true` ႁင်းမၼ်း (လိူဝ်သေ သင်ဝႃႈ မၼ်းတင်ႈဝႆႉ `false` ၸႅင်ႈၸႅင်ႈလႅင်းလႅင်း)။

ၸၼ်ႉၶူဝ်းၶွင်

ၸိုဝ်ႈၸၼ်ႉ	ၸႅင်ႈၼႄ
`gridzyItem`	တေတင်ႈပၼ် မိူဝ်ႈၶူဝ်းၶွင် တႄႇႁဵတ်းၵၢၼ် တႄႇႁဵတ်းၼၼ်ႉ ၵမ်းလဵဝ်ယဝ်ႉ။ တေဢမ်ႇဢဝ်ဢွၵ်ႇလႆႈသေပွၵ်ႈ။
`gridzyItemInitializing`	တေတင်ႈပၼ် မိူဝ်ႈၶူဝ်းၶွင် တႄႇႁဵတ်းၵၢၼ် တႄႇႁဵတ်းၼၼ်ႉ ၵမ်းလဵဝ်ယဝ်ႉ။ တေဢဝ် `gridzyItemReady` မႃးတႅၼ်းတီႈ မိူဝ်ႈၶူဝ်းၶွင်ၼၼ်ႉ လႆႈတႄႇႁဵတ်း တဵမ်ထူၼ်ႈၼၼ်ႉယဝ်ႉ။ ပွင်ႇဝႃႈ ဢမ်ႇၸႂ်ႈဝႃႈ ၶႅပ်းႁၢင်ႈ လႆႈတၢင်ႇဝႆႉ တဵမ်ထူၼ်ႈ (တူၺ်းတီႈ `gridzyItemLoading` ) ၵူၺ်းၵႃႈ ၶူဝ်းၶွင်ၼၼ်ႉ ႁၢင်ႈႁႅၼ်းဝႆႉ တႃႇတေလႆႈႁၼ်။
`gridzyItemReady`	တေမႃးတႅၼ်းတီႈ `gridzyItemInitializing` မိူဝ်ႈၶူဝ်းၶွင်ၼၼ်ႉ လႆႈတႄႇႁဵတ်းၵၢၼ် တဵမ်ထူၼ်ႈၼၼ်ႉယဝ်ႉ။ တေဢမ်ႇဢဝ်ဢွၵ်ႇလႆႈသေပွၵ်ႈ။ ပွင်ႇဝႃႈ ဢမ်ႇၸႂ်ႈဝႃႈ ၶႅပ်းႁၢင်ႈၸိူဝ်းၼၼ်ႉ လႆႈတၢင်ႇဝႆႉ တဵမ်ထူၼ်ႈယဝ်ႉ (တူၺ်းတီႈ `gridzyItemComplete` ) ၵူၺ်းၵႃႈ ၶူဝ်းၶွင်ၼၼ်ႉ လႆႈႁၢင်ႈႁႅၼ်းဝႆႉ တႃႇတေလႆႈႁၼ်လႆႈယဝ်ႉ။
`gridzyItemLoading`	တေတင်ႈပၼ် မိူဝ်ႈၶူဝ်းၶွင် တႄႇႁဵတ်းၵၢၼ် တႄႇႁဵတ်းၼၼ်ႉ ၵမ်းလဵဝ်ယဝ်ႉ။ တေဢဝ် `gridzyItemComplete` မႃးတႅၼ်းတီႈ မိူဝ်ႈၶႅပ်းႁၢင်ႈဢၼ်ပႃးဝႆႉၼၼ်ႉ (ၵမ်ႈၼမ် ပဵၼ်ဢၼ်လဵဝ်ၵူၺ်း) လႆႈတဵမ်ထူၼ်ႈယဝ်ႉၼၼ်ႉယဝ်ႉ။
`gridzyItemComplete`	တေမႃးတႅၼ်းတီႈ `gridzyItemLoading` မိူဝ်ႈၶႅပ်းႁၢင်ႈဢၼ်ပႃးဝႆႉၼၼ်ႉ (ၵမ်ႈၼမ် ပဵၼ်ဢၼ်လဵဝ်ၵူၺ်း) လႆႈတဵမ်ထူၼ်ႈယဝ်ႉၼၼ်ႉယဝ်ႉ။ တေဢမ်ႇဢဝ်ဢွၵ်ႇလႆႈသေပွၵ်ႈ။
`gridzyItemInitialToVisible`	တေတင်ႈပၼ် မိူဝ်ႈၶူဝ်းၶွင် တႄႇဢွၵ်ႇမႃး ပွၵ်ႈဢွၼ်တၢင်းသုတ်းၼၼ်ႉယဝ်ႉ။ တေဢဝ်ဢွၵ်ႇပႅတ်ႈ မိူဝ်ႈၶူဝ်းၶွင်ၼၼ်ႉ ႁၼ်လႆႈတဵမ်ထူၼ်ႈၼၼ်ႉယဝ်ႉ။
`gridzyItemVisible`	တေတင်ႈပၼ် မိူဝ်ႈၶူဝ်းၶွင်ၼၼ်ႉ ႁၼ်လႆႈတဵမ်ထူၼ်ႈၼၼ်ႉယဝ်ႉ။ တေဢဝ်ဢွၵ်ႇပႅတ်ႈ မိူဝ်ႈၶူဝ်းၶွင်ၼၼ်ႉ တႄႇႁၢႆၵႂႃႇၵမ်းလဵဝ်။
`gridzyItemVisibleToHidden`	တေတင်ႈပၼ် မိူဝ်ႈၶူဝ်းၶွင် တႄႇႁၢႆၵႂႃႇၼၼ်ႉၵမ်းလဵဝ်။ တေဢဝ်ဢွၵ်ႇပႅတ်ႈ မိူဝ်ႈၶူဝ်းၶွင်ၼၼ်ႉ လပ်ႉဝႆႉ တဵမ်ထူၼ်ႈၼၼ်ႉယဝ်ႉ။
`gridzyItemHidden`	တေတင်ႈပၼ် မိူဝ်ႈၶူဝ်းၶွင်ၼၼ်ႉ လပ်ႉဝႆႉ တဵမ်ထူၼ်ႈၼၼ်ႉယဝ်ႉ။ တေဢဝ်ဢွၵ်ႇပႅတ်ႈ မိူဝ်ႈၶူဝ်းၶွင် တႄႇဢွၵ်ႇမႃးၼၼ်ႉယဝ်ႉ။
`gridzyItemHiddenToVisible`	တေတင်ႈပၼ် မိူဝ်ႈၶူဝ်းၶွင် တႄႇဢွၵ်ႇမႃးၼၼ်ႉၵမ်းလဵဝ် (လိူဝ်သေ ဢၼ်ဢွၵ်ႇမႃး ပွၵ်ႈဢွၼ်တၢင်းသုတ်း – တူၺ်းတီႈ ၸၼ်ႉ `gridzyItemInitialToVisible` )။ တေဢဝ်ဢွၵ်ႇပႅတ်ႈ မိူဝ်ႈၶူဝ်းၶွင်ၼၼ်ႉ ႁၼ်လႆႈတဵမ်ထူၼ်ႈၼၼ်ႉယဝ်ႉ။
`gridzyItemVisibleToVisible`	တေတမ်းဝၢင်းပၼ် မိူဝ်ႈဢၼ် ၶူဝ်းၶွင် ဢၼ်မီးၼႂ်း ၵရိတ်ႉၼၼ်ႉ လႅၵ်ႈလၢႆႈၵႂႃႇၼၼ်ႉ ၵူၺ်းၵႃႈ ၶူဝ်းၶွင်ၼၼ်ႉ မၼ်းပဵၼ်မႃး လႄႈ တေႁၼ်လႆႈယူႇ။ တေဢဝ်ဢွၵ်ႇပႅတ်ႈ မိူဝ်ႈဢၼ် လွင်ႈလႅၵ်ႈလၢႆႈ ဢၼိမေးသျိၼ်း ယဝ်ႉတူဝ်ႈၵႂႃႇၼၼ်ႉယဝ်ႉ။

ၸွမ်းၼင်ႇ ပိူင်မၼ်းတႄႉ ၶိူင်ႈၼႄ လၢႆးႁဵတ်းလၢႆးသၢင်ႈ လႄႈ လွင်ႈတူင်ႉၼိုင် တႃႇၶႅပ်းႁၢင်ႈ ဢၼ်တေဢွၵ်ႇမႃး လႄႈ ဢၼ်တေႁၢႆၵႂႃႇၼၼ်ႉ လႆႈထုၵ်ႇ ၾၢႆႇ CSS ဢၼ်ပဵၼ်ပိူင်လူင် Gridzy ၼၼ်ႉ မၵ်းမၼ်ႈဝႆႉ ဢွၼ်တၢင်းယဝ်ႉ။

လူၺ်ႈ CSS classes ဢၼ်လၢတ်ႈမႃးပႃႈၼိူဝ်ၸိူဝ်းၼႆႉသေ ၸဝ်ႈၵဝ်ႇၸၢင်ႈႁဵတ်း style ၶိူင်ႈၼႄ Process လႄႈ လွင်ႈတူင်ႉၼိုင် ႁင်းၵူၺ်းလႆႈယူႇ။ ႁတ်းတူၺ်းၼႂ်း Gridzy main CSS file ၼၼ်ႉ ႁႂ်ႈပွင်ႇၸႂ်ဝႃႈ ၸဝ်ႈၵဝ်ႇတေလႆႈ ပူၼ်ႉပႅၼ်သင်။ ဢမ်ႇၵူဝ်သင် တီႈၼၼ်ႈ ၵူႈလွင်ႈလွင်ႈ လႆႈတႅမ်ႈမၢႆဝႆႉလီလီ။

ႁဵတ်းႁႂ်ႈလွင်ႈတၢင်ႇ လီလိူဝ်မႃး

သင်ဝႃႈ ၸႂ်ႉတိုဝ်းၶႅပ်းႁၢင်ႈၼမ်ၼႆ တေၸၢင်ႈပဵၼ် တၢင်းဝူၼ်ႉလီ တႃႇၸွႆႈထႅမ် Gridzy ႁဵတ်းဢွၵ်ႇ Grid ဝႆးဝႆးၼၼ်ႉယူႇ။

ႁႄႉၵင်ႈ လွင်ႈဝႅၼ်ၶႅပ်းႁၢင်ႈ

Gridzy ၼႆႉ မၼ်းလူဝ်ႇ တၢင်းယႂ်ႇ ၶႅပ်းႁၢင်ႈတင်းမူတ်း တႃႇတေၼပ်ႉသွၼ်ႇ ၵရိတ်ႉၼၼ်ႉ တေႉတေႉ။ လွင်ႈတၢင်းၸိူဝ်းၼႆႉ ႁဵတ်းႁႂ်ႈပဵၼ်မႃး လွင်ႈၸူမ်ၼမ်ႉ သင်ဝႃႈ ၶႅပ်းႁၢင်ႈၵမ်ႈၽွင်ႈ ႁၢင်ႈႁႅၼ်းဝႆႉသေ ၵမ်ႈၽွင်ႈသမ်ႉ ဢမ်ႇႁၢင်ႈႁႅၼ်းဝႆႉ။ ယိုင်ႈၶႅပ်းႁၢင်ႈၼမ် ယိုင်ႈၽွၼ်းယွၼ်ႈဢၼ်ၼႆႉ ၸၢင်ႈပဵၼ်လွင်ႈၶီၸႂ်။

တႃႇတေႁႄႉၵင်ႈ လွင်ႈႁဵတ်းသၢင်ႈၸိူင်ႉၼႆၼၼ်ႉ တင်ႈပၼ် ၶေႃႈမုၼ်း width လႄႈ height တွၼ်ႈတႃႇ ၶူဝ်းၶွင် img တင်းမူတ်းၼၼ်ႉၵွႆး။ လွင်ႈၼႆႉ မၼ်းလမ်ႇလွင်ႈတႃႇတေ တမ်းဝၢင်းပၼ် ၵႃႈၶၼ် ဢၼ်ထုၵ်ႇမႅၼ်ႈ တႃႇၶႅပ်းႁၢင်ႈ ၽႂ်မၼ်း ပေႃးဢမ်ႇၼၼ် ၶႅပ်းႁၢင်ႈၸိူဝ်းၼၼ်ႉ တေလႅၵ်ႈလၢႆႈၵႂႃႇ။ ၵႃႈၶၼ်ဢၼ်ထုၵ်ႇမႅၼ်ႈၼၼ်ႉ ပဵၼ်တၢင်းၵႂၢင်ႈလႄႈ တၢင်းသုင် ဢၼ်ပဵၼ်ငဝ်ႈငႃႇၶွင်ၶႅပ်းႁၢင်ႈၽႂ်မၼ်းၼၼ်ႉယဝ်ႉ။

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

ဝၢႆးၼၼ်ႉ Gridzy ၸင်ႇၼပ်ႉသွၼ်ႇလႆႈ ၵရိတ်ႉၼၼ်ႉၵမ်းလဵဝ် ဢမ်ႇလူဝ်ႇႁူႉ တၢင်းယႂ်ႇၶႅပ်းႁၢင်ႈ ဢၼ်တေႉတေႉၼၼ်ႉယဝ်ႉ။

ၶီႈလဝ်ႈ Loading

တႃႇတေဢဝ်ၶႅပ်းႁၢင်ႈ ဢၼ်မီးၼႂ်း viewport ဢၼ်ႁၼ်လႆႈၼၼ်ႉၵူၺ်း ႁဵတ်းၸွမ်းၼင်ႇပႃႈတႂ်ႈၼႆႉၵူၺ်း။

သႂ်ႇပၼ် ၶေႃႈမုၼ်း width လႄႈ height ၸွမ်းၼင်ႇ ဢၼ်လၢတ်ႈၼႄဝႆႉ ၽၢႆႇၼိူဝ်ၼၼ်ႉ (ႁႂ်ႈမၼ်ႈၸႂ်ဝႃႈ ၸႂ်ႉတိုဝ်း ၵႃႈၶၼ် ဢၼ်ထုၵ်ႇမႅၼ်ႈ)
ဢဝ် src တင်းမူတ်း မႃးတႅၼ်းတီႈ data-gridzylazysrc မိူၼ်ၼင်ႇ ဢၼ်ၼႄဝႆႉ ၽၢႆႇတႂ်ႈၼႆႉ (သင်ဝႃႈ ၸဝ်ႈၵဝ်ႇမီး srcset မိူၼ်ၵၼ်ၼႆ ဢဝ် data-gridzylazysrcset မႃးတႅၼ်းတၢင် )။

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

ဝၢႆးသေ ၶၵ်ႉတွၼ်ႈၸိူဝ်းၼႆႉယဝ်ႉ ၶႅပ်းႁၢင်ႈၸိူဝ်းၼၼ်ႉ တေမႃး မိူဝ်ႈၶဝ် မီးႁိမ်း ဢမ်ႇၼၼ် ၼႂ်း viewport ၼၼ်ႉၵမ်းလဵဝ်ယဝ်ႉ။

ၶိူင်ႈၼႄလၢႆးႁဵတ်းလၢႆးသၢင်ႈ

Process indicator ၼႆႉ ပဵၼ် ႁၢင်ႈၽၢင် ဢၼ်လဵၵ်ႉလဵၵ်ႉ ဢၼ်ဢွၵ်ႇမႃး ၽွင်းမိူဝ်ႈ ၶႅပ်းႁၢင်ႈ တိုၵ်ႉ load ယူႇၼၼ်ႉယဝ်ႉ။ သင်ဝႃႈၸႂ်ႉတိုဝ်း captions & skins ၼႆၸိုင် တေၼႄပၼ် လၢႆးႁဵတ်းလၢႆးသၢင်ႈ ႁင်းမၼ်းယူႇ။ ပေႃးဢမ်ႇၼၼ် လူဝ်ႇလႆႈမူၼ်ႉမႄးၵမ်ႈၽွင်ႈ-

ဢဝ် img ၵူႈဢၼ် သႂ်ႇၼႂ်း div ။
(ဢမ်ႇၼၼ် ၶဝ်ႈၵႂႃႇၼႂ်း ၶူဝ်းၶွင်တၢင်ႇဢၼ် – တူၺ်းတီႈ HTML ဢၼ်မီးတီႈပွင်ႇ တႃႇႁူႉလွင်ႈတၢင်းၼမ်လိူဝ်)
ထႅမ်သႂ်ႇ ၸၼ်ႉ gridzyImage တီႈၼႂ်း ၶူဝ်းၶွင် img ၵူႈဢၼ်ဢၼ်

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

ဝၢႆးၼၼ်ႉ ပေႃးဝႃႈ ၶႅပ်းႁၢင်ႈၸိူဝ်းၼၼ်ႉ လႆႈၸႂ်ႉၶၢဝ်းယၢမ်း တႃႇတေ load ၼႆၸိုင် တေလႆႈႁၼ် process indicators ၼၼ်ႉယူႇ။

ၶိူင်ႈထတ်း

Filter ၼႂ်း Gridzy ၼႆႉ မၼ်းငၢႆႈငၢႆႈ ၵူၺ်းၵႃႈ မၼ်းမီးႁႅင်း။ ဢမ်ႇဝႃႈ လူဝ်ႇ Filter ၸိူင်ႉႁိုဝ်ၵေႃႈယဝ်ႉ မၼ်းတေပဵၼ်မႃးလႆႈ တေႉတေႉ။ ဢၼ်လူဝ်ႇတႄႉ ပဵၼ် CSS ဢိတ်းဢွတ်း လႄႈ HTML form ဢိတ်းဢွတ်းၵူၺ်း ...

ၼႆႉပဵၼ်တူဝ်ယၢင်ႇ ဢၼ်ႁဵတ်းၵၢၼ်လႆႈ။

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

ႁဝ်းမႃးၵေႃႇသၢင်ႈမၼ်း ၶၵ်ႉၼိုင်ႈယဝ်ႉၶၵ်ႉၼိုင်ႈ

1. ဢွၼ်တၢင်းသုတ်း ႁဝ်းလူဝ်ႇ HTML structure ဢၼ်ၵႆႉၸႂ်ႉတိုဝ်း ၶွင် Gridzy သေ တမ်းဝၢင်းပၼ် ၸိုဝ်ႈ class တွၼ်ႈတႃႇ ၶူဝ်းၶွင် gallery တင်းမူတ်း ၼင်ႇႁိုဝ် ႁဝ်းတေၸၢင်ႈ Filter ၶဝ်လႆႈ ဝၢႆးၼၼ်ႉ

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

ၼႂ်းတူဝ်ယၢင်ႇဢၼ်ၼႆႉ ႁဝ်းၸႂ်ႉတိုဝ်း ၸၼ်ႉလဵဝ် တႃႇ element ၼိုင်ႈဢၼ်ၵူၺ်း။ ၵူၺ်းၵႃႈ ၸဝ်ႈၵဝ်ႇၸၢင်ႈတမ်းဝၢင်းပၼ် ၸၼ်ႉထၢၼ်ႈလၢႆလၢႆဢၼ် တွၼ်ႈတႃႇ ၶူဝ်းၶွင်ဢၼ်လဵဝ် သင်ဝႃႈ ၶူဝ်းၶွင်ၼၼ်ႉ ထုၵ်ႇလီႁႃလႆႈ လူၺ်ႈ ၶိူင်ႈထတ်းလၢႆလၢႆဢၼ်ၼၼ်ႉယဝ်ႉ။

2. ယဝ်ႉၵေႃႈ ႁဝ်းၶႃႈ တေသႂ်ႇပၼ် ၼဵၼ်ၵမ်ႈၽွင်ႈ ဢၼ်ႁဝ်းၶႃႈ တေၸၢင်ႈလႅၵ်ႈလၢႆႈ Filter မၼ်းလႆႈၼၼ်ႉ ယဝ်ႉၵေႃႈ

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

တႅၼ်းတီႈ ၼဵၼ်ၸိူဝ်းၼၼ်ႉ ၸဝ်ႈၵဝ်ႇၸၢင်ႈၸႂ်ႉတိုဝ်းလႆႈ ၶူဝ်းၶွင် ၾွၼ်ႉတၢင်ႇဢၼ် မိူၼ်ၼင်ႇ ၶွပ်ႇမၢႆ ၼဵၼ် ရေႇတီႇယူဝ်ႇ လိူၵ်ႈဢဝ် ၸဵမ်ၸိူဝ်းၼႆႉ။

မိူၼ်ၼင်ႇႁၼ်ယူႇၼၼ်ႉ ၵႃႈၶၼ် ၼဵၼ်ၸိူဝ်းၼၼ်ႉ ပဵၼ် CSS selectors ဢၼ်ၵႆႉပဵၼ်ၼၼ်ႉယဝ်ႉ။ ပေႃးႁဝ်းႁဵတ်းယဝ်ႉၵမ်းလဵဝ် ပေႃးၼဵၵ်းတီႈၼဵၼ်ၸိူင်ႉၼႆ မၼ်းတေဢွၵ်ႇမႃး ၶႅပ်းႁၢင်ႈဢၼ်ထုၵ်ႇမႅၼ်ႈၸွမ်း CSS selector ၼၼ်ႉယူႇ။ ပေႃးဢဝ်ပၢႆးၸၢင်ႊဝႃႈတႄႉ မၼ်းတင်ႈပၼ် လွၵ်းလၢႆး filter ႁႂ်ႈပဵၼ် ၵႃႈၶၼ်ဢၼ်ၼႆႉၵွႆး။

ယဝ်ႉၵေႃႈ ၸႂ်ႉတိုဝ်းလႆႈ ၶိူင်ႈလိူၵ်ႈ ဢၼ်သုၵ်ႉသၵ်ႉလိူဝ်ၼၼ်ႉ တင်းၼမ်။ တူဝ်ယၢင်ႇမၼ်း :not(.animals) တေႁဵတ်းၵၢၼ်လႆႈမိူၼ်ၵၼ် မိူၼ်ၼင်ႇ .animals.people လႄႈ .animals, .people ။

3. လိုၼ်းသုတ်း ႁဝ်းၶႃႈ တေဢဝ် ၼဵၼ် ၸိူဝ်းၼၼ်ႉ သႂ်ႇၼႂ်း ၶိူင်ႈ div သေ မတ်ႉဝႆႉ တီႈၼႂ်း ၵႄႇလီႇ Gridzy ၼၼ်ႉ လူၺ်ႈ တင်ႈပၼ် လွၵ်းလၢႆး filterControls -

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

မိူၼ်ၼင်ႇႁၼ်ယူႇၼၼ်ႉ ႁဝ်းၶႃႈၵေႃႈၸႂ်ႉတိုဝ်း ၶိူင်ႈလိူၵ်ႈ CSS တႃႇ filterControls ၼၼ်ႉယူႇ။ ၶိူင်ႈ div ဢၼ်မီး id attribute ၼၼ်ႉ မၼ်းႁဵတ်းၵၢၼ်ပၼ် တႃႇႁႂ်ႈ ၼဵၼ်ၸိူဝ်းၼၼ်ႉ လိူၵ်ႈလႆႈငၢႆႈငၢႆႈ လူၺ်ႈ ၶိူင်ႈလိူၵ်ႈ CSS ၼၼ်ႉၵွႆး။

ၼၼ်ႉယဝ်ႉ!

သင်ဝႃႈ ၸဝ်ႈၵဝ်ႇ ၶႂ်ႈလႆႈ ၶေႃႈတွပ်ႇ JavaScript ၼႆၸိုင် တူၺ်းတီႈ API ၼၼ်ႉတႃႉ။

API

ပႅၵ်ႉသမ်ႉဝႃႈ Gridzy ၼႆႉ မၼ်းမီး API မၼ်းယူႇသေတႃႉ ၵမ်ႈၼမ် ဢမ်ႇလူဝ်ႇ API မၼ်းသေ ႁဵတ်းလႆႈ လူၺ်ႈ ၵုမ်းထိင်း DOM ၼၼ်ႉၵွႆး။ Gridzy တေၾၢင်ႉႁၼ်သေ တေမႄးပၼ် ၵရိတ်ႉမၼ်း။ ၵူၺ်းၵႃႈ မၼ်းမီးပႃး API ဢၼ်ႁႅင်းယႂ်ႇၼႃႇ ...

လွင်ႈၵုမ်းထိင်း DOM

တွၼ်ႈတႃႇ လွင်ႈၵုမ်းထိင်း ပိူင်ၾၢင် ၶူဝ်းၶွင် ၽိုၼ်လိၵ်ႈ (DOM) တင်းမူတ်းၼၼ်ႉ ဢွၼ်တၢင်းသုတ်း ႁဝ်းလူဝ်ႇ ၶူဝ်းၶွင် ၶွၼ်ႇတႅၼ်ႇၼႃႇ ၼၼ်ႉယဝ်ႉ။

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

ထႅမ်ၶႅပ်းႁၢင်ႈ

မၼ်းလမ်ႇလွင်ႈတႃႇတေႁဵတ်းသၢင်ႈ လႄႈ တဵမ်ထူၼ်ႈ ၶိူင်ႈလုၵ်ႈဢွၼ်ႇမႂ်ႇၼၼ်ႉ ၵွၼ်ႇပႆႇဢဝ်သႂ်ႇၼႂ်း ၶိူင်ႈ Container ၼၼ်ႉယဝ်ႉ။ ပေႃးဢမ်ႇၼၼ် Gridzy ဢမ်ႇၸၢင်ႈႁႃႁၼ်လႆႈ တၢင်းယႂ်ႇဢၼ်ထုၵ်ႇမႅၼ်ႈ။

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

ဢဝ်ဢွၵ်ႇၶႅပ်းႁၢင်ႈ

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

လႅၵ်ႈလၢႆႈတၢင်းလိူၵ်ႈ

// 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 ၼႆႉ ၸဝ်ႈၵဝ်ႇတေလႆႈႁၼ်တီႈ MDN web docs ၼၼ်ႉယူႇ။ ယဝ်ႉၵေႃႈ မီးပႃး Introduction လွင်ႈ DOM ဢၼ်တေလႆႈၸႂ်ႉတိုဝ်းၼၼ်ႉယူႇ။

ၸဝ်ႈၶွင် API

တႃႇတေၸႂ်ႉတိုဝ်း API ၼၼ်ႉ ဢွၼ်တၢင်းသုတ်း ႁဝ်းလူဝ်ႇလႆႈမီး Gridzy instance ဢၼ်တေမတ်ႉဝႆႉ တီႈ ၶူဝ်းၶွင် ၵွၼ်ႈသီ Gridzy ၼၼ်ႉယဝ်ႉ။

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

လႆႈတၢင်းလိူၵ်ႈ

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

လႆႈတၢင်းလိူၵ်ႈတင်းမူတ်း

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

တမ်းဝၢင်း တၢင်းလိူၵ်ႈ

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

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

ၸႂ်ႉတိုဝ်း Filter

လွင်ႈၸႂ်ႉတိုဝ်း ၶိူင်ႈထတ်းၼႆႉ ပဵၼ်လွင်ႈတမ်းဝၢင်း filter ဢၼ်တေပဵၼ်လႆႈ ၶိူင်ႈလိူၵ်ႈ CSS ဢၼ်မၢၼ်ႇမႅၼ်ႈ ဢၼ်လႂ်သေဢမ်ႇဝႃႈ ၼၼ်ႉၵွႆး။

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

ထႅမ်သႂ်ႇ ၽွၼ်းၵၢၼ် ႁွင်ႉၶိုၼ်း

ဢမ်ႇၸႂ်ႉတိုဝ်းလႆႈ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.4.0
ၸႂ်ႉတိုဝ်း Events ဢၼ်ၶိုတ်းၵၢပ်ႈ လႄႈ ဢၼ်လႅၵ်ႈလၢႆႈလႆႈလိူဝ်ၼၼ်ႉ တႅၼ်းတၢင်။ တူၺ်းတီႈတွၼ်ႈၼႃႈ တႃႇႁူႉလွင်ႈတၢင်းမၼ်း။

Gridzy.js 2 ၼႆႉ မၼ်းၵမ်ႉထႅမ်ပၼ် လွၵ်းလၢႆး တႃႇႁဵတ်းၵၢၼ် ႁွင်ႉၶိုၼ်း ၵမ်ႈၽွင်ႈ။ ၶဝ်တေၸၢင်ႈတင်ႈလႆႈ လူၺ်ႈ API ဢၼ်ပဵၼ်ၶွင်ၸဝ်ႈၶွင်မၼ်းၵူၺ်း ၵူၺ်းၵႃႈ မိူၼ်ၼင်ႇ တၢင်းလိူၵ်ႈတၢင်ႇဢၼ်ၼၼ်ႉၵူၺ်း။

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

	~~ၸႅင်ႈၼႄ~~
~~`onBeforeOptionsChanged`~~	~~Callback ဢၼ်ႁွင်ႉၵမ်းသိုဝ်ႈ ၵွၼ်ႇပႆႇတမ်းဝၢင်း တၢင်းလိူၵ်ႈ။~~
~~`onOptionsChanged`~~	~~ၽွၼ်ႉ Callback ဢၼ်ႁွင်ႉမႃးၵမ်းသိုဝ်ႈ ဝၢႆးသေ တမ်းဝၢင်း တၢင်းလိူၵ်ႈ။~~
~~`onBeforeRender`~~	~~ၽွၼ်ႉ Callback ဢၼ်ႁွင်ႉၵမ်းသိုဝ်ႈ ၵွၼ်ႇပႆႇႁဵတ်း Render ။~~
~~`onRender`~~	~~ၽွၼ်ႉ Callback ဢၼ်ႁွင်ႉမႃးၵမ်းသိုဝ်ႈ ဝၢႆးသေ ႁဵတ်း Rendering ယဝ်ႉၼၼ်ႉယဝ်ႉ။~~

ၸႂ်ႉတိုဝ်း Events

ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.4.0 ၼၼ်ႉယဝ်ႉ။

ၸႂ်ႉတိုဝ်းလႆႈ လွင်ႈပဵၼ်မႃး Gridzy မိူၼ်ၼင်ႇ လွင်ႈပဵၼ်မႃး JavaScript ဢၼ်ၵႆႉၸႂ်ႉတိုဝ်းၼၼ်ႉလႆႈယူႇ။

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

လွင်ႈတၢင်းမၢင်လွင်ႈၼႆႉ မၼ်းယိုဝ်းသႂ်ႇၼိူဝ် ၶိူင်ႈၵမ်ႉၵႅမ် Gridzy သေ လွင်ႈတၢင်းတၢင်ႇဢၼ်သမ်ႉ ယိုဝ်းသႂ်ႇတီႈ ၶိူင်ႈၵမ်ႉၵႅမ် ၶူဝ်းၶွင် ၽႂ်မၼ်း ဢၼ်မီးၼႂ်း ၶိူင်ႈၵမ်ႉၵႅမ်ၼၼ်ႉယဝ်ႉ။

လွင်ႈတၢင်းဢၼ်ယိုဝ်းသႂ်ႇၼိူဝ် ဢႅင်ႇၵလႅၼ်ႇ ၶွၼ်ႇတႅၼ်ႇၼႃႇ Gridzy:

	ၸႅင်ႈၼႄ
`gridzyBeforeInit`	ၾႆးမႆႈ မိူဝ်ႈပႆႇတႄႇၵႄႇလီႇ။
`gridzyInit`	ၾႆးမႆႈ ဝၢႆးသေ တႄႇႁဵတ်း ၵႄႇလီႇ။
`gridzyBeforeOptionsChanged`	ၾႆးမႆႈ ၵွၼ်ႇပႆႇတမ်းဝၢင်း တၢင်းလိူၵ်ႈ။
`gridzyOptionsChanged`	ၾႆးမႆႈ ဝၢႆးသေ တမ်းဝၢင်း တၢင်းလိူၵ်ႈ။
`gridzyBeforeRender`	ၾႆးမႆႈ ၵွၼ်ႇပႆႇႁဵတ်း Render ။
`gridzyRender`	ၾႆးမႆႈဝၢႆးသေ ႁဵတ်း Render ။

သင်ဝႃႈ ဢမ်ႇလႆႈၶဝ်ႈႁူမ်ႈပၢင်ပွႆးတီႈၼႆႈၼႆ သူင်ႇ လိၵ်ႈယွၼ်းၵမ်ႉထႅမ် မႃးလႆႈယူႇၶႃႈ။

event.target မၼ်းပၼ် ၶူဝ်းၶွင် ၵရိတ်ႉၸီႇ ၼၼ်ႉယဝ်ႉ။
event.detail.instance မၼ်းပၼ် တူဝ်ယၢင်ႇ ၵရိတ်ႉၸီႇ ၼၼ်ႉယဝ်ႉ။

လွင်ႈတၢင်းဢၼ်ယိုဝ်းသႂ်ႇၼိူဝ် ၶူဝ်းၶွင်:

	ၸႅင်ႈၼႄ
`gridzyItemBeforeInit`	ၾႆးမႆႈ မိူဝ်ႈပႆႇတႄႇၶူဝ်းၶွင်။
`gridzyItemInit`	ၾႆးမႆႈဝၢႆးသေ ၶူဝ်းၶွင်တႄႇတင်ႈ။
`gridzyItemLoading`	ၾႆးမိူဝ်ႈၶူဝ်းၶွင် တႄႇတၢင်ႇ။
`gridzyItemReady`	ၾႆးမိူဝ်ႈၶူဝ်းၶွင် ႁၢင်ႈႁႅၼ်းတႃႇၼပ်ႉသွၼ်ႇ ၵရိတ်ႉ။ ယွၼ်ႉၼၼ် တၢင်းယႂ်ႇမၼ်း ႁူႉဝႆႉယူႇ ၵူၺ်းၵႃႈ ၶႅပ်းႁၢင်ႈၼၼ်ႉ တိုၵ်ႉတေၸၢင်ႈ load ယူႇ။
`gridzyItemComplete`	Fires မိူဝ်ႈၶႅပ်းႁၢင်ႈၶူဝ်းၶွင် လႆႈတဵမ်ထူၼ်ႈ။

event.target မၼ်းပၼ် ၶူဝ်းၶွင် ဢၼ်လႂ်ဢၼ်ၼၼ်ႉ။
event.detail.instance မၼ်းပၼ် တူဝ်ယၢင်ႇ ၵရိတ်ႉၸီႇ ၼၼ်ႉယဝ်ႉ။

API – လုမ်ႈၾႃႉ

မၼ်းမီးဝႆႉ ၽွၼ်ႉမၢင်ဢၼ် ဢၼ်ဢမ်ႇလႆႈဢိင်ၼိူဝ် Gridzy instances ၼၼ်ႉယဝ်ႉ။ ၵွပ်ႈၼၼ် ႁဝ်းဢမ်ႇလူဝ်ႇလႆႈ Instance ဢွၼ်တၢင်း။

လႆႈတၢင်းလိူၵ်ႈ ဢၼ်ပဵၼ်ပိူင်တၢႆ

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

ဢဝ် တၢင်းလိူၵ်ႈ ဢၼ်တမ်းဝႆႉ တင်းမူတ်း

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

တမ်းဝၢင်း တၢင်းလိူၵ်ႈ ဢၼ်ပဵၼ်ပိူင်တၢႆ

ဢၼ်ၼႆႉ မၼ်းဢမ်ႇတမ်းဝၢင်းပၼ် တၢင်းလိူၵ်ႈ ၶွင် Gridzy instances ဢၼ်လႆႈတႄႇႁဵတ်းဝႆႉ တင်းမူတ်းၼၼ်ႉသေတႃႉ မၼ်းမၵ်းမၼ်ႈပၼ် ပိုၼ်ႉထၢၼ် တွၼ်ႈတႃႇ instances ဢၼ်မႂ်ႇၼၼ်ႉယဝ်ႉ။ ၵူၺ်းၵႃႈ သင်ဝႃႈ တၢင်းလိူၵ်ႈ ဢၼ်မီးဝႆႉၼၼ်ႉ တေလႆႈၶိုၼ်းမႄး လူၺ်ႈ ၵႃႊၶၼ် null ၼႆၸိုင် မၼ်းတေၸႂ်ႉတိုဝ်း ၵႃႊၶၼ် ဢၼ်ပဵၼ် default ဢၼ်မႂ်ႇၼၼ်ႉယဝ်ႉ။

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

ၸႂ်ႉတိုဝ်းလႆႈ တႃႇတမ်းဝၢင်း တၢင်းလိူၵ်ႈ ၵူႊတီႈၵူႊတၢင်း သင်ဝႃႈ ႁွင်ႉမၼ်း မိူဝ်ႈပႆႇႁၢင်ႈႁႅၼ်း DOM ၼၼ်ႉယဝ်ႉ။ ယွၼ်ႉၼၼ် ၸဝ်ႈၵဝ်ႇတေဢမ်ႇလူဝ်ႇ တင်ႈ Options ႁႂ်ႈပဵၼ် Attribute ယဝ်ႉ၊

လွင်ႈႁဵတ်းၵၢၼ်ႁင်းမၼ်း

ၸူဝ်ႈၵႃႈ လွင်ႈႁဵတ်းၵၢၼ် ဢွမ်လူမ်း ၶွင် Gridzy.js 2 တင်းမူတ်း တိုၵ်ႉႁဵတ်းၵၢၼ်ယူႇၼၼ်ႉ ဢမ်ႇလူဝ်ႇ လွၵ်းလၢႆး ဢၼ်မီးပႃႈတႂ်ႈၼႆႉ။ ၵူၺ်းၵႃႈ လွင်ႈႁဵတ်းၵၢၼ်ႁင်းမၼ်းၼၼ်ႉ ၸၢင်ႈပိၵ်ႉပႅတ်ႈ တႃႇၸႂ်ႉတိုဝ်း Gridzy ၸွမ်းၼင်ႇလၢႆးၾိင်ႈထုင်းလိူဝ်ၼၼ်ႉလႆႈယူႇ။

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

ၶေႃႈလိူၵ်ႈၸိူဝ်းၼႆႉ ၵမ်ႈၽွင်ႈ ဢမ်ႇၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ data-gridzy- ဢမ်ႇၼၼ် လူၺ်ႈ setOptions() ၊

	ၵႃႈၶၼ်ဢၼ်တမ်းဝႆႉ	ၸႅင်ႈၼႄ
`autoInitOnDomReady`	`true`	ႁႃႁၼ် ၶူဝ်းၶွင် ဢၼ်မီး class `gridzy` မိူဝ်ႈၽွင်း ၼႃႈလိၵ်ႈ တေလူင်းၼၼ်ႉသေ ႁဵတ်းႁႂ်ႈ မၼ်းတႄႇတင်ႈ။ ၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` ၽူႈပႂ်ႉတူၺ်းလွင်ႈလႅၵ်ႈလၢႆႈသၼ်ႇထေႇ	`true`	ႁႃႁၼ် ၶူဝ်းၶွင်မႂ်ႇ ဢၼ်မီး class `gridzy` မိူဝ်ႈမၼ်းဢွၵ်ႇမႃး ၼႂ်း DOM ၼၼ်ႉၵမ်းလဵဝ်သေ ႁဵတ်းႁႂ်ႈမၼ်း တႄႇႁဵတ်းၵႂႃႇ။ (တူဝ်ယၢင်ႇ လွင်ႈၸႂ်ႉတိုဝ်း လွင်ႈလႅၵ်ႈလၢႆႈၼႃႈလိၵ်ႈ) ၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` ၽူႈပႂ်ႉတူၺ်းလွင်ႈလႅၵ်ႈလၢႆႈသၼ်ႇထေႇ	`true`	ၸွပ်ႇတူၺ်းဝႃႈ ၶူဝ်းၶွင်လုၵ်ႈဢွၼ်ႇ (ၶႅပ်းႁၢင်ႈ) ၸိူဝ်းၼႆႉ လႆႈသႂ်ႇ ဢမ်ႇၼၼ် လႆႈဢဝ်ဢွၵ်ႇ ၼႆသေ ႁဵတ်းႁႂ်ႈ ၵရိတ်ႉ ၶိုၼ်ႈယႂ်ႇမႃး ႁင်းမၼ်း။ ၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	မၵ်းမၼ်ႈဝႃႈ `data-gridzy-` ၼႆႉ ၸႂ်ႉတိုဝ်း ၵမ်ႈၼမ်ႁိုဝ် ဢမ်ႇၸႂ်ႉတိုဝ်း။ သင်ဝႃႈ ဢၼ်ၼႆႉ ပဵၼ် `false` ၼႆၸိုင် တေၸၢင်ႈတင်ႈလႆႈ လူၺ်ႈ API ဢၼ်ပဵၼ်ၶွင်ၸဝ်ႈၶွင်ၼၼ်ႉၵွႆး။ ၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ `new Gridzy()` `setOptions()` မႂ်ႇ `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` ၽူႈပႂ်ႉတူၺ်းလွင်ႈလႅၵ်ႈလၢႆႈသၼ်ႇထေႇ	`true`	ႁႃႁၼ်လွင်ႈလႅၵ်ႈလၢႆႈ `data-gridzy-` သေ ႁဵတ်းႁႂ်ႈ ၵရိတ်ႉ ၶိုၼ်ႈယႂ်ႇမႃး ႁင်းမၼ်း။ ယဝ်ႉၵေႃႈ မၼ်းတေႁူႉလႆႈဝႃႈ ၸွင်ႇ ၸၼ်ႉထၢၼ်ႈ `gridzyAnimated` ၼၼ်ႉ လႆႈသႂ်ႇ ဢမ်ႇၼၼ် လႆႈထွၼ်ဢွၵ်ႇ လႄႈ သင်ဝႃႈ လွင်ႈလႅၵ်ႈလၢႆႈ ၽၢင် `style` ပဵၼ်မႃးၼႆယဝ်ႉ။ သင်ဝႃႈ `useOptionAttributes` ၼႆႉ `false` ၸိုင် မၼ်းတေႁႃႁၼ် လွင်ႈလႅၵ်ႈလၢႆႈ ၶေႃႈမုၼ်း `style` ၼၼ်ႉၵွႆး။ ၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` ၽူႈပႂ်ႉတူၺ်းလွင်ႈလႅၵ်ႈလၢႆႈသၼ်ႇထေႇ	`true`	ႁႃႁၼ်လွင်ႈလႅၵ်ႈလၢႆႈ ၶေႃႈမုၼ်း `class` ၶွင် ၶူဝ်းၶွင်လုၵ်ႈဢွၼ်ႇ (ၶႅပ်းႁၢင်ႈ) တင်းမူတ်း။ ၵဵဝ်ႇၵပ်းလွင်ႈ Filter ။ ၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` ၽူႈပႂ်ႉတူၺ်းလွင်ႈလႅၵ်ႈလၢႆႈသၼ်ႇထေႇ ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.5.0 ၼၼ်ႉယဝ်ႉ။	`true`	ႁႃႁၼ်လွင်ႈလႅၵ်ႈလၢႆႈ `src` ၶွင်ၶႅပ်းႁၢင်ႈၵူႈဢၼ်။ ၵဵဝ်ႇၵပ်းၵၼ် မိူဝ်ႈၸႂ်ႉတိုဝ်းၸွမ်း React ဢမ်ႇၼၼ် ႁူင်းတူၺ်းလိၵ်ႈ ဢၼ်မိူၼ်ၵၼ်။ ၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ၶိုၼ်းမႄးတၢင်းယႂ်ႇၽူႈပႂ်ႉတူၺ်း ၸဵမ်မိူဝ်ႈ ဝႅပ်ႇယၢင်ႇ 2.6.0 ၼၼ်ႉယဝ်ႉ။	`true`	ႁႃႁၼ်လွင်ႈလႅၵ်ႈလၢႆႈ တၢင်းၵႂၢင်ႈ ဢီႇလႅၼ်ႇ။ ၵဵဝ်ႇၵပ်းလွင်ႈ ဢွၵ်ႇၽႅၼ်သၢင်ႈ ဢၼ်တုမ်ႉတွပ်ႇ။ (မိူဝ်ႈပႆႇမီး 2.6.0 ၼၼ်ႉ ၸႂ်ႉတိုဝ်း ၽူႈထွမ်ႇ လွင်ႈလႅၵ်ႈလၢႆႈ တၢင်းယႂ်ႇ ၽၵ်းတူ) ၸၢင်ႈတမ်းဝၢင်းလႆႈ လူၺ်ႈ `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

တႄႇႁဵတ်းလူၺ်ႈမိုဝ်း

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

ယႃႉပႅတ်ႈ ဢိၼ်ႇသတႅၼ်ႇ

ပေႃးလၢတ်ႈၵႂၢင်ႈၵႂၢင်ႈၶႂၢင်ၶႂၢင်ၸိုင် မၼ်းသၢၼ်ၶတ်းၵၼ်တင်း လွင်ႈတႄႇတင်ႈ Gridzy ၼၼ်ႉယဝ်ႉ။

gridzyInstance.destroy();
gridzyInstance = null;

Sync သဵၼ်ႈမၢႆလုၵ်ႈဢွၼ်ႇ လူၺ်ႈမိုဝ်း

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

Sync လုၵ်ႈဢွၼ်ႇ ဢီႇလႅၼ်ႇမႅၼ်ႇ ဢၼ်လဵဝ် လူၺ်ႈမိုဝ်း

ၵမ်ႈၼမ် ဢမ်ႇလူဝ်ႇ လိူဝ်သေ ဢၼ်ဢမ်ႇသူႈပဵၼ်။

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

Sync ၶေႃႈမုၼ်း လူၺ်ႈမိုဝ်း

တီႈတွင်း တွၼ်ႈတႃႇလွင်ႈၼႆႉ တေလႆႈပဵၼ် လွင်ႈလိူၵ်ႈ useOptionAttributes true ။

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

ႁႅင်းၼႄ

ၵမ်ႈၼမ် ဢမ်ႇလူဝ်ႇ ပႅၵ်ႉသမ်ႉဝႃႈ ဢွမ်လူမ်း တင်းမူတ်း ပိၵ်ႉဝႆႉသေတႃႉ

gridzyInstance.render();

ပလၵ်ႉၵိၼ်း ဝွတ်ႉပရႅတ်ႉ

ႁူင်းတူၺ်းလိၵ်ႈၸေႃႇၵျီႇ

ၸွင်းၸေး