Verzia 2.x – Gridzy.Gallery

I webrig sas automatikane translatirime. Te si vareso so na si klaro, mangav tumen te dikhen i anglikani dokumentàcia.

Bazaqo labăripen

Thov e Gridzy-esqe lilǎ k-o tiro server thaj thov len k-o tiro webrig (butivar anθ-i sekcia e śeresqi):

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

Thov o HTML kodo (savo than ki sekcia e truposqi):

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

Kodo si! Kodo si jekh pherdo funkcionalno egzamplo. Naj musaj te kerel pes ekstra inicializacia.

Konfiguracia

O maj lokho drom te konfigurisares o Gridzy si, te hasnis numaj HTML atributura. Trubul numaj te thoves anglal e opcienqe anava data-gridzy- . Akana, te thoves i opcia spaceBetween , numaj thov o atributo 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>

Majbare opcie

	Standardno valuàcia	Deskrìpcia
`animate`	`true`	Determinil te si ke trubun te aven hasnime e animacie kana o grid paruvel pes (sar egzàmplo, kana paruvel pes o barodipen e browseresqo vaj kana thovel pes o filtro).
`layout`	`justified`	Definisarel o utilizirime aranźmanto. Gridzy.js 2 suportil e duj diferentne aranźàcie `justified` thaj `waterfall` . Sako jekh lendar si les pesko aver opciako paramètro, savo śaj te arakhes telal kadi tabela.
`filter`	`*`	Determinisarel save patretura trubun te sikaven pes. Sako CSS-selektori śaj te avel utilizirime sar valuàcia kathe. Običajno si kerdo automatikane prekal `filterControls` (dikh i aver opcia). Dikh e filtre
`filterControls`		Determinisarel save elementura e formenqe śaj te aven utilizuime te filtrin e imaźură. Sako CSS selektori, savo alosarel HTML formulareske elementura, śaj te avel utilizirime sar valuàcia kathe. Dikh e filtre
`autoConsiderScrollBars`	`true`	Te prediktisarel pes i śirdipen savi si laćhi te sikaven pes vaj te xasaren pes e scroll bars. Si sajekh rekomenduime te mukhel pes o `true` numaj kana kadava automatizmo kerel problemură.

Justified Layout Options

	Standardno valuàcia	Deskrìpcia
`autoFontSize`	`false`	Automatikane kerel o nevisaripe e fontosko-baripe e svakone kutijako bazirime pe o originalno barope e kutijako. Sar standardo o font-size na si thodino eksplicitno.
`desiredHeight`	`190`	Definisarel i mangli ućhipen e elementurenqe rigaqo. I ćaćutni ućhipen ka ovel ginavdi palal i śirdipen savi si laćhi thaj e elementură anθ-i rènda.
`hideOnMissingImage`	`true`	Garavel e kutie save si len patretura save nashti te aven pherde.
`spaceBetween`	`4`	Definisarel i distanca maśkar e elementură anθ-e piksèlură.
`lastRowAlign` desar i verzia 2.3.0	`justified`	Definisarel o phiripen e palune rèndosqo. E śajde valutură si `left` , `center` , `right` thaj `justified` .
`singleRowAlign` desar i verzia 2.3.0	`justified`	Definisarel o phiripen kana si numa jekh rig. E śajde valutură si `left` , `center` , `right` thaj `justified` .
~~`fillLastRow`~~ ~~desar i verzia 2.1.0~~	~~`true`~~	ĆHIVDO katar i verzia 2.4.0 (DEPRECATED desar i verzia 2.3.0 ) Aranźisarel e patretura kadja kaj o paluno rèndo te avel sajekh pherdo. Te planiris te thoves e image dinamikane, śaj te avel laćhi ideja te deaktivisares kadava. Na kerel efekto pe jekh riga (dikh `fillSingleRow` ).
`fillSingleRow` desar i verzia 2.1.0	~~`true`~~	ĆHIVDO katar i verzia 2.4.0 (DEPRECATED desar i verzia 2.3.0 ) Te si numa jekh rèndo, vov aranźisarel e imaźură kadja kaj i rig te avel sajekh pherdo. Te śaj te avel ke si tut numaj jekh vaj duj patretura anθ-i galeria, śaj te avel laćhi ideja te deaktivisares kadava.

Waterfall Layout Options

	Standardno valuàcia	Deskrìpcia
`autoFontSize`	`false`	Automatikane kerel o nevisaripe e fontosko-baripe e svakone kutijako bazirime pe o originalno barope e kutijako. Sar standardo o font-size na si thodino eksplicitno.
`desiredWidth`	`250`	Definisarel i mangli śirdipen e kolonenqo. I ćaćutni śirdipen ka avel ginavdi palal i śirdipen savi si disponibilo thaj o gin e kolonenqo.
`hideOnMissingImage`	`true`	Garavel e kutie save si len patretura save nashti te aven pherde.
`horizontalOrder`	`false`	Definisarel kaj e elementura si thodine striktno jekh elemento ande sako kolona katar o ćaćutno źi ko ćaćutno, palal kodoja astarel pes pale ande maj ćaćutni kolona bi te dikhel pes savi kolona si maj but than. Sar standardo, e elementura ka oven sajekh thodine ki kolona savi si la maj cikni učipe.
`spaceBetween`	`4`	Definisarel i distanca maśkar e elementură anθ-e piksèlură.
`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`.

Maj but avansime opcie

Palal maj avansime opcie, dikh o API .

Semantikano HTML

I maj lokho HTML struktura e Gridzy-esqi si kadaja:

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

Numa, o Gridzy si but fleksibilno thaj śaj te hasnis pashe savi aver HTML struktura. Si numaj nesave punktura te lenpe sama:

Sako ćhavo e kontejneresko elemento reprezentisarel jekh artiklo anθ-i grila.
O elemento e kontentosqo thaj lesqe ćhave śaj te aven varesavo tip e tag-esqo, sar so si ul thaj li (numa te gîndin te resetin e defaultură le browseresqe).
Te o img elemento na si direktno ćhavo korkoro, trubul les i klasa gridzyImage .

Akana akava si vi jekh HTML struktura savi kerel buti:

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

Maj but te kames te thoves lila, trubul tut jekh avansime HTML struktura. Te siklǒves maj but pal-e kodo, dikh o Captions & Skins .

Titlora thaj thule

Te kames te thoves lila ki tiri galerija, trubul te definisares o dikhipe. Anda kodo, si varesave predefinime thule. Sako thuli si kerdini kotar jekh CSS lil. Trubul te thoves kadava lil po drom e maj bare Gridzy lilengo (butivar anθ-i sekcia e śeresqi):

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

Maj dur trubul tut jekh avansime HTML struktura:

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

Te si tut pućhipen pal-i HTML-esqi struktura, dikh o Semantic HTML .

Palal o lil śaj te labăres varesavo tip e tag-esqo, numaj te avel tut i klàsa gridzyCaption . O img elemento trubul les i klasa gridzyImage .

O egzàmplo opral sikavel tumenqe i thuli gridzySkinClassic . Te hasnis aver, numaj te paruves o anav e thuleski jekhestar:

Kože andar lende

	Klase save si disponibilo
gridzySkinBlank jekh laćho starto te kerel pes jekh thuli źivdo angluno dikhipen	`gridzySkinBlank`
gridzySkinClassic źivdo angluno dikhipen	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATED desar i verzia 2.6.0)
gridzySkinFullOverlay źivdo angluno dikhipen	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATED desar i verzia 2.6.0)
gridzySkinLift źivdo angluno dikhipen	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATED desar i verzia 2.6.0)
gridzySkinMagnifier zoom funkcionaliteto na si andre źivdo angluno dikhipen	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATED desar i verzia 2.6.0)

Sa le opre sikavde skinura trubun numaj jekh CSS lil, numaj si vi aver skinura save trubun vi jekh JavaScript lil:

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

	Klase save si disponibilo
gridzySkinBlur na kerel buti an-o IE źivdo angluno dikhipen	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATED desar i verzia 2.6.0)
gridzySkinCard źivdo angluno dikhipen	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATED desar i verzia 2.6.0)

Opcie vaś i thuli

De katar i verzia 2.6.0 si Opcie te konfigurisaren pes e inkerde thule. Palal i specifiko thuli śaj te thoves o rang e fundosqo, o rang e tekstosqo thaj o sumnakaj e tekstosqo. Tu numa trubul te hasnis CSS personalizirime proporcie sar so dikhes kate:

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

Dikh e suportime variàble thaj e standardo valutură vaś svako thuli kathe:

gridzySkinClassic

Variàbilo	Standardno valuàcia	Informàcia
`--background`	`rgba(0, 0, 0, .7)`	mukhel savi CSS-esqi fundoski vlàda
`--color`	`rgb(255, 255, 255)`	mukhel savi CSS koloroski valuàcia
`--text-shadow`	`none`	mukhel savi CSS-esqi tèksto-sumnaqi vlàda

gridzySkinFullOverlay

Variàbilo	Standardno valuàcia	Informàcia
`--background`	`rgba(0, 0, 0, .7)`	mukhel savi CSS-esqi fundoski vlàda
`--color`	`rgb(255, 255, 255)`	mukhel savi CSS koloroski valuàcia
`--text-shadow`	`none`	mukhel savi CSS-esqi tèksto-sumnaqi vlàda

gridzySkinLift

Variàbilo	Standardno valuàcia	Informàcia
`--background`	`rgba(0, 0, 0, .7)`	mukhel savi CSS-esqi fundoski vlàda
`--color`	`rgb(255, 255, 255)`	mukhel savi CSS koloroski valuàcia
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	mukhel savi CSS-esqi tèksto-sumnaqi vlàda

gridzySkinMagnifier

Variàbilo	Standardno valuàcia	Informàcia
`--background`	`rgba(0, 0, 0, .7)`	mukhel savi CSS-esqi fundoski vlàda
`--color`	`rgb(255, 255, 255)`	mukhel savi CSS koloroski valuàcia

Akava thulo na suportil --text-shadow

gridzySkinBlur

Variàbilo	Standardno valuàcia	Informàcia
`--background`	`rgba(0, 0, 0, .7)`	mukhel savi CSS-esqi fundoski vlàda
`--color`	`rgb(255, 255, 255)`	mukhel savi CSS koloroski valuàcia
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	mukhel savi CSS-esqi tèksto-sumnaqi vlàda

gridzySkinCard

Variàbilo	Standardno valuàcia	Informàcia
`--background`	`rgba(0, 0, 0, 1)`	mukhel savi CSS-esqi fundoski vlàda
`--color`	`rgb(255, 255, 255)`	mukhel savi CSS koloroski valuàcia
`--text-shadow`	`none`	mukhel savi CSS-esqi tèksto-sumnaqi vlàda

Sa le predefinime thule numaj den suporto e tikne tekstosqe subtitrurenqe. Tu śaj te keres tire but korkore thaj maj kompleksne thule. Mangav tumen te dikhen o Style Gridzy .

Stilo Gridzy

Te na si jekh angleder definime thuli savi śaj te laćharel tumare trubujimata, śaj te keren tumari thuli.

O maj lokho drom si te kopiris anglal jekh egzistuime thuli thaj te adaptiris la pala tire trubujimata. O angleder definime thulo gridzySkinBlank ka del jekh laćhi funda sar vi jekh laćhi dokumentàcia anθ-o CSS lil:

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

Ano CSS lil ka arakhes e klase gridzySkinBlank , gridzyImage thaj gridzyCaption . O Gridzy korkori na trubul les kadala klase. Von si numaj hasnime vash o stilo thaj odolesqe śaj te len len vaj te paruven len te kamen.

Paše odova ka arakhes i CSS klasa gridzyItem . O Gridzy thovel kadi klasa automatikane sa e direktno čhavenge katar o maj baro kontejnerosko elemento. Akana, śaj te labăres kadaja klàsa te stilisares e artiklură anθar tiri galerìa.

Gîndisar le bută save si importanto

O sasto artiklo trubul te avel pherdo responsibilo. Gîndin kaj o barodipen e elementosqo ka paruvel pes. Ker buti e procentualno valutenqe na e pixel valutenqo. Thaj dikh i Gridzy-esqi opcia vaś o laćharipen autoFontSize , savi phandel o barodipen e fontosqo k-o barodipen e kutiaqo e artiklosqo.
Sako artiklo trubul te avel les jekh laćhe definisardo aspekto. O aspekto e artiklosko nisar na ka paruvel pes thaj trubul te kerel pes kalkulacia e gridaki. Anda kodo, kana jekh artiklo na si les jekh laćhe definisardo aspekto, predefinisar les manualo (sar egzàmplo, prekal o css).

Ano nesave thana, shaj te ovel maj lokho te stilizirinel pes o sasto artiklo anglal o Gridzy te inicijalizirinel pes. Numaj te lel pes i klasa gridzy vaj o Gridzy javascript lil temporarno vaś kadava.

Kodo si! Kodo si sa so trubul tut te vazdes tiri thuli. Maj but katar e predefinime thule na keren buti maj but katar akava.

Numa śaj te avel maj but te kames …

Avansime thule

O Gridzy kerel buti maj but CSS klase sar numaj gridzyItem . Maj but lendar ka oven thodine automatikane thaj śaj te labăres len vi vaś o stilo.

Klase e kontejnerenge maj bare

Klasako anav	Deskrìpcia
`gridzy` te thoves manualno	O Gridzy arakhel automatikane elementura kadale klasasa thaj kerel len inicijalizirime.
`gridzyAnimated`	Ka ovel thodo automatikane kana i opcia `animate` si `true` . Te si kadaja klàsa thovdi manualo, i opcia `animate` ka avel automatikane `true` vi voj (numa te si eksplicitno thovdi k-o `false` ).

Klase e artiklosqe

Klasako anav	Deskrìpcia
`gridzyItem`	Ka ovel kerdo sar so o artiklo ka lel o proceso e inicijalizaciako. Nikana na ka ovel ćhudino.
`gridzyItemInitializing`	Ka ovel kerdo sar so o artiklo ka lel o proceso e inicijalizaciako. Ka ovel paruvdo kotar `gridzyItemReady` kana o artiklo ka ovel pherdo inicijalizirimo. Na znachil ke le image si pherdo (dikh `gridzyItemLoading` ), numaj o artiklo si gata te dikhel pes.
`gridzyItemReady`	Ka paruvel `gridzyItemInitializing` kana o artiklo ka ovel pherdo inicializirimo. Nikana na ka ovel ćhudino. Na znachil ke le image si pherdo (dikh `gridzyItemComplete` ), numaj o artiklo si gata te dikhel pes.
`gridzyItemLoading`	Ka ovel kerdo sar so o artiklo ka lel o proceso e inicijalizaciako. Ka ovel paruvdo kotar `gridzyItemComplete` sar so si o patretura (butivar numa jekh) pherdo.
`gridzyItemComplete`	Ka paruvel `gridzyItemLoading` sar so si o patretura (butivar numa jekh) pherdo. Nikana na ka ovel ćhudino.
`gridzyItemInitialToVisible`	Ka ovel kerdo sar so o artiklo ka kezdisarel te sikavel pes angluni drom. Ka ovel ćhudino kana o artiklo ka ovel pherdo dikhlino.
`gridzyItemVisible`	Ka ovel kerdo sar so o artiklo ka ovel pherdo dikhlino. Ka ovel ćhudino kana o artiklo ka lel te xasarel pes.
`gridzyItemVisibleToHidden`	Ka ovel kerdo sar so o artiklo ka kezdisarel te xasarel pes. Ka ovel ćhudino kana o artiklo ka ovel pherdo garavdo.
`gridzyItemHidden`	Ka ovel kerdo sar so o artiklo ka ovel pherdo garavdo. Ka ovel ćhudino kana o artiklo ka kezdisarel te sikavel pes.
`gridzyItemHiddenToVisible`	Ka ovel thodino kana o artiklo ka kezdisarel te sikavel pes (numa te sikavel pes anglunivar – dikh e klasa `gridzyItemInitialToVisible` ). Ka ovel ćhudino kana o artiklo ka ovel pherdo dikhlino.
`gridzyItemVisibleToVisible`	Ka ovel thodo sar vareso ki grila ka paruvel pes, numa o artiklo korkori sas thaj ka ačhol dikhlino. Ka ovel ćhudino kana ka agorisarel pes i animacia e paruvipnaski.

Sar standardo o procesosko indikatoro thaj e animacie vash o sikavipe thaj o xasaripe e imagengo si anglaldefinime kotar o Gridzy sherutno CSS lil.

Kadala opral phende CSS klasenca śaj te stilisares tiro procesosko indikatoro thaj animacie. Te dikhes o Gridzy maj baro CSS lil, te haćares so trubul te ćhives. Na dara, sa si mishto dokumentirimo odothe.

Optimizirisar o pherdo

Te hasnis but patretura, śaj te avel laćhi ideja te aźutis e Gridzy te kerel o grid maj sigo.

Te na ćhiven pes e patretura

O Gridzy absolutno trubul les o aspekto sa e imagengo te shaj te ginavel o grid. Kadala faktia keren te oven elementura save si gatisarde te si varesave image gata thaj aver na. So maj but patretura si, so maj but nasul shaj te avel akava efekto.

Te na kerel pes akava phiripen, numaj thov e atributura width thaj height vaś sa img elementură. Si importanto te thoven pes e ćaćutne valutură vaś svako individualo patreto, aver rig e patretura ka aven ćorre. E ćaćutne valutură si i originalo śirdipen thaj o ućhipen e respektivne imagěnqo:

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

Palal kodoja o Gridzy śaj te kerel kalkulàcia e gridaqi sigo bi te trubul te źanel e ćaćesqe bare e imagenqe.

Lazy Loading

Te śaj te ćhives numaj e imaźură save si anθ-o dikhipen, numaj te keres kadala paśa:

Thov e atributură width thaj height sar si deskripto opral (ker te labăres e laćhe valutură)
Paruv sa e src atributura data-gridzylazysrc sar si sikavdo telal (te si tut vi srcset atributura, paruv len 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>

Palal kadala paśa e patretura ka aven pherdo sar von si paśe vaj andar o dikhipen.

Procesosko Indikatoro

O procesosko indikatoro si o tikno animirimo ikona savo sikavel pes kana o patreto si pherdo. Te hasnis subtitrura thaj thule , o procesosko indikatoro ka sikavel pes automatikane. Aver rig trubul tut nesave aźutimata:

Thov svako img elemento ano div elemento
(vaj ande varesavo aver elemento – dikh o semantikano HTML vaś maj but)
Thov i klasa gridzyImage ko svako img elemento

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

Palal kodoja trubul te dikhes e procesosqe indikatorură te si ke e imaźură len vràma te ćhiven pen.

Filtre

Le filtre ando Gridzy si but lokho numa zurale. Bizo dikhipe so filtro trubul tut, si but šajipe te ovel realizirimo. Sa so trubul tut si, tikno CSS thaj nesave elementura HTML …

Kathe si jekh funkcionalo egzàmplo:

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

Te keras les paso po paso

1. Anglal trubul amen i običàjno HTML struktura e Gridzy-qi thaj te thovas e anava e klasenqe vaś sa e artiklură e galerìenqe te śaj te filtrisaras len palal

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

Ano akava egzamplo amen hasnisaras numa jekh klasa vash sakova elemento. Numaj śaj vi te thoves but klase vaś jekh elemento, te kodo elemento śaj te avel arakhlo katar but filtre.

2. Pala kodo thovas nesave butona prekal save śaj te paruvas e filtre atunć

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

And-o than e butonenqo, śaj te labăres vi aver elementură sar e śerutne lila, e radio butonură, e alosaripnasqe thana thaj aver.

Sar dikhes, e valutură le butăqe si obićajne CSS selektòrură. Sar agorisaras, jekh kliko pe asavko buti ka sikavel e image save malaven pes e CSS selektorosa. Tehnikanes vov numaj thovel i opcia e filter pe kadi vlàda.

Tu śaj vi te hasnis but maj kompleksne selektora. Sar egzàmplo :not(.animals) ka kerel buti vi vov, sar vi .animals.people thaj .animals, .people .

3. Po agor, inkapsulisaras e butona anθ-o jekh div kontejneri thaj phandas len anθ-i Gridzy galeria, thovindoj i opcia 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>

Sar dikhes, amen vi hasnisaras CSS selektoro vaś i opcia filterControls . O div kontejneri e id atributosa numaj kerel buti te kerel e butona maj lokho te alosarel pes prekal kodo CSS selektori.

Kodo si!

Te kames jekh JavaScript solucia, dikh o API .

API

Vi te si o Gridzy pesko API, but butja śaj te keren pes bi leste, numaj te manipulisarel pes o DOM. O Gridzy ka dikhel les thaj ka kerel o grid. Numaj isi vi jekh but zuralo API …

Manipulàcia e DOM-esqi

Vaś sa e manipulàcie e dokumentosqe objektosqe modelosqe (DOM) amenqe anglal trubul amen o elemento e kontejneresqo:

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

Thov patretura

Si importanto te vazdes thaj te pheres o nevo ćhavo elemento anglal te thoves les ko elemento e kontejneresko. Aver rig o Gridzy naśti te arakhel e ćaćutne dimenzije.

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

Te lel pes o patreto

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

Paruv opcie

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

Maj but pal-o manipulàcia e DOM-esqi śaj te arakhes anθ-e MDN web docs . Si vi jekh Introdukcia ko DOM so si disponibilo.

Proprietary API

Te hasnisaras o API, amen anglal trubul amen i Gridzy instanca, savi si phangli e Gridzy kontejneroske elementosa:

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

Te lel pes i opcia

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

Te lel pes sa e opcie

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

Thov opcie

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

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

Thov o filtro

Te thoves jekh filtro si numaj te thoves o filter e opcienqo savo śaj te avel varesavo validno CSS selektoro:

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

Thov Callback Funkcie

ĆHIVDO katar i verzia 2.4.0
Ker buti e moderne thaj maj fleksibilno Eventurenca . Dikh o aver kotor vash o detalura.

~~Gridzy.js 2 suportil varesave opcie vaś e funkcie vaś o akharipe palpale. Von śaj te aven thodine numaj prekal o API, numaj sar aver opcie:~~

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

	~~Deskrìpcia~~
~~`onBeforeOptionsChanged`~~	~~Callback funkcia savi si akhardi direktno anglal o thovipe e opcienqo.~~
~~`onOptionsChanged`~~	~~I funkcia te akharel pes palpale savi si akhardi direktno palal o thovipen e opcienqo.~~
~~`onBeforeRender`~~	~~Callback funkcia savi si akhardi direktno anglal o rendering.~~
~~`onRender`~~	~~Callback funkcia savi si akhardi direktno palal o rendering.~~

Utilizisar e eventura

desar i verzia 2.4.0

Tu śaj te hasnis le Gridzy eventurǎ sar le JavaScript eventurǎ:

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

Nesave eventura si phabarde pe Gridzy kontejneresko elemento thaj aver evenimentura si phabarde pe individualno artikloske elementura andar o kontejneresko elemento.

Evenimentura kerde pe Gridzy kontejneresko elemento:

	Deskrìpcia
`gridzyBeforeInit`	Jagha anglal o inicijaliziribe e galerijako.
`gridzyInit`	Jagha palal o inicijaliziribe e galerijako.
`gridzyBeforeOptionsChanged`	Te phabol anglal o thovipe e opcienqo.
`gridzyOptionsChanged`	phabarel pes palal o ćhivipen e opcienqo.
`gridzyBeforeRender`	Jagha anglal te kerel pes.
`gridzyRender`	Jagha palal o rendering.

Te xasardan varesave eventura kate, mangas tumen te bičhalen jekh mangipe vaś suporto .

event.target del o elemento Gridzy kontejneri.
event.detail.instance del i Gridzy instanca.

Evenimentura kerde pe elementura e artikloske:

	Deskrìpcia
`gridzyItemBeforeInit`	phabol anglal o inicijaliziribe e artiklosko.
`gridzyItemInit`	phabarel pes palal o iniciàlo e artiklosqo.
`gridzyItemLoading`	phabol kana o artiklo kezdisarel te pherdol.
`gridzyItemReady`	Phabarel pes kana o artiklo si gatisardo vash o kalkulipe e gridesko. O aspekto si pindžardo, numaj o dikhipe šaj te avel inke pherdo.
`gridzyItemComplete`	phabol kana o lil e artiklosko si pherdo pherdo.

Te xasardan varesave eventura kate, mangas tumen te bičhalen jekh mangipe vaś suporto .

event.target del o elemento e respektivno artiklosko.
event.detail.instance del i Gridzy instanca.

API – Globalno

Si varesave funkcie save si biphangle katar e Gridzy instancura. Anda kodo na trubul te las jekh instanca maj anglal.

Te lel pes i opcia standardo

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

Te lel pes sa e opcie standardo

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

Thov e opcie standardo

Akava na thovel e opcie sa e aba inicijalizirime Gridzy instancake, numa definisarel o bazo vash neve instancura. Numaj, te jekh opcia katar jekh egzistuime instanca ka avel resetirime prekal o gin null , vov ka utilizil o nevo defaultno gin.

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

Tu śaj te hasnis kadava te thoves opciě globalo, te akhares les anglal o DOM te avel gata. Akana na trubul te thoves opcie sar atributura maj but.

Automatizmură

Sar sa e automatizmura katar o Gridzy.js 2 si aktivno, naj trubujipe pala e metode telal. Numaj e automatizmura śaj te aven phanle te utilizin pes o Gridzy anθ-jekh maj tradicionalo drom:

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

Nesave katar kadala opcie naśti te aven thodine prekal data-gridzy- atributură vaj prekal setOptions() , vaś logikane rezone:

	Standardno valuàcia	Deskrìpcia
`autoInitOnDomReady`	`true`	Dikhel elementura save si len klasa `gridzy` kana pherel pes i rig thaj kerel len inicijalizirime. Te śaj te thovel pes prekal `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Detektiril neve elementura e klasasa `gridzy` kana von sikaven pes ko DOM thaj inicijalizirinel len. (eg sar te hasnis e tranzicie e rigăqe) Te śaj te thovel pes prekal `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Dikhel te si e ćhavorre elementură (imaźură) thodine vaj xasarde, thaj kerel o nevipen e gridăqo automatikane. Te śaj te thovel pes prekal `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definisarel te si e atributura `data-gridzy-` generalo hasnime vaj na. Te si akava `false` e opcie śaj te aven thodine numaj prekal o API savo si lesqe. Te śaj te thovel pes prekal `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Dikhel e paruvimata e `data-gridzy-` atributurenqe, thaj kerel o nevipen e gridosqo automatikane. Vi dikhel te si e `gridzyAnimated` klasa thodini vaj ćhudini thaj te si paruvimata `style` atributurenqe. Te si `useOptionAttributes` `false` , vov dikhel numaj paruvimata `style` atributurengo. Te śaj te thovel pes prekal `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Dikhel e paruvimata e `class` atributurenqe sa e ćhavorrenqe elementurenqe (image). Relevantno pal-e filtre. Te śaj te thovel pes prekal `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver desar i verzia 2.5.0	`true`	Dikhel e paruvimata e `src` atributurenqe sa e imagenqe. Relevantno kana si kerdo e React-esa vaj aver bibliotekenca. Te śaj te thovel pes prekal `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Resize Observer desar i verzia 2.6.0	`true`	Dikhel e paruvimata e elementosqe śukaripnaske. Relevantno vash o responsivno dizajno. (Anglal i verzia 2.6.0 sas kerdo jekh śundǎripen e eventosqo vaś o paruvipen e śerutnesqo) Te śaj te thovel pes prekal `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Ker inicializirime manualo

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

Xasaren i Instanca

Kodo phendo, o kontrasto katar o inicijaliziribe e Gridzy-esko.

gridzyInstance.destroy();
gridzyInstance = null;

Sinhronizirime e ćhavorrenqi lista manualo

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

Sinhronizirime jekh ćhavorresko elemento manualno

Običajno na trubul, numaj ko but tikne thana.

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

Sinhronizirime atributură manualo

Te dikhel pes kaj i opcia useOptionAttributes trubul te avel true vaś kadava.

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

Forcisarindoj o Renderipen

Običajno na trubul, vi te si sa e automatizmura phandade

gridzyInstance.render();

WordPress Plugin

JavaScript Biblioteka

Sèrviso