Ka jingpynkylla 2.x – Gridzy.Gallery

Ka website ka la pynkylla hi dalade. Lada don kaei kaei kaba ym shai, sngewbha peit ia ki kot ki sla ha ka ktien phareng.

Ka jingpyndonkam ba kongsan

Pynrung ia ki file Gridzy ha ka server jong phi bad pyndap ia ki ha ka website jong phi (kham bunsien ha ka bynta ba khlieh):

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

Pyndap ia u code HTML (ha kano kano ka jaka ha ka bynta jong ka met):

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

Kata ka long! Kata ka long ka nuksa kaba pura. Ym donkam ban pynsdang shuh shuh.

Ka jingpynbeit

Ka rukom kaba suk tam ban pynbeit ia ka Gridzy ka long, ban pyndonkam tang ia ki jinglong jong ka HTML. Phi donkam tang ban pyndap ia ki kyrteng jong ki opshon da data-gridzy- . Te, ban buh ia ka spaceBetween jingjied, tang ban pyndap ia ka jinglong 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>

Ki jingjied ba kongsan

	Ka dor ba la buh lypa	Jingbatai
`animate`	`true`	Ka pynbeit la dei ban pyndonkam ia ki jingpynkylla dur haba ka grid ka kylla (kum ka nuksa, haba pynkylla ia ka window jong u browser lane haba buh ia ka filter).
`layout`	`justified`	Ka batai ia ka jingpynbeit ba la pyndonkam. Ka Gridzy.js 2 ka kyrshan ia ki ar tylli `waterfall` `justified` bapher bapher. Kawei pa kawei na ki ka don la ka jong ka jong ka jingjied ba la pyndap, kiba phi lah ban shem harum jong kane ka table.
`filter`	`*`	Ka pynbeit ia ki dur kiba dei ban pyni. Kano kano ka CSS-selector lah ban pyndonkam kum ka value hangne. Kham bunsien ka set hi dalade lyngba `filterControls` (peit ia ka jingjied kaba bud). Peit ia ki jingpynkhuid
`filterControls`		Ka pynthikna ia ki form element kiba lah ban pyndonkam ban pynkhuid ia ki dur. Kano kano ka CSS selector, kaba jied ia ki element jong ka form HTML, lah ban pyndonkam kum ka value hangne. Peit ia ki jingpynkhuid
`autoConsiderScrollBars`	`true`	Ban tip ia ka jingheh kaba lah ban ioh lada ki scroll bar ki paw ne jah. Ka long kaba bha ban ieh ia ka ha `true` lymda kane ka jingpynkylla hi ka wanrah ia ki jingeh.

Justified jingjied jingpynbeit

	Ka dor ba la buh lypa	Jingbatai
`autoFontSize`	`false`	Ka pynthymmai hi dalade ia ka jinglong jong ka font-size jong kawei pa kawei ka synduk katkum ka jingheh jong ka synduk ba tynrai. Da ka jingpynkylla ia ka jinglong jong ka font-size kam shym la buh shai.
`desiredHeight`	`190`	Ka batai ia ka jingjrong ba kwah jong ki lain element. Ia ka jingjrong ba shisha yn khein katkum ka jingheh kaba don bad ki element ha ka row.
`hideOnMissingImage`	`true`	Ka buhrieh ia ki synduk kiba don ki dur ki bym lah ban load.
`spaceBetween`	`4`	Ka batai ia ka jingjngai hapdeng ki element ha ki pixel.
`lastRowAlign` naduh ka dur 2.3.0.	`justified`	Ka batai ia ka jinglong jong ka row kaba khatduh. Ki jingkhein ba la shah ki long `left` , `center` , `right` bad `justified` .
`singleRowAlign` naduh ka dur 2.3.0.	`justified`	Ka batai ia ka jinglong lada don tang kawei ka row kaba marwei. Ki jingkhein ba la shah ki long `left` , `center` , `right` bad `justified` .
~~`fillLastRow`~~ ~~naduh ka dur 2.1.0.~~	~~`true`~~	LA weng noh naduh ka jingpynkylla 2.4.0. (LA pynduh noh naduh ka jingpynkylla 2.3.0 ) Ka pynbeit ia ki dur khnang ba ka row kaba khatduh kan dap pura beit. Lada phi thmu ban pyndap ia ki dur da kaba pynkylla, ka lah ban long ka jingmut kaba bha ban pynduh ia kane. Ka shim ia ka jingktah ha ki lain ba marwei (peit `fillSingleRow` ).
`fillSingleRow` naduh ka dur 2.1.0.	~~`true`~~	LA weng noh naduh ka jingpynkylla 2.4.0. (LA pynduh noh naduh ka jingpynkylla 2.3.0 ) Lada don tang kawei ka lain, ka pynbeit ia ki dur khnang ba ka lain kan dap pura beit. Lada ka lah ban jia ba phi don tang kawei ne ar tylli ki dur ha ka gallery, ka lah ban long kaba bha ban pynduh ia kane.

Waterfall jingpynbeit

	Ka dor ba la buh lypa	Jingbatai
`autoFontSize`	`false`	Ka pynthymmai hi dalade ia ka jinglong jong ka font-size jong kawei pa kawei ka synduk katkum ka jingheh jong ka synduk ba tynrai. Da ka jingpynkylla ia ka jinglong jong ka font-size kam shym la buh shai.
`desiredWidth`	`250`	Ka batai ia ka jingheh jong ki column ba la kwah. Ia ka jingheh ba shisha yn khein katkum ka jingheh kaba don bad ka jingbun jong ki column.
`hideOnMissingImage`	`true`	Ka buhrieh ia ki synduk kiba don ki dur ki bym lah ban load.
`horizontalOrder`	`false`	Ka batai ba ia ki element la buh thikna kawei ka element ha kawei pa kawei ka tduh na ka liang kadiang sha ka liang kadiang, nangta ka sdang biang ha ka tduh kaba sha kadiang tam kaba laitluid ha kano ka tduh ka kham don jaka. Da ka jingpynbeit ia ki element yn buh beit ha ka column kaba don ka jingjrong kaba rit tam.
`spaceBetween`	`4`	Ka batai ia ka jingjngai hapdeng ki element ha ki pixel.
`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`.

Ki jingjied kiba kham shajrong

Na ka bynta ki jingjied kiba kham bniah, peit ia ka API .

HTML ba iadei bad ka jingmut

Ka jingpynbeit HTML kaba suk tam jong ka Gridzy ka long kumne:

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

Hynrei ka Gridzy ka long kaba jem bha bad phi lah ban pyndonkam la jan man la ka rukom shna HTML. Ki don tang katto katne ki mat ban pyrkhat:

Uwei pa uwei u khun jong u element ba buh u pyni ia kawei ka item ha ka grid.
Baroh ar ki element ba buh bad ki khun jong ki ki lah ban long kano kano ka jait tag, kum ul bad li (tangba pyrkhat ban pynbeit biang ia ki jingpynbeit jong u browser).
Lada ka img element kam dei ka khynnah ba beit hi, ka donkam ia ka klas gridzyImage .

Te kane ka dei ruh ka jingpynbeit HTML kaba treikam:

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

Khamtam lada ngi kwah ban pynrung ia ki jingthoh, ngi donkam ia ka jingpynbeit HTML kaba kham tbit. Ban tip kham bniah shaphang jong ka, peit ia ki jingthoh & ki sniehdoh .

Ki jingthoh bad ki sniehdoh

Lada phi kwah ban pynrung ia ki jingthoh ha ka gallery jong phi, phi donkam ban batai ia ka dur. Namarkata, katto katne ki skin ba la buh lypa ki don. Kawei pa kawei ka sniehdoh kaba don ia ka file CSS. Phi donkam ban pyndap ia kane ka file nalor ki file Gridzy ba kongsan (kham bunsien ha ka bynta ba kongsan):

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

Shuh shuh phi donkam ia ka jingpynbeit HTML kaba kham tbit:

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

Lada phi sngew lyngngoh shaphang ka rukom shna ia ka HTML, peit ia ka Semantic HTML .

Na ka bynta ka jingthoh phi lah ban pyndonkam kano kano ka jait tag, tangba pynthikna ba ka don ia ka klas gridzyCaption . Ka img ka donkam ia ka klas gridzyImage .

Ka nuksa haneng ka pyni ia ngi ia ka gridzySkinClassic . Ban pyndonkam da kawei pat, tang ban bujli ia ka kyrteng jong ka sniehdoh da kawei na kine:

Ki sniehdoh ba la kynthup lang

	Ki klas ba lah ban ioh
ka sniehdoh kaba thylli ka jaka sdang kaba bha ban thaw ia la ka jong ka sniehdoh . ka jingpeit lypa	`gridzySkinBlank`
gridzySkinClassic ka jingpeit lypa	`gridzySkinClassic` `gridzySkinClassicLight`(LA pynduh noh naduh ka jingpynkylla 2.6.0)
gridzySkinFullOverlay ka jingpeit lypa	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(LA pynduh noh naduh ka jingpynkylla 2.6.0)
gridzySkinLift ka jingpeit lypa	`gridzySkinLift` `gridzySkinLiftLight`(LA pynduh noh naduh ka jingpynkylla 2.6.0)
gridzySkinMagnifier ka jingtreikam jong ka zoom kam shym la kynthup ka jingpeit lypa	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(LA pynduh noh naduh ka jingpynkylla 2.6.0)

Baroh ki skin ba la kdew haneng ki donkam tang ia ka CSS file, hynrei ki don kiwei pat ki skin kiba donkam ruh ia ka JavaScript file:

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

	Ki klas ba lah ban ioh
gridzySkinBlur kam treikam ha ka IE . ka jingpeit lypa	`gridzySkinBlur` `gridzySkinBlurLight`(LA pynduh noh naduh ka jingpynkylla 2.6.0)
gridzySkinCard ka jingpeit lypa	`gridzySkinCard` `gridzySkinCardLight`(LA pynduh noh naduh ka jingpynkylla 2.6.0)

Ki jingjied jong ka sniehdoh

Naduh ka version 2.6.0 ki don ki Options ban pynbeit ia ki skin ba la buh hapoh. Katkum ka skin kaba kyrpang phi lah ban set ia ka rong ba shadien, ka rong jong ka jingthoh bad ka jingshai jong ka jingthoh. Phi shu hap ban pyndonkam ia ki jinglong ba kyrpang jong ka CSS kumba phi lah ban iohi hangne:

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

Peit ia ki variable ba la kyrshan bad ki jingkhein ba la buh lypa na ka bynta kawei pa kawei ka sniehdoh hangne:

gridzySkinClassic

Jingkylla	Ka dor ba la buh lypa	Jingtip
`--background`	`rgba(0, 0, 0, .7)`	ka ailad ia kano kano ka jinglong ba shadien jong ka CSS
`--color`	`rgb(255, 255, 255)`	Ka ailad ia kano kano ka dor jong ka rong CSS
`--text-shadow`	`none`	Ka ailad ia kano kano ka dor jong ka jingthoh-jingshai jong ka CSS

gridzySkinFullOverlay

Jingkylla	Ka dor ba la buh lypa	Jingtip
`--background`	`rgba(0, 0, 0, .7)`	ka ailad ia kano kano ka jinglong ba shadien jong ka CSS
`--color`	`rgb(255, 255, 255)`	Ka ailad ia kano kano ka dor jong ka rong CSS
`--text-shadow`	`none`	Ka ailad ia kano kano ka dor jong ka jingthoh-jingshai jong ka CSS

gridzySkinLift

Jingkylla	Ka dor ba la buh lypa	Jingtip
`--background`	`rgba(0, 0, 0, .7)`	ka ailad ia kano kano ka jinglong ba shadien jong ka CSS
`--color`	`rgb(255, 255, 255)`	Ka ailad ia kano kano ka dor jong ka rong CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	Ka ailad ia kano kano ka dor jong ka jingthoh-jingshai jong ka CSS

gridzySkinMagnifier

Jingkylla	Ka dor ba la buh lypa	Jingtip
`--background`	`rgba(0, 0, 0, .7)`	ka ailad ia kano kano ka jinglong ba shadien jong ka CSS
`--color`	`rgb(255, 255, 255)`	Ka ailad ia kano kano ka dor jong ka rong CSS

Kane ka sniehdoh kam kyrshan ia --text-shadow

gridzySkinBlur

Jingkylla	Ka dor ba la buh lypa	Jingtip
`--background`	`rgba(0, 0, 0, .7)`	ka ailad ia kano kano ka jinglong ba shadien jong ka CSS
`--color`	`rgb(255, 255, 255)`	Ka ailad ia kano kano ka dor jong ka rong CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	Ka ailad ia kano kano ka dor jong ka jingthoh-jingshai jong ka CSS

gridzySkinCard

Jingkylla	Ka dor ba la buh lypa	Jingtip
`--background`	`rgba(0, 0, 0, 1)`	ka ailad ia kano kano ka jinglong ba shadien jong ka CSS
`--color`	`rgb(255, 255, 255)`	Ka ailad ia kano kano ka dor jong ka rong CSS
`--text-shadow`	`none`	Ka ailad ia kano kano ka dor jong ka jingthoh-jingshai jong ka CSS

Baroh ki skin ba la buh lypa ki kyrshan tang ia ki jingthoh ba suk. Phi lah ban thaw ia ki sniehdoh kiba kham jylliew bad kiba kham jylliew. Sngewbha peit ia ka Style Gridzy .

Ka rukom shna

Lada ym don ka sniehdoh ba la buh lypa kaba iadei bad ki jingdonkam jong phi, phi lah ban style ia la ka jong.

Ka lad kaba suk tam ka long ban copy nyngkong ia ka sniehdoh kaba la don lypa bad pynbeit ia ka katkum ka jingdonkam jong phi. Ka gridzySkinBlank ba la buh lypa kan ai ia ka nongrim kaba bha bad kumjuh ruh ia ka jingthoh kaba bha ha ka file 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;
}

Ha ka CSS file phin shem ia ki klas gridzySkinBlank , gridzyImage bad gridzyCaption . Ka Gridzy hi kam donkam ia kine ki klas. Ki pyndonkam tang na ka bynta ban style bad kumta phi lah ban weng ne pynkylla kyrteng ia ki lada phi kwah.

Nalor kata phin shem ia ka CSS klas gridzyItem . Ka Gridzy ka buh ia kane ka klas hi dalade sha baroh ki khun ba beit jong ka element ba kongsan jong ka jingbuh. Te, phi lah ban pyndonkam ia kane ka class ban style ia ki tiar jong ka gallery jong phi.

Pyrkhat ia kiei kiei kiba kongsan

Ki jingdon jong ka item ki dei ban long kiba pura. Pyrkhat ba ka jingheh jong ki element kan sa kylla thikna. Pyndonkam ia ki jingkhein percentage ha ka jaka jong ki jingkhein pixel. Bad peit ia ka jingjied jong ka jingpynbeit jong ka Gridzy autoFontSize , kaba pyniasoh ia ka jingheh jong ki dak ha ka jingheh jong ka synduk item.
Kawei pa kawei ka tiar ka dei ban don ka jingthew kaba la buh bha. Ka jinglong jong ka item kan ym kylla satia bad ka donkam ban khein ia ka grid. Kumta lada ka item kam don hi dalade ia ka aspect ratio kaba la pynbeit bha, pynbeit lypa ia ka da ka kti (kum lyngba ka css).

Ha ki katto katne ki khep, ka lah ban kham suk ban style ia ka jingdon jong ki tiar shwa ba u Gridzy un sdang. Tang shu weng ia ka class gridzy lane ka file javascript Gridzy shipor na ka bynta kane.

Kata ka long! Kata ka long kaba donkam ban tei ia la ka jong ka sniehdoh. Kiba bun ki skin ba la buh lypa kim pyndonkam kham bun ban ia kane.

Hynrei ki lah ban don shuh shuh lada phi kwah ...

Ki sniehdoh ba la nang kiew

Ka Gridzy ka pyndonkam bun ki klas CSS ban ia kaba pyndonkam tang ia gridzyItem . Kiba bun na ki kin sa set hi dalade bad phi lah ban pyndonkam ia ki na ka bynta ban styling ruh.

Ki klas jong ki kontena ba kongsan

Kyrteng klas	Jingbatai
`gridzy` ban set da ka kti	U Gridzy u wad hi dalade ia ki elements kiba don ia kane ka class bad u initial ia ki.
`gridzyAnimated`	Kan sa set hi dalade lada ka opshon `animate` ka `true` . Lada ia kane ka klas la buh da ka kti, ka opshon `animate` kan ioh hi dalade ia `true` ruh (lait noh lada la buh shai ia ka sha ka `false` ).

Ki klas jong ki tiar

Kyrteng klas	Jingbatai
`gridzyItem`	Kan sa set tang shu sdang ka item ia ka jingtreikam jong ka jingsdang. Yn ym lah ban pynduh noh satia.
`gridzyItemInitializing`	Kan sa set tang shu sdang ka item ia ka jingtreikam jong ka jingsdang. Yn bujli da ka `gridzyItemReady` mar ia dep pynsdang pura ia ka item. Ka mut ym ba ki dur ki la dep pyndap pura (peit `gridzyItemLoading` ), hynrei ka item ka la pynkhreh ban ioh ia ka jingshai.
`gridzyItemReady`	Kan bujli ia ka jingsdang `gridzyItemInitializing` tang shu sdang pura ia ka item. Yn ym lah ban pynduh noh satia. Ka mut ba ki dur ki la pyndap pura (peit `gridzyItemComplete` ), hynrei ka item ka la pynkhreh ban ïohi.
`gridzyItemLoading`	Kan sa set tang shu sdang ka item ia ka jingtreikam jong ka jingsdang. Yn bujli da ka `gridzyItemComplete` mar ia dep pyndap pura ia ki dur ba don hapoh (kham bunsien tang kawei).
`gridzyItemComplete`	Kan bujli ia `gridzyItemLoading` mar ia dep pyndap pura ia ki dur ba don hapoh (kham bunsien tang kawei). Yn ym lah ban pynduh noh satia.
`gridzyItemInitialToVisible`	Yn set tang shu sdang ban paw ka item ha ka sien kaba nyngkong. Yn weng noh ynda la iohi pura ia ka tiar.
`gridzyItemVisible`	Yn set ynda la iohi pura ia ka item. Yn weng noh tang shu sdang ban jah noh ka tiar.
`gridzyItemVisibleToHidden`	Yn set tang shu sdang ban jah noh ka item. Yn weng noh tang shu la buhrieh pura ia ka tiar.
`gridzyItemHidden`	Yn set tang shu la buhrieh pura ia ka item. Yn weng noh tang shu sdang ban paw ka item.
`gridzyItemHiddenToVisible`	Yn set tang shu sdang ban paw ka item (lait noh tang haba paw ha ka sien kaba nyngkong – peit ia ka klas `gridzyItemInitialToVisible` ban paw ). Yn weng noh ynda la iohi pura ia ka tiar.
`gridzyItemVisibleToVisible`	Yn set tang shu kylla kaei kaei ha ka grid, hynrei ka item hi ka la long bad kan sah ha ka jingshai. Yn weng noh tang shu dep ka jingpynkylla dur.

Da ka jingpynkylla ia ka jingtreikam bad ki jingpynkylla na ka bynta ki dur kiba paw bad kiba jah la pynbeit lypa da ka file CSS ba kongsan jong ka Gridzy.

Da kine ki CSS class ba la kdew haneng phi lah ban style ia la ka jong ka jingpyni ia ka rukom treikam bad ki jingpynkylla dur. Dare ban peit shapoh ka file CSS ba kongsan jong ka Gridzy, ban sngewthuh ia kaei kaba phin hap ban pynkylla. Ym don jingtieng, baroh la thoh bha hangta.

Pynbha ia ka jingpynrung

Lada phi pyndonkam bun ki dur, ka lah ban long ka jingmut kaba bha ban iarap ia u Gridzy ban shna ia ka grid kham kloi.

Pynsangeh ia ki dur ba jngi

Ka Gridzy ka donkam shisha ia ka jinglong jong ki dur baroh ban khein ia ka grid. Kine ki jingshisha ki pynmih ia ki element kiba jngi lada don ki dur kiba la pynkhreh bad kiwei pat kim long kiba la pynkhreh. Katba nang bun ki dur, katta kane ka jingktah ka lah ban pynsngewsih.

Ban iada na kane ka jinglong, shu buh ia ki jinglong jong width bad height na ka bynta baroh ki element img . Ka long kaba donkam ban buh ia ki value kiba dei na ka bynta kawei pa kawei ka dur, lym kumta ki dur kin sa kylla dur. Ki values kiba dei ki dei ka jingheh bad jingjrong ba tynrai jong ka dur bapher bapher:

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

Hadien kata u Gridzy u lah ban khein ia ka grid mardor khlem da donkam ban tip ia ki jingheh ba shisha jong ki dur.

Ka jingpynrung kaba jem

Ban load tang ia ki dur kiba don ha ka viewport ba lah ban iohi, tang ban bud ia kine ki step:

Pynrung ia ki jinglong jong width bad height kumba la batai haneng (pynthikna ban pyndonkam ia ki value kiba dei)
Pynkylla ia baroh ki jinglong src da data-gridzylazysrc kumba la pyni harum (lada phi don ia ki jinglong srcset kumjuh, pynkylla ia ki da 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>

Hadien kine ki step ki dur kin sa load mar ia don hajan lane hapoh ka viewport.

Ka jingpyni ia ka rukom treikam

Ka process indicator ka dei ka icon ba rit ba la pynkylla dur kaba paw katba ka dur ka dang load. Lada phi pyndonkam da ki jingthoh & ki sniehdoh , ka jingpynpaw ia ka jingtreikam kan sa paw hi dalade. Lym kumta phi donkam katto katne ki jingpynbeit:

Pynrung ia kawei pa kawei ka img ha ka div .
(lane sha kano kano kawei pat ka bynta – peit ia ka HTML ba kham bniah)
Pyndap ia ka klas gridzyImage ha kawei pa kawei ka bynta 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>

Hadien kata phi dei ban iohi ia ki dak jong ka process lada ki dur ki shim por ban load.

Ki jingpynkhuid

Ki filter ha ka Gridzy ki long kiba suk bha hynrei kiba donbor. Wat la ka long kano kano ka jait filter kaba phi donkam, ka long kaba lah bha ba kan long kaba lah ban pynurlong. Baroh kaba phi donkam ka long, khyndiat ka CSS bad katto katne ki bynta jong ka HTML ...

Hangne ka don ka nuksa ba treikam:

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

To Ngin Tei ia ka Step da ka Step .

1. Nyngkong ngi donkam ia ka rukom shna HTML ba ju long jong ka Gridzy bad buh ia ki kyrteng klas na ka bynta baroh ki tiar jong ka gallery khnang ba ngin lah ban filter ia ki hadien .

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

Ha kane ka nuksa ngi pyndonkam tang kawei ka class na ka bynta kawei pa kawei ka element. Hynrei phi lah ruh ban buh bun tylli ki class na ka bynta kawei ka element, lada kata ka element ka dei ban long kaba lah ban shem lyngba bun tylli ki filter.

2. Nangta ngi pyndap katto katne ki button lyngba jong ki ngi lah ban pynkylla ia ki filter nangta .

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

Ha ka jaka jong ki button, phi lah ruh ban pyndonkam da kiwei pat ki form kum ki synduk check, ki button radio, ki jaka jied bad kiwei kiwei.

Kumba phi lah ban iohi, ki value jong ki button ki dei ki jingjied CSS ba ju pyndonkam. Mar ia dep, da kaba nion ha kum une u button kan pyni ia ki dur kiba iadei bad uta u CSS selector. Ha ka jingstad ka shu buh ia ka jingjied filter ha kane ka dor.

Phi lah ruh ban pyndonkam da ki nongjied kiba kham jylliew shibun. Kum ka nuksa :not(.animals) kan treikam ruh, kumjuh ruh .animals.people bad .animals, .people .

3. Khatduh eh, ngi thep ia ki button ha ka div container bad teh ia ki ha ka Gridzy gallery, da kaba set ia ka opshon 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>

Kumba phi lah ban iohi, ngi pyndonkam ruh ia ka CSS selector na ka bynta ka option filterControls . Ka div kaba don ia ka jinglong id ka shakri tang ban pynsuk ia ki button ban jied lyngba uta u nongjied CSS.

Kata ka long!

Lada phi kwah ia ka jingpynbeit jong ka Java, peit ia ka API .

API

Watla ka Gridzy ka don la ka jong ka API, hynrei bunsien lah ban leh khlem ma ka, tang da kaba pynkylla ia ka DOM. Ka Gridzy kan sa peit ia ka bad kan pynbeit ia ka grid. Hynrei ka don ruh ka API kaba khlain bha ...

Ka jingpynkylla ia ka DOM

Na ka bynta baroh ki jingpynkylla ia ka dur jong ki jingthoh (DOM) ngi donkam nyngkong eh ia ka bynta jong ka jingbuh:

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

Pynrung ia ki dur

Ka long kaba donkam ban shna bad pyndap pura ia ka element khynnah ba thymmai shwa ba phin pynrung ia ka ha ka element container. Lym kumta u Gridzy um lah ban lap ia ki jingthew kiba dei.

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

Pynduh ia ki dur

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

Pynkylla ia ki jingjied

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

Ki jingtip ba kham bniah shaphang ka jingpynkylla ia ka DOM phi lah ban shem ha ki kot web jong ka MDN . Ka don ruh ka jingpynrung ia ka DOM kaba lah ban ioh.

API jong ka jinglong trai

Ban pyndonkam ia ka API, ngi donkam nyngkong ia ka nuksa jong ka Gridzy, kaba la pyniasoh bad ka bynta jong ka Gridzy:

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

Ioh ia ka jingjied

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

Ioh ia baroh ki jingjied

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

Set ia ki jingjied

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

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

Pyndonkam ia ka jingpynkhuid

Ka jingpyndonkam ia ka filter ka long tang ban buh ia ka filter jong ka jingjied kaba lah ban long kano kano ka jingjied CSS kaba biang:

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

Pyndap ia ki kam khot biang

LA pynduh noh naduh ka jingpynkylla 2.4.0.
Pyndonkam ia ki Events kiba mynta bad kiba kham jem ha ka jaka jong ki. Peit ia ka bynta kaba bud na ka bynta ki jingtip ba bniah.

~~Ka Gridzy.js 2 ka kyrshan ia ki katto katne ki jingjied na ka bynta ki jingtreikam ba khot biang. Lah ban set tang lyngba ka API ba la buh kyrpang, hynrei kumjuh kum kiwei pat ki opshon:~~

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

	~~Jingbatai~~
~~`onBeforeOptionsChanged`~~	~~Ka jingtreikam jong ka callback kaba la khot beit shwa ban buh ia ki opshon.~~
~~`onOptionsChanged`~~	~~Ka jingtreikam jong ka callback kaba la khot beit hadien ba la buh ia ki opshon.~~
~~`onBeforeRender`~~	~~Ka jingtreikam jong ka callback kaba la khot beit shwa ban pynwandur.~~
~~`onRender`~~	~~Ka jingtreikam jong ka callback kaba la khot beit hadien ba la dep pynkylla.~~

Pyndonkam ia ki jingjia

naduh ka dur 2.4.0.

Phi lah ban pyndonkam ia ki jingjia jong ka Gridzy thik kum ki jingjia jong ka JavaScript ba ju pyndonkam:

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

Katto katne ki jingjia ki shah pynbthei ha ka bynta jong ka Gridzy bad kiwei pat ki jingjia ki shah pynbthei ha ki bynta jong ki marwei marwei hapoh ka bynta jong ka jingbuh.

Ki jingjia ba la pynbthei ha ka bynta jong ka Gridzy:

	Jingbatai
`gridzyBeforeInit`	Ki jingpluh shwa ban sdang ia ka galeri.
`gridzyInit`	Ki jingpluh hadien ka jingpynsdang ia ka galeri.
`gridzyBeforeOptionsChanged`	Ki jingpynbthei shwa ban buh ia ki opshon.
`gridzyOptionsChanged`	Ki jingpynbthei hadien ba la buh ia ki opshon.
`gridzyBeforeRender`	Ki ding shwa ban pynwandur.
`gridzyRender`	Ki ding hadien ba la pynwandur.

Lada phi lait na kino kino ki jingïalang hangne, sngewbha phah ïa ka jingkyrpad jingkyrshan .

event.target ka ai ia ka bynta jong ka Gridzy.
event.detail.instance ka ai ia ka jingjia jong ka Gridzy.

Ki jingjia ba la pynmih ha ki bynta:

	Jingbatai
`gridzyItemBeforeInit`	Ki ding shwa ban sdang ia ka item.
`gridzyItemInit`	Ki ding hadien ka jingpynsdang ia ka item.
`gridzyItemLoading`	Ka jingpynbthei haba ka item ka sdang ban load.
`gridzyItemReady`	Ka ding ynda ka tiar ka la pynkhreh na ka bynta ka jingkhein grid. Kumta la tip ia ka aspect ratio, hynrei ka dur ka lah ban dang load.
`gridzyItemComplete`	Ka jingpynbthei haba ka dur jong ka item ka la dep pyndap pura.

Lada phi lait na kino kino ki jingïalang hangne, sngewbha phah ïa ka jingkyrpad jingkyrshan .

event.target ka ai ia ka bynta jong ka item.
event.detail.instance ka ai ia ka jingjia jong ka Gridzy.

API – Pyrthei

Don katto katne ki function kiba long laitluid na ki jingjia jong ka Gridzy. Kumta ngim donkam ban ioh instance shwa.

Ioh ia ka jingjied ba la buh lypa

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

Ioh ia baroh ki jingjied ba la buh lypa

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

Set ia ki jingjied ba la buh lypa

Kane kam buh ia ki opshon jong baroh ki jingjia Gridzy ba la dep sdang, hynrei ka batai ia ka nongrim na ka bynta ki jingjia ba thymmai. Hynrei, lada ka jingjied jong ka instance kaba la don lypa kan shah pynthymmai lyngba ka dor null , kan pyndonkam ia ka dor ba thymmai ba la buh.

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

Phi lah ban pyndonkam ia kane ban buh ia ki opshon ha ka pyrthei baroh kawei, lada phi khot ia ka shwa ba ka DOM kan long kaba la pynkhreh. Kumta phin ym donkam shuh ban buh ia ki opshon kum ki jinglong.

Ki jingtrei hi

Katba baroh ki jingtreikam jong ka Gridzy.js 2 ki dang treikam, ym donkam ia ki rukom ba la kdew harum. Hynrei ia ki jingpynkylla lah ban pynlip ban pyndonkam ia ka Gridzy ha ka rukom kaba kham tynrai:

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

Katto katne na kine ki jingjied kim lah ban buh lyngba ki jinglong data-gridzy- lane lyngba setOptions() , namar ki daw kiba thikna:

	Ka dor ba la buh lypa	Jingbatai
`autoInitOnDomReady`	`true`	Ka lap ia ki element kiba don ka klas `gridzy` ha ka jingrung jong ka page bad pynsdang ia ki. Lah ban pynbeit lyngba `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` U nongpeit ia ka jingkylla	`true`	Ka lap ia ki element bathymmai ryngkat bad ka class `gridzy` tang mar ia paw ha ka DOM bad pynsdang ia ki. (kum ka jingpyndonkam ia ki jingkylla page) Lah ban pynbeit lyngba `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` U nongpeit ia ka jingkylla	`true`	Ka lap lada ki khynnah (ki dur) ki shah pynrung ne weng, bad ka pynthymmai ia ka grid hi dalade. Lah ban pynbeit lyngba `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Ka batai lada ki jinglong `data-gridzy-` ki long kiba la pyndonkam kyllum ne em. Lada kane ka long `false` lah ban set ia ki opshon tang lyngba ka API ba la shna kyrpang. Lah ban pynbeit lyngba `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` U nongpeit ia ka jingkylla	`true`	Ka lap ia ki jingkylla jong ki jinglong `data-gridzy-` , bad pynthymmai ia ka grid hi dalade. Kumjuh ruh lada ka `gridzyAnimated` class ka la pyndap ne weng bad lada ki jingkylla `style` ki jia. Lada `useOptionAttributes` ka dei `false` , ka lap tang ia ki jingkylla `style` attribute. Lah ban pynbeit lyngba `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` U nongpeit ia ka jingkylla	`true`	Ka lap ia ki jingkylla jong ki jinglong `class` jong baroh ki khynnah (ki dur). Ka jingiadei ha kaba iadei bad ki filter. Lah ban pynbeit lyngba `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` U nongpeit ia ka jingkylla naduh ka dur 2.5.0.	`true`	Ka lap ia ki jingkylla jong ki jinglong `src` jong baroh ki dur. Ka iadei haba pyndonkam bad ka React lane ki library kiba kum kita. Lah ban pynbeit lyngba `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Pynkylla ia ka jingheh jong u nongpeit naduh ka dur 2.6.0.	`true`	Ka pynpaw ia ki jingkylla jong ka jingheh jong u element. Ka jingiadei ha kaba iadei bad ka jingpynwandur kaba sngewthuh. (Shwa ia ka dur 2.6.0 la pyndonkam ia u nongsngap ia ki jingjia ban pynkylla ia ka jingheh jong ka jingkhang) Lah ban pynbeit lyngba `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Pynsdang da ka kti

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

Pynjot ia ka jingjia

Da kaba ong, ka jingpyrshah ia ka jingpynsdang ia u Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Pynbeit ia ka thup jong ki khynnah da ka kti

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

Pyniasoh ia kawei ka bynta jong u khynnah da ka kti

Kham bunsien ym donkam, lait noh tang ha ki khep kiba duna bha.

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

Sync ia ki jinglong da ka kti

Kynmaw ba ka jingjied useOptionAttributes ka dei ban long true na ka bynta kane.

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

Ka jingpynpaw bor

Kham bunsien ym donkam, wat lada baroh ki jingpyntreikam hi la pynlip .

gridzyInstance.render();

Plugin

JavaSkript Laibrari

Ka jingpyntreikam

Ka dur 2.x