Ewe kinikin 2.x – Gridzy.Gallery .

Ewe website a fen fis fan eu chok. Ika pwe mei wor met ese fat, kose mochen kopwe nengeni ewe taropwen English.

Ewe Popun Angangen

Kopwe angei ekkewe taropwen Gridzy ngeni noumw we server me apacha ngeni noumw we website (fan chommong non ewe kinikinin mokuren):

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

Kopwe apacha ngeni ewe HTML code (ekkewe neni non ewe kinikinin inis):

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

Ina met! Ina eu awewe mi unusen angangoch. Ese wor ekkoch inis mi lamot.

Konfigurasi

Ewe aan mi mecheres ne fori Gridzy ina, ne chok aea ekkewe napanapen HTML. Kopwe chok makkei ekkewe iten ekkewe kefil ren data-gridzy- . Iwe, ren om kopwe seti ewe kefil spaceBetween , kopwe chok apachalong ewe lapalap 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>

Ekkewe Kefil mi Lamot

	Ewe auchean	Tichchikin porousan
`animate`	`true`	A finata ika pwe ekkewe animation repwe aea nupwen ewe grid a siwin (awewe chok, nupwen ka siwini ukukun ewe nenien anapanap ika nupwen ka seti ew filter).
`layout`	`justified`	A affata ewe kokkot mi aea. Gridzy.js 2 a anisi ekkewe ruu sokkun kokkot `justified` me `waterfall` . Emon me emon neir mei wor an kewe pisekin pwarata, minne ka tongeni kuna fan ei tebol.
`filter`	`*`	A affata menni sasing epwe pwa. Ew me ew CSS-chon finata epwe tongeni aea usun auchean ikei. Fan chommong a fis ren `filterControls` (nengeni ewe kefil mwirin). Cheki ekkewe Filter .
`filterControls`		A affata menni ekkewe pisekin form epwe tongeni aea ne filter ekkewe sasing. Emon me emon chon finata CSS, ewe chon finata ekkewe pisekin HTML, epwe tongeni aea pwe auchean ikei. Cheki ekkewe Filter .
`autoConsiderScrollBars`	`true`	Ren an epwe affata ewe ukukun mi kawor ika ekkewe scroll bar repwe pwa are morono. Fansoun meinisin a pwung ach sipwe likiti won `true` ika pwe ei otot ese efisata osukosuk.

Justified Ekkewe Kefil

	Ewe auchean	Tichchikin porousan
`autoFontSize`	`false`	A pwisin siwini ewe pisekin font-size non ew me ew ekkewe box anongonong won ewe popun sais. Ren enletin ewe pisekin font-size ese ffat.
`desiredHeight`	`190`	A affata ewe tekian ekkewe row mi mochen. Ewe wesewesen tekia epwe kawor anongonong won ewe ukukun mi kawor me ekkewe pisek non ewe row.
`hideOnMissingImage`	`true`	A kan ffér ekkewe box mi wor sasing lón rese tongeni ffér.
`spaceBetween`	`4`	A affata ewe towaw nefinen ekkewe pisek non pixel.
`lastRowAlign` seni ewe kinikin 2.3.0.	`justified`	A affata ewe fofforun ewe row. Ekkewe minen mumuta ra nomw `left` , `center` , `right` me `justified` .
`singleRowAlign` seni ewe kinikin 2.3.0.	`justified`	A affata ewe foffor ika pwe mei wor ew chok row. Ekkewe minen mumuta ra nomw `left` , `center` , `right` me `justified` .
~~`fillLastRow`~~ ~~seni ewe kinikin 2.1.0.~~	~~`true`~~	A CHOK ANGANG seni ewe kinikin 2.4.0. (A EKKEWE CHON ANGANG seni ewe kinikin 2.3.0 ) A akkota ekkewe sasing pwe ewe amuchunon row epwe unusen uren fansoun meinisin. Ika ka ekiekin apacha ngeni ekkewe sasing mi manaman, epwe tongeni eu ekiek mi murinno om kopwe deactivate ei. Ese wor eu minen eppet won ekkewe row (nengeni `fillSingleRow` ).
`fillSingleRow` seni ewe kinikin 2.1.0.	~~`true`~~	A CHOK ANGANG seni ewe kinikin 2.4.0. (A EKKEWE CHON ANGANG seni ewe kinikin 2.3.0 ) Ika a wor eu chok row, a akkota ekkewe sasing pwe ewe row epwe unusen ur fansoun meinisin. Ika epwe tongeni fis pwe epwe wor ew chok ika ruu sasing non ewe galeri, epwe tongeni ew ekiek mi och kopwe deactivate ei.

Waterfall Ekkewe kefil ren kokkot

	Ewe auchean	Tichchikin porousan
`autoFontSize`	`false`	A pwisin siwini ewe pisekin font-size non ew me ew ekkewe box anongonong won ewe popun sais. Ren enletin ewe pisekin font-size ese ffat.
`desiredWidth`	`250`	A affata ewe mochenin ekkewe kolun. Ewe wesewesen ukukun epwe kawor anongonong won ewe ukukun mi kawor me ewe chochon ekkewe kolun.
`hideOnMissingImage`	`true`	A kan ffér ekkewe box mi wor sasing lón rese tongeni ffér.
`horizontalOrder`	`false`	A affata pwe ekkewe pisek ra nomw strictly ew kinikin non ew me ew ekkewe kinikin seni eor ngeni epek, iwe a poputa sefan non ewe kinikin mi kon epek ese nifinifin non menni kinikin a nap nenian. Ren default ekkewe pisek repwe chok nom non ewe kolun ren ewe kukkun tekian.
`spaceBetween`	`4`	A affata ewe towaw nefinen ekkewe pisek non 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`.

Ekkewe Pwal Ekkoch Kefil mi Murinno .

Ren pwan ekkoch tufich, nengeni ewe API .

HTML mi wewe ngeni

Ewe HTML mi mecheres seni meinisin ren Gridzy ina ei:

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

Nge, Gridzy a fokkun fitikoko me ka tongeni aea arapakan meinisin ekkewe ekkoch HTML mi fis. Mei wor ekkoch chok mettoch sipwe ekieki ussun:

Ew me ew semiritin ewe kinikinin konten a wewe ngeni ew pisek non ewe grid.
Iir me ruu ewe kinikinin kontein me noun kewe ra tongeni ew sokkun tag, usun ul me li (kopwe chok ekieki om kopwe reset ekkewe kokkotun browser).
Ika pwe ew pisekin img esapw ew semirit mi wenechar pwisin, a namwot ewe klas gridzyImage .

Iwe iei pwan ew angangen 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>

Awewe chok ika ka mochen apachalong ekkewe kapas, mi lamot ngonuk eu kokkotun HTML mi murinno. Ren om kopwe sinei usun, nengeni ewe Kapwun & Skins .

Kapwun & Skin

Ika ka mochen apachalong ekkewe kapasen awewe ngeni om we galeri, mi lamot kopwe affata ewe lapalap. Ina popun, ekkoch skin mi fen affat me mwan ra kawor. Ew me ew ekkewe skin a wor ew CSS file. Mi namwot kopwe apacha ei file non ekkewe file Gridzy mi nap (fan chommong non ewe kinikinin mokuren):

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

Pwal och, a lamot ngonuk eú kókkótun HTML mi múrinné:

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

Ika ka ekieki usun ewe napanapen HTML, kopwe nengeni ewe HTML mi wewe ngeni .

Ren ewe kapasen awewe ka tongeni aea och sokkun tag, kopwe chok tumunu pwe epwe wor ewe klas gridzyCaption . Ewe kinikinin img a osupwangen ewe klasin gridzyImage .

Ewe awewe asan a pwari ngonuk ewe gridzySkinClassic . Ren om kopwe aea ew mi sokkono, kopwe chok siwini ewe iten ewe skin ren ew me nein ekkei:

Ekkewe Skin mi kapachelong .

	Ekkewe Klas mi kawor .
SkinBlank eu poputan mi murinno ren forata pwisin inisum . nengeni mi manau	`gridzySkinBlank`
gridzySkinClassic nengeni mi manau	`gridzySkinClassic` `gridzySkinClassicLight`(A EKKEWE CHON ANGANG seni ewe kinikin 2.6.0)
gridzySkinFullOverlay nengeni mi manau	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(A EKKEWE CHON ANGANG seni ewe kinikin 2.6.0)
gridzySkinLift nengeni mi manau	`gridzySkinLift` `gridzySkinLiftLight`(A EKKEWE CHON ANGANG seni ewe kinikin 2.6.0)
gridzySkinMagnifier ewe angangen zoom ese kapachelong nengeni mi manau	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(A EKKEWE CHON ANGANG seni ewe kinikin 2.6.0)

Meinisin ekkewe skin mei mak asan ra chok mochen ew CSS, nge mei wor pwan ekkoch skin mei pwan mochen ew JavaScript:

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

	Ekkewe Klas mi kawor .
gridzySkinBlur ese angang non IE . nengeni mi manau	`gridzySkinBlur` `gridzySkinBlurLight`(A EKKEWE CHON ANGANG seni ewe kinikin 2.6.0)
gridzySkinCard nengeni mi manau	`gridzySkinCard` `gridzySkinCardLight`(A EKKEWE CHON ANGANG seni ewe kinikin 2.6.0)

Ekkewe Kefil

Seni ewe kinikin 2.6.0 mei wor Options ren an epwe fis ekkewe skin mei nomw non. Anongonong won ewe sokkun skin ka tongeni seti ewe kölün fönüfan, kölün mak me kölün mak. Kopwe chok aea ekkewe pisekin CSS usun met ka tongeni kuna ikei:

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

Cheki ekkewe variable mi aninis me ekkewe auchean pisek ren ew me ew ekkewe skin ikei:

gridzySkinClassic

Mi tongeni siwin	Ewe auchean	Porousan
`--background`	`rgba(0, 0, 0, .7)`	a mut ngeni och CSS mi auchea .
`--color`	`rgb(255, 255, 255)`	a mut ngeni och CSS an epwe wor auchean .
`--text-shadow`	`none`	a mut ngeni och CSS mak-sas mi auchea .

gridzySkinFullOverlay

Mi tongeni siwin	Ewe auchean	Porousan
`--background`	`rgba(0, 0, 0, .7)`	a mut ngeni och CSS mi auchea .
`--color`	`rgb(255, 255, 255)`	a mut ngeni och CSS an epwe wor auchean .
`--text-shadow`	`none`	a mut ngeni och CSS mak-sas mi auchea .

gridzySkinLift

Mi tongeni siwin	Ewe auchean	Porousan
`--background`	`rgba(0, 0, 0, .7)`	a mut ngeni och CSS mi auchea .
`--color`	`rgb(255, 255, 255)`	a mut ngeni och CSS an epwe wor auchean .
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	a mut ngeni och CSS mak-sas mi auchea .

gridzySkinMagnifier

Mi tongeni siwin	Ewe auchean	Porousan
`--background`	`rgba(0, 0, 0, .7)`	a mut ngeni och CSS mi auchea .
`--color`	`rgb(255, 255, 255)`	a mut ngeni och CSS an epwe wor auchean .

Ei skin ese anisi --text-shadow

gridzySkinBlur

Mi tongeni siwin	Ewe auchean	Porousan
`--background`	`rgba(0, 0, 0, .7)`	a mut ngeni och CSS mi auchea .
`--color`	`rgb(255, 255, 255)`	a mut ngeni och CSS an epwe wor auchean .
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	a mut ngeni och CSS mak-sas mi auchea .

gridzySkinCard

Mi tongeni siwin	Ewe auchean	Porousan
`--background`	`rgba(0, 0, 0, 1)`	a mut ngeni och CSS mi auchea .
`--color`	`rgb(255, 255, 255)`	a mut ngeni och CSS an epwe wor auchean .
`--text-shadow`	`none`	a mut ngeni och CSS mak-sas mi auchea .

Meinisin ekkewe skin mi fen affat ra chok anisi ekkewe kapasen awewe mi mecheres. Ka tongeni fori om kewe pwisin me kon weires. Kopwe nengeni ewe Style Gridzy .

Stail Gridzy

Ika ese wor eu skin mi fen affat me mwan mi fich ngeni om osupwang, ka tongeni pwisin style-ini om.

Ewe aan mi mecheres, ina om kopwe akkomw kopwe eu skin mi fen nom me siwini ngeni pwisin om osupwang. Ewe gridzySkinBlank mi fen affat me mwan epwe kan awora eu nongonong mi murinno usun chok eu taropwe mi murinno non ewe CSS file:

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

Non ewe CSS file kopwe kuna ekkewe class gridzySkinBlank , gridzyImage me gridzyCaption . Gridzy pwisin ese mochen ekkei klas. Ra chok aea ren styling me ina mine ka tongeni angei ika siwini iter ika ka mochen.

Pwal och, kopwe küna ewe gridzyItem CSS . Gridzy a seti ei klas pwisin ngeni meinisin semirit mi weneiti ewe kinikinin konten mi nap. Iwe, ka tongeni aea ei klas ne styleini ekkewe pisekin om we galeri.

Ekieki Ekkewe Mettoch mi Auchea .

Ekkewe itenap repwe unusen fiti. Ekieki pwe ewe sais epwe wesewesen siwil. Kopwe aea ekkewe percentin ekkewe pisekin pixel. Iwe nengeni ewe kokkotun Gridzy autoFontSize , ewe a riri ngeni ewe ukukun mak won ewe ukukun ewe pworun pisek.
Eú me eú ekkewe pisek epwe wor eú napanap mi ffat. Ewe pisek epwe tongeni siwin me a namwot epwe kapunguno ewe grid. Iwe ika pwe ew pisek ese chok wor ew napanap mi pwung, kopwe akkomw affata ren poum (e.g. ren css).

Non ekkoch fansoun, epwe mecheres an epwe style masowen ekkewe pisek me mwen Gridzy epwe poputa. Kopwe chok angei ewe gridzy non ewe klas ika ewe taropwen javascript Gridzy non fansoun mwochomwoch ren ei.

Ina met! Ina chok met kopwe fori pwe kopwe pwisin forata inisum. Lape ngeni ekkewe skin mi fen affat rese aea nap seni ei.

Nge mei tongeni wor pwan ekkoch ika ka mochen ...

Ekkewe Skin mi Feffeita

Gridzy a aea chommongun ekkewe klasin CSS nap seni chok gridzyItem . Lape ngeniir repwe chék chéúfetál me ka tongeni áeá fán iten styling pwal.

Ekkewe Klasen Konteina mi Lapalap

Iten ewe Klas	Tichchikin porousan
`gridzy` pwe epwe setiw ren poun .	Gridzy a pwisin kutta ekkewe pisek ren ei klas me a poputani.
`gridzyAnimated`	Epwe fis ika pwe ewe kefil `animate` a `true` . Ika ei klas a fis ren poun, ewe kefil `animate` epwe pwisin angei `true` pwan (tiwenon chok ika a affat pwe a fis ngeni `false` ).

Ekkewe Klasen Item

Iten ewe Klas	Tichchikin porousan
`gridzyItem`	Epwe set mwirin chok ewe pisek a poputa ewe angangen poputani. Esapw tongeni fis.
`gridzyItemInitializing`	Epwe set mwirin chok ewe pisek a poputa ewe angangen poputani. Epwe siwin ngeni `gridzyItemReady` nupwen chok ewe pisek a unusen poputa. Wewen pwe esap pwe ekkewe sasing ra unusen uren (nengeni `gridzyItemLoading` ), nge pisek a fen ammonata pwe epwe pwa.
`gridzyItemReady`	Epwe siwini `gridzyItemInitializing` usun chok ewe pisek a unusen poputa. Esapw tongeni fis. Wewen pwe esap pwe ekkewe sasing ra unusen uren (nengeni `gridzyItemComplete` ), nge pisek a fen ammonata pwe epwe pwa.
`gridzyItemLoading`	Epwe set mwirin chok ewe pisek a poputa ewe angangen poputani. Epwe siwin ngeni `gridzyItemComplete` nupwen chok ekkewe sasing mi nom non (fan chommong ew chok) ra unusen uren.
`gridzyItemComplete`	Epwe siwini `gridzyItemLoading` nupwen chok ekkewe sasing mi nom non (fan chommong ew chok) ra unusen uren. Esapw tongeni fis.
`gridzyItemInitialToVisible`	Epwe set nupwen chok ewe pisek a poputa ne pwa non ewe aewin fansoun. Epwe katowu mwirin chok ewe pisek a unusen pwa.
`gridzyItemVisible`	Epwe set mwirin chok ewe pisek a unusen pwa. Epwe katowu mwirin chok ewe pisek a poputa ne morono.
`gridzyItemVisibleToHidden`	Epwe set mwirin chok ewe pisek a poputa ne morono. Epwe katowu mwirin chok ewe pisek a unusen monota.
`gridzyItemHidden`	Epwe set mwirin chok ewe pisek a unusen monota. Epwe katowu mwirin chok ewe pisek a poputa ne pwa.
`gridzyItemHiddenToVisible`	Epwe set non chok ewe fansoun ewe pisek epwe poputa ne pwa (tiwenon chok ika epwe pwa non ewe aewin fansoun – nengeni ewe class `gridzyItemInitialToVisible` ). Epwe katowu mwirin chok ewe pisek a unusen pwa.
`gridzyItemVisibleToVisible`	Epwe set nupwen chok och mettoch non ewe grid a siwin, nge ewe pisek pwisin a me nomw non pwa. Epwe katowu mwirin chok ewe animation mi siwin a wes.

Ren pwungun ewe esisinen angang me ekkewe animation ren ekkewe sasing mi pwa me morono ra fen affat me ren ewe file CSS mi nap non Gridzy.

Ren ekkei classin CSS mi mak asan ka tongeni styleini om pwisin esisinen angang me ekkewe animation. Kopwe nengeni ewe file CSS mi nap non Gridzy, pwe kopwe weweiti met kopwe fori. Ese wor niuokkus, mettoch meinisin ra fen makketiw ikewe ie.

Kopwe awenewena ewe Load

Ika ka aea chommong sasing, epwe tongeni ew ekiek mi och om kopwe anisi Gridzy ne fori ewe grid non mosonoson.

Kopwe eppeti ekkewe sasing mi fiti .

Gridzy a fokkun osupwangen ewe kinikinin meinisin ekkewe sasing pwe epwe tongeni apachanong ewe grid. Ekkei ennet ra efisata ekkewe mettoch mi fis ika ekkoch sasing ra fen ammonata me ekkoch rese. Ika a chommong ekkewe sasing, epwe pwal watte an epwe tongeni fis ei efeiengau.

Ren an epwe pinei ei foffor, kopwe chok seti ekkewe napanapen width me height fan iten meinisin ekkewe pisekin img . Mi auchea kopwe seti ekkewe value mi pung ren ew me ew ekkewe sasing, ika esap ina, ekkewe sasing repwe mwaken. Ekkewe values mi pung ina ewe popun watten me tekian ewe sasing:

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

Mwirin Gridzy a tongeni apachanong ewe grid non chok ew fansoun nge ese namwot epwe sinei wesewesen ukukun ekkewe sasing.

Lazy Load

Ren om kopwe chok load ekkewe sasing mi nom non ewe nenien nengeni mi pwa, kopwe chok fiti ekkei napanap:

Kopwe makkei ekkewe napanapen width me height usun met a affat asan (kopwe tumunu pwe kopwe aea ekkewe value mi pung)
Kopwe siwini meinisin ekkewe napanapen src ren data-gridzylazysrc usun met a pwa me fan (ika pwe mi wor napanapen srcset pwan, siwini ngeni 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>

Mwirin ekkei step ekkewe sasing repwe load nupwen chok ra nomw unukun ika non ewe nenien nengeni.

Pworaus mi Pwäratä

Ewe esisinen pworous ina ewe kukkun esisinen animation mi pwa nupwen ewe sasing a load. Ika ka aea ekkewe kapas & skins , ewe esisinen angang epwe pwano non pwisin an. Ika esap ina, mi lamot kopwe féri ekkóch siwil:

Kopwe isoni ew me ew ekkewe kinikinin img non ew kinikinin div .
(ika non pwan ew kinikin – nengeni HTML ren pwan ekkoch)
Kopwe apacha ngeni ewe klas gridzyImage ngeni ew me ew ekkewe kinikinin 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>

Mwirin ena kopwe kuna ekkewe esisinen angang ika ekkewe sasing ra angei fansoun ar repwe load.

Ekkewe filter

Filter non Gridzy ra fokkun mecheres nge ra pochokun. Ese lifilifil met sokkun filter ka mochen, nge a fokkun tufich pwe epwe tongeni fis. Met chok ka mochen, ekis CSS me ekkoch pisekin HTML ...

Iei ew nenien appiru mi angangoch:

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

Sipwe Forata Ewe Kinikin me Kinikin .

1. Akkomw sipwe mochen ewe HTML mi kan fis iteitan Gridzy me seti iten ekkewe klas ren meinisin pisekin galeri pwe sipwe tongeni filter-ini mwirin .

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

Non ei awewe sia chok aea ew klas ren ew me ew ekkewe kinikin. Nge ka pwan tongeni seti chommong class ren ew chok kinikin, ika pwe ena kinikin epwe tongeni kuna ren chommong filter.

2. Iwe sia apacha ekkoch button ren ach sipwe tongeni siwini ekkewe filter iwe .

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

Ese nifinifin ekkewe button, ka pwan tongeni aea ekkoch pisekin form usun ekkewe chekin, ekkewe button non reitio, ekkewe nenien finata me pwan ekkoch.

Usun met ka kuna, ekkewe auchean ekkewe button ra kan fiti CSS. Nupwen sia chok wes, ew click won ena sokkun button epwe pwarata ekkewe sasing mi fich ngeni ena CSS selector. Tekia a chok seti ewe filter ngeni ei auchean.

Ka pwal tongeni nöünöü ekkewe selector mi kon weires. Awewe chok :not(.animals) epwe angang pwan, usun chok .animals.people me .animals, .people .

3. Ren enletin, sia äeä ekkewe föün äsefich lon eü föün div me äeä ngeni ewe föün äsefich itan Gridzy, ren ach sipwe äeä ewe föün 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>

Usun met ka kuna, sia pwan aea ew CSS ren ewe kinikinin filterControls . Ewe konten div ren ewe napanap id a chok angang ne fori ekkewe button epwe mecheres ar repwe finata ren ena chon finata CSS.

Ina met!

Ika ka mochen ew angangen JavaScript, kopwe nengeni ewe API .

API

Ina mwo ika Gridzy a wor an pwisin API, nge chommong mettoch mei tongeni fis nge ese wor, ren chok an epwe anganga ewe DOM. Gridzy epwe kuna me awenewena ewe grid. Nge a pwal wor eú API mi fókkun péchékkúl ...

Ach sipwe fori ewe DOM .

Ren meinisin ekkewe angangen Modelin Pisekin Taropwe (DOM) sia akkomw mochen ewe kinikinin konten:

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

Kopwe apacha ngeni ekkewe sasing

Mi auchea kopwe unusen forata me apachanong ewe minefoon kinikinin semirit me mwen kopwe apacha ngeni ewe kinikinin konten. Ika esap ina, Gridzy esap tongeni kuna ekkewe pwungun ekiek.

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

Angei ekkewe sasing

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

Siwini ekkewe Kefil .

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

Pwan ekkoch usun angangen DOM ka tongeni kuna non ekkewe taropwen MDN . Mei pwan wor ew Pworaus usun ewe DOM mei kawor.

API mi nomw ren

Ren ach sipwe aea ewe API, sipwe akkomw mochen ewe nenien Gridzy, ewe a riri ngeni ewe kinikinin Gridzy:

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

Angei Opport

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

Angei meinisin ekkewe kefil .

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

Seti ekkewe Kefil

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

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

Kopwe aea ewe Filter

Ach aea ew filter a chok seti ewe filter mi tongeni epwe ew me ew chon finata CSS mi pung:

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

Apacha ngeni ekkewe Angangen Kokkot .

A EKKEWE CHON ANGANG seni ewe kinikin 2.4.0.
Kopwe aea ekkewe Events ikenai me mi kon fitikoko. Nengeni ewe kinikin mwirin ei ren ekkewe poraus mi titchik.

~~Gridzy.js 2 a anisi ekkoch kefil ren angangen koko. Ra tongeni chok set ren ewe API mi nom ren, nge usun chok ekkewe ekkoch kefil:~~

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

	~~Tichchikin porousan~~
~~`onBeforeOptionsChanged`~~	~~Ewe angangen callback mi fis me mwen an epwe fis ekkewe kefil.~~
~~`onOptionsChanged`~~	~~Ewe angangen callback mi fis mwirin an a fis ekkewe kefil.~~
~~`onBeforeRender`~~	~~Ewe angangen callback mi fis me mwen an epwe fis.~~
~~`onRender`~~	~~Ewe angangen callback mi fis mwirin an a fis.~~

Kopwe aea ekkewe Epwe fis .

seni ewe kinikin 2.4.0.

Ka tongeni aea ekkewe angangen Gridzy usun chok ekkewe angangen 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.
});

Ekkoch mwich ra fis won ewe kinikinin konten Gridzy me ekkoch mwich ra fis won ekkewe kinikinin pisek emon me emon non ewe kinikinin konten.

Ekkewe mettoch ra fis won ewe kinikinin konten Gridzy:

	Tichchikin porousan
`gridzyBeforeInit`	Fire me mwen an epwe poputa ewe galeri.
`gridzyInit`	Fires mwirin an a poputa ewe galeri.
`gridzyBeforeOptionsChanged`	Fire me mwen an epwe seti ekkewe op.
`gridzyOptionsChanged`	Fire mwirin an seti ekkewe oput.
`gridzyBeforeRender`	Fire me mwen an epwe fis.
`gridzyRender`	Ekkei mwirin an rende.

Ika pwe ka fiti ekkoch mwich ikei, kose mochen kopwe tinato ew tingoren aninis .

ewe kinikinin konten event.target a awora ewe kinikinin konten Gridzy.
event.detail.instance a awora ewe nenien Gridzy.

Ekkewe mettoch ra fis won ekkewe pisek:

	Tichchikin porousan
`gridzyItemBeforeInit`	Fires me mwen an epwe poputa.
`gridzyItemInit`	Fires mwirin iteitan poputan.
`gridzyItemLoading`	Fire nupwen ewe pisek a poputa ne load.
`gridzyItemReady`	Fires nupwen ewe pisek a ammonata ngeni ewe kapwungun grid. Ina minne, ewe ratio a ffat, nge eli ewe sasing epwe chüen load.
`gridzyItemComplete`	Fires nupwen ewe sasingin itenap a unusen fis.

Ika pwe ka fiti ekkoch mwich ikei, kose mochen kopwe tinato ew tingoren aninis .

event.target a awora ewe kinikinin itenap.
event.detail.instance a awora ewe nenien Gridzy.

API – Fonufan

Mei wor ekkoch angang mei nomw non ekkewe nenien Gridzy. Iwe ese namwot sipwe angei ew nenien appiru me mwen.

Angei ewe Opwungun Default .

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

Angei meinisin ekkewe kefil .

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

Seti ekkewe Opwungun Default .

Ei ese seti ekkewe kefil ren meinisin ekkewe nenien Gridzy mi fen poputa, nge a awewei ewe nongonongen ekkewe minefoon nenien angang. Nge, ika ew kefil ren ew nenien angang mi nomw epwe niwinsefan ren ewe auchean null , epwe aea ewe minefoon auchean default.

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

Ka tongeni aea ei ne seti ekkewe kefil won unusen fonufan, ika ka kokori me mwen DOM epwe ammonata. Iwe, esap chüen lamot kopwe seti ekkewe kefil pwe repwe napanap.

Ekkewe otot

Nupwen meinisin ekkewe otot non Gridzy.js 2 ra angang, ese wor namotan ekkewe napanap mi mak fan. Nge ekkewe otot ra tongeni siwin pwe repwe aea Gridzy non ew napanap mi kon itefouno:

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

Ekkoch ekkei kefil rese tongeni fis ren ekkewe napanap data-gridzy- ika ren setOptions() , pokiten ekkewe popun mi pwung:

	Ewe auchean	Tichchikin porousan
`autoInitOnDomReady`	`true`	A kuna ekkewe pisek mi wor `gridzy` non ewe pekin taropwe me a poputaniir. Epwe tongeni fis ren `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Ewe Chon Nengeni ewe Mutasen	`true`	A kuna ekkewe minefoon pisek ren klas `gridzy` nupwen chok ra pwa non ewe DOM me a poputani. (ewe chok won om aea ekkewe siwinin peich) Epwe tongeni fis ren `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Ewe Chon Nengeni ewe Mutasen	`true`	A kuna ika ekkewe pisekin semirit (sasing) ra kapachelong are katowu, me a pwisin awenewena ewe grid. Epwe tongeni fis ren `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	A affata ika ekkewe napanap `data-gridzy-` ra kan fis ika rese kan fis. Ika pwe ei `false` ekkewe kefil ra tongeni set chok ren ewe API mi nom ren. Epwe tongeni fis ren `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Ewe Chon Nengeni ewe Mutasen	`true`	A kuna siwinin ekkewe napanapen `data-gridzy-` , me a pwisin awenewena ewe grid. A pwal kúna ika ewe klasin `gridzyAnimated` a kapachelong are katowu me ika a fis siwil lón napanapen `style` . Ika pwe `useOptionAttributes` `false` , epwe chok kuna ekkewe siwinin napanap `style` . Epwe tongeni fis ren `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Ewe Chon Nengeni ewe Mutasen	`true`	A kuna siwinin napanapen `class` ren meinisin ekkewe kinikinin semirit (sasing). A pwung usun ekkewe filter. Epwe tongeni fis ren `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Ewe Chon Nengeni ewe Mutasen seni ewe kinikin 2.5.0.	`true`	A kuna siwinin napanapen `src` ren meinisin ekkewe sasing. A auchea nupwen a aea ren React ika ekkewe puk mi usun chok. Epwe tongeni fis ren `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Siwini ewe chon nengeni seni ewe kinikin 2.6.0.	`true`	A kuna siwinin ewe elemen fitikoko. A lamot usun ewe kokkot mi pölüweni. (Me mwen ewe kinikin 2.6.0 a wor ew chon ausening ngeni met a fis ren siwinin winnach) Epwe tongeni fis ren `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Poputááni ren péúm

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

Kopwe atai ewe Inis .

Rokopwanieno, ewe opposun poputan Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sync ewe Lisin Semirit ren poun

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

Sync ew Emon Emon Semirit ren Poun .

Fan chommong ese lamot, lukun chok lon ekkewe fansoun mi fokkun kukkun.

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

Sync ekkewe napanap ren poun

Nengeni pwe ewe useOptionAttributes epwe true ren ei.

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

Pochokunen Rendering

Fan chommong ese lamot, inaamwo ika meinisin ekkewe otot ra fen fis .

gridzyInstance.render();

Ewe minen alillis

Puken puken JavaSkript

Angang

Ewe kinikinin 2.x

Ewe Popun Angangen

Konfigurasi

Ekkewe Kefil mi Lamot

Justified Ekkewe Kefil

Waterfall Ekkewe kefil ren kokkot

Ekkewe Pwal Ekkoch Kefil mi Murinno .

HTML mi wewe ngeni

Kapwun & Skin

Ekkewe Skin mi kapachelong .

Ekkewe Kefil

gridzySkinClassic

gridzySkinFullOverlay

gridzySkinLift

gridzySkinMagnifier

gridzySkinBlur

gridzySkinCard

Stail Gridzy

Ekieki Ekkewe Mettoch mi Auchea .

Ekkewe Skin mi Feffeita

Ekkewe Klasen Konteina mi Lapalap

Ekkewe Klasen Item

Kopwe awenewena ewe Load

Kopwe eppeti ekkewe sasing mi fiti .

Lazy Load

Pworaus mi Pwäratä

Ekkewe filter

Sipwe Forata Ewe Kinikin me Kinikin .

API

Ach sipwe fori ewe DOM .

Kopwe apacha ngeni ekkewe sasing

Angei ekkewe sasing

Siwini ekkewe Kefil .

API mi nomw ren

Angei Opport

Angei meinisin ekkewe kefil .

Seti ekkewe Kefil

Kopwe aea ewe Filter

Apacha ngeni ekkewe Angangen Kokkot .

Kopwe aea ekkewe Epwe fis .

API – Fonufan

Angei ewe Opwungun Default .

Angei meinisin ekkewe kefil .

Seti ekkewe Opwungun Default .

Ekkewe otot

Poputááni ren péúm

Kopwe atai ewe Inis .

Sync ewe Lisin Semirit ren poun

Sync ew Emon Emon Semirit ren Poun .

Sync ekkewe napanap ren poun

Pochokunen Rendering