Guhertoya 2.x – Gridzy.Gallery

Malper bixweber hatiye wergerandin. Heke tiştek ne diyar e, ji kerema xwe li belgeya Îngilîzî binêrin.

Bikaranîna bingehîn

Pelên Gridzy li servera xwe barkirin û wan li malpera xwe zêde bikin (bi gelemperî di beşa serî de):

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

Koda HTML-ê zêde bikin (li her derê beşa laş):

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

Her eve! Ew mînakek bi tevahî fonksiyonel e. Destpêkirinek zêde hewce nake.

Veavakirin

Rêya herî hêsan a mîhengkirina Gridzy ev e, ku meriv tenê taybetmendiyên HTML-ê bikar bîne. Hûn tenê hewce ne ku navên vebijarkê bi data-gridzy- veqetînin. Ji ber vê yekê, ji bo danîna vebijarka spaceBetween , tenê taybetmendiya data-gridzy-spaceBetween lê zêde bike.

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

Vebijêrkên sereke

	Nirxa Bingehîn	Terîf
`animate`	`true`	Diyar dike ka dema ku şebek diguhezîne anîmasyon bêne bikar anîn (mînak, dema mezinkirina pencereya gerokê an dema danîna parzûnek).
`layout`	`justified`	Plansaziya bikar anîn diyar dike. Gridzy.js 2 du sêwiranên cihêreng piştgirî dike `justified` û `waterfall` . Her yek ji wan pîvanên vebijarkên xwe yên din hene, ku hûn dikarin li jêr vê tabloyê bibînin.
`filter`	`*`	Diyar dike ka kîjan wêne divê werin nîşandan. Li vir her hilbijêrek CSS dikare wekî nirx were bikar anîn. Bi gelemperî bixweber bi navgîniya `filterControls` ve têne danîn (vebijarka paşîn bibînin). Parzûnan binihêrin
`filterControls`		Diyar dike ka kîjan hêmanên formê dikarin ji bo fîlterkirina wêneyan werin bikar anîn. Her hilbijêrek CSS, ku hêmanên forma HTML-ê hildibijêre, dikare li vir wekî nirx were bikar anîn. Parzûnan binihêrin
`autoConsiderScrollBars`	`true`	Ji bo pêşbînîkirina firehiya berdest ger barên gerokê xuya bibin an winda bibin. Her gav tê pêşniyar kirin ku meriv wê `true` bihêle heya ku ev otomatî bibe sedema pirsgirêkan.

Justified Vebijarkên Layout

	Nirxa Bingehîn	Terîf
`autoFontSize`	`false`	Xweserî taybetmendiya mezinahiya tîpan a her qutikê li gorî mezinahiya qutiya orjînal nûve dike. Ji hêla xwerû ve taybetmendiya mezinahiya fontê bi eşkere nehatiye danîn.
`desiredHeight`	`190`	Bilindahiya xwestî ya rêzikên hêmanan diyar dike. Dê bilindahiya rastîn li gorî firehiya berdest û hêmanên di rêzê de were hesibandin.
`hideOnMissingImage`	`true`	Qutiyên ku wêneyên ku nehatine barkirin vedişêre.
`spaceBetween`	`4`	Dûrahiya di navbera hêmanan de bi pixel diyar dike.
`lastRowAlign` ji ber ku guhertoya 2.3.0	`justified`	Reftara rêza dawî diyar dike. Nirxên destûr `left` , `center` , `right` û `justified` ne.
`singleRowAlign` ji ber ku guhertoya 2.3.0	`justified`	Ger tenê yek rêzek hebe, tevgerê diyar dike. Nirxên destûr `left` , `center` , `right` û `justified` ne.
~~`fillLastRow`~~ ~~ji ber ku guhertoya 2.1.0~~	~~`true`~~	Ji guhertoya 2.4.0 ve hatî rakirin ( Ji ber guhertoya 2.3.0-ê DERKETÎYE) Wêneyan rêz dike ku rêza paşîn her gav bi tevahî tije bibe. Ger hûn plan dikin ku wêneyan bi dînamîk zêde bikin, ev dibe ku ramanek baş be ku hûn vê neçalak bikin. Li ser rêzikên yekane bandor nake (li `fillSingleRow` binêre).
`fillSingleRow` ji ber ku guhertoya 2.1.0	~~`true`~~	Ji guhertoya 2.4.0 ve hatî rakirin ( Ji ber guhertoya 2.3.0-ê DERKETÎYE) Ger tenê rêzek hebe, ew wêneyan bi vî rengî rêz dike ku rêz her gav bi tevahî tije bibe. Ger di galeriyê de tenê yek an du wêneyên we hebin, dibe ku fikrek baş be ku hûn vê neçalak bikin.

Waterfall Vebijarkên Layout

	Nirxa Bingehîn	Terîf
`autoFontSize`	`false`	Xweserî taybetmendiya mezinahiya tîpan a her qutikê li gorî mezinahiya qutiya orjînal nûve dike. Ji hêla xwerû ve taybetmendiya mezinahiya fontê bi eşkere nehatiye danîn.
`desiredWidth`	`250`	Firehiya stûnên xwestinê diyar dike. Firehiya rastîn dê li gorî firehiya berdest û hejmara stûnan were hesibandin.
`hideOnMissingImage`	`true`	Qutiyên ku wêneyên ku nehatine barkirin vedişêre.
`horizontalOrder`	`false`	Diyar dike ku hêman di her stûnê de ji çepê ber bi rastê ve bi hişkî yek elementek têne danîn, dûv re dîsa di stûna herî çepê de serbixwe dest pê dike ku tê de stûnek bêtir cîh e. Ji hêla xwerû ve hêman dê her gav di stûna bi bilindahiya herî piçûk de bêne danîn.
`spaceBetween`	`4`	Dûrahiya di navbera hêmanan de bi pixel diyar dike.
`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`.

Vebijarkên Zêdetir Pêşkeftî

Ji bo vebijarkên pêşkeftî, API-ê binihêrin.

HTML semantîk

Struktura HTML ya herî hêsan a Gridzy ev e:

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

Lêbelê, Gridzy pir maqûl e û hûn dikarin hema hema her avahiyek din a HTML-ê bikar bînin. Tenê çend xal hene ku meriv bifikirin:

Her zarokek hêmana konteynerê yek hêmanek di torê de temsîl dike.
Hem hêmana konteynerê û hem jî zarokên wê dikarin her celeb nîşangir bin, wek ul û li (tenê bifikirin ku hûn pêşnumayên gerokê ji nû ve bikin).
Ger hêmanek img bixwe ne zarokek rasterast be, jê re pola gridzyImage hewce dike.

Ji ber vê yekê ev jî avahiyek HTML-ê ya xebatê ye:

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

Bi taybetî heke hûn dixwazin sernavan lê zêde bikin, hûn hewceyê avahiyek HTML-ê ya pêşkeftî ne. Ji bo bêtir fêrbûna wê, li Captions & Skins binêre.

Sernivîs & Çerm

Heke hûn dixwazin sernavan li galeriya xwe zêde bikin, hûn hewce ne ku xuyangê diyar bikin. Ji ber vê yekê, hin çermên pêşdebirkirî hene. Her çerm ji pelek CSS-ê pêk tê. Pêdivî ye ku hûn vê pelê ji bilî pelên sereke yên Gridzy zêde bikin (bi gelemperî di beşa serî de):

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

Wekî din, hûn hewceyê avahiyek HTML-ya pêşkeftî ne:

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

Heke hûn li ser avahiya HTML-ê dipirsin, li HTML-ya Semaltê binêrin.

Ji bo sernavê hûn dikarin her celeb etîketê bikar bînin, tenê pê ewle bin ku ew xwedan pola gridzyCaption e. Hêmana img pêdivî bi pola gridzyImage heye.

Mînaka jorîn çermê gridzySkinClassic nîşanî we dide. Ji bo ku yek cûda bikar bînin, tenê navê çerm bi yek ji van veguherînin:

Çermên Têdeyî

	Dersên Berdest
gridzySkinBlank xalek destpêkek baş ji bo afirandina çermek xwe pêşdîtina zindî	`gridzySkinBlank`
gridzySkinClassic pêşdîtina zindî	`gridzySkinClassic` `gridzySkinClassicLight`(Ji ber guhertoya 2.6.0-ê DERKETÎYE)
gridzySkinFullOverlay pêşdîtina zindî	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(Ji ber guhertoya 2.6.0-ê DERKETÎYE)
gridzySkinLift pêşdîtina zindî	`gridzySkinLift` `gridzySkinLiftLight`(Ji ber guhertoya 2.6.0-ê DERKETÎ)
gridzySkinMagnifier fonksiyona zoomê ne tê de pêşdîtina zindî	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(Ji ber guhertoya 2.6.0-ê DERKETÎYE)

Hemî çermên jorîn tenê pelek CSS hewce ne, lê çermên din jî hene ku pelek JavaScript jî hewce dike:

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

	Dersên Berdest
gridzySkinBlur di IE de kar nake pêşdîtina zindî	`gridzySkinBlur` `gridzySkinBlurLight`(Ji ber guhertoya 2.6.0-ê DERKETÎYE)
gridzySkinCard pêşdîtina zindî	`gridzySkinCard` `gridzySkinCardLight`(Ji ber guhertoya 2.6.0-ê DERKETÎYE)

Vebijêrkên Çermê

Ji guhertoya 2.6.0 ve Vebijêrk hene ku çermên çêkirî mîheng bikin. Bi çermê taybetî ve girêdayî, hûn dikarin rengê paşîn, rengê nivîsê û siya nivîsê destnîşan bikin. Hûn tenê pêdivî ye ku taybetmendiyên xwerû yên CSS-ê bikar bînin ku hûn dikarin li vir bibînin:

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

Guherbarên piştgirî û nirxên xwerû yên ji bo her çerm li vir binihêrin:

gridzySkinClassic

Têgûherr	Nirxa Bingehîn	Agahî
`--background`	`rgba(0, 0, 0, .7)`	destûrê dide her nirxa paşîn a CSS
`--color`	`rgb(255, 255, 255)`	destûrê dide her nirxa rengê CSS
`--text-shadow`	`none`	destûrê dide her nirxa text-siya CSS

gridzySkinFullOverlay

Têgûherr	Nirxa Bingehîn	Agahî
`--background`	`rgba(0, 0, 0, .7)`	destûrê dide her nirxa paşîn a CSS
`--color`	`rgb(255, 255, 255)`	destûrê dide her nirxa rengê CSS
`--text-shadow`	`none`	destûrê dide her nirxa text-siya CSS

gridzySkinLift

Têgûherr	Nirxa Bingehîn	Agahî
`--background`	`rgba(0, 0, 0, .7)`	destûrê dide her nirxa paşîn a CSS
`--color`	`rgb(255, 255, 255)`	destûrê dide her nirxa rengê CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	destûrê dide her nirxa text-siya CSS

gridzySkinMagnifier

Têgûherr	Nirxa Bingehîn	Agahî
`--background`	`rgba(0, 0, 0, .7)`	destûrê dide her nirxa paşîn a CSS
`--color`	`rgb(255, 255, 255)`	destûrê dide her nirxa rengê CSS

Ev çerm piştgirî nade --text-shadow

gridzySkinBlur

Têgûherr	Nirxa Bingehîn	Agahî
`--background`	`rgba(0, 0, 0, .7)`	destûrê dide her nirxa paşîn a CSS
`--color`	`rgb(255, 255, 255)`	destûrê dide her nirxa rengê CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	destûrê dide her nirxa text-siya CSS

gridzySkinCard

Têgûherr	Nirxa Bingehîn	Agahî
`--background`	`rgba(0, 0, 0, 1)`	destûrê dide her nirxa paşîn a CSS
`--color`	`rgb(255, 255, 255)`	destûrê dide her nirxa rengê CSS
`--text-shadow`	`none`	destûrê dide her nirxa text-siya CSS

Hemî çermên pêşdîtin tenê sernavên nivîsê yên hêsan piştgirî dikin. Hûn dikarin çermên xwe yên pir xwe û tevlihevtir biafirînin. Ji kerema xwe li Style Gridzy binêre.

Style Gridzy

Ger çermek ji berê diyarkirî li gorî hewcedariyên we nebe, hûn dikarin şêwaza xweya xwe bikin.

Rêya herî hêsan ev e ku hûn pêşî çermek heyî kopî bikin û wê li gorî hewcedariyên xwe bicîh bikin. gridzySkinBlank a çermê ya pêşwextkirî bi gelemperî di pelê CSS de bingehek baş û her weha belgeyek baş peyda dike:

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

Di pelê CSS de hûn ê çînên gridzySkinBlank , gridzyImage û gridzyCaption bibînin. Gridzy bixwe ne hewceyê van dersan e. Ew tenê ji bo şêwazê têne bikar anîn û ji ber vê yekê heke hûn bixwazin hûn dikarin wan jêbikin an biguherînin.

Wekî din hûn ê pola CSS-ê gridzyItem bibînin. Gridzy vê polê bixweber ji hemî zarokên rasterast ên hêmana konteynerê sereke re saz dike. Ji ber vê yekê, hûn dikarin vê polê bikar bînin ku tiştên galeriya xwe şêwaz bikin.

Hişê Tiştên Girîng

Naveroka babetê divê bi tevahî bersivdar be. Bifikirin ku mezinahiya elementê bê guman dê biguhere. Li şûna nirxên pixel nirxên sedî bikar bînin. Û li vebijarka sêwirana Gridzy-ya autoFontSize binêre, ku mezinahiya tîpan bi mezinahiya qutiya tiştê ve girêdide.
Pêdivî ye ku her babetek xwedan rêjeyek ravekek diyarkirî be. Rêjeya hêmanê qet nayê guheztin û ji bo hesabkirina torê hewce ye. Ji ber vê yekê heke hêmanek bixweber xwedan rêjeyek xuyangê ya baş nebe, wê bi destan pêşdîtin bikin (mînak bi riya css).

Di hin rewşan de, berî destpêkirina Gridzy dibe ku şêwazkirina naveroka tiştan hêsantir be. Ji bo vê yekê bi tenê pola gridzy an pelê javascript Gridzy bi demkî rakin.

Her eve! Ya ku hûn hewce ne ku hûn çermê xwe pir xwe ava bikin ev e. Piraniya çermên pêşwext ji vê yekê zêdetir bikar naynin.

Lê heke hûn bixwazin dibe ku bêtir hebe…

Çermên pêşketî

Gridzy ji tenê gridzyItem bêtir dersên CSS bikar tîne. Piraniya wan dê bixweber bêne danîn û hûn dikarin wan ji bo şêwazê jî bikar bînin.

Dersên konteynerê sereke

Navê polê	Terîf
`gridzy` ji bo danîna bi destan	Gridzy bixwe hêmanên bi vê polê re dibîne û wan dest pê dike.
`gridzyAnimated`	Ger vebijarka `animate` `true` be dê bixweber were saz kirin. Ger ev çîn bi destan were danîn, vebijarka `animate` dê bixweber jî `true` bibe (ji bilî ku ew bi eşkere wekî `false` were danîn).

Çînên Babetê

Navê polê	Terîf
`gridzyItem`	Dema ku tişt dest bi pêvajoya destpêkirinê bike dê were saz kirin. Dê qet neyê rakirin.
`gridzyItemInitializing`	Dema ku tişt dest bi pêvajoya destpêkirinê bike dê were saz kirin. Dê bi `gridzyItemReady` were guheztin gava ku tişt bi tevahî were destpêkirin. Wateya wê ne ku wêne bi tevahî hatine barkirin (li `gridzyItemLoading` binêre), lê tişt amade ye ku xuya bibe.
`gridzyItemReady`	Dê li şûna `gridzyItemInitializing` gava ku tişt bi tevahî were destpêkirin. Dê qet neyê rakirin. Wateya wê ne ku wêne bi tevahî hatine barkirin (li `gridzyItemComplete` binêre), lê tişt amade ye ku xuya bibe.
`gridzyItemLoading`	Dema ku tişt dest bi pêvajoya destpêkirinê bike dê were saz kirin. Hema ku wêneyên tê de (bi gelemperî tenê yek) bi tevahî werin barkirin dê bi `gridzyItemComplete` were guheztin.
`gridzyItemComplete`	Heya ku wêneyên tê de (bi gelemperî tenê yek) bi tevahî werin barkirin dê `gridzyItemLoading` biguhezîne. Dê qet neyê rakirin.
`gridzyItemInitialToVisible`	Dema ku tişt cara yekem dest pê dike dê were saz kirin. Hema ku tişt bi tevahî xuya bibe dê were rakirin.
`gridzyItemVisible`	Dema ku tişt bi tevahî xuya bibe dê were saz kirin. Dema ku tişt dest bi windabûnê bike dê were rakirin.
`gridzyItemVisibleToHidden`	Dema ku tişt dest bi windabûnê bike dê were danîn. Hema ku tişt bi tevahî were veşartin dê were rakirin.
`gridzyItemHidden`	Hema ku tişt bi tevahî were veşartin dê were saz kirin. Dema ku tişt dest pê dike dê were rakirin.
`gridzyItemHiddenToVisible`	Dê gava ku tişt dest bi xuyangê bike (ji bilî xuyabûna yekem - li pola `gridzyItemInitialToVisible` binêre). Hema ku tişt bi tevahî xuya bibe dê were rakirin.
`gridzyItemVisibleToVisible`	Hema ku tiştek di torê de hate guheztin dê were saz kirin, lê tişt bixwe bû û xuya bû. Dema ku anîmasyona guheztinê qediya dê were rakirin.

Ji hêla xwerû ve nîşana pêvajoyê û anîmasyonên ji bo xuyang û windabûna wêneyan ji hêla pelê sereke ya CSS-ê ya Gridzy ve têne diyar kirin.

Bi van dersên CSS-ê yên jorîn hûn dikarin nîşana pêvajoyê û anîmasyonên xwe şêwaz bikin. Biwêre li pela sereke ya CSS ya Gridzy binêre, da ku fêm bike ku hûn ê çi bi ser bixin. Ti tirs tune, her tişt li wir baş tê belge kirin.

Optimize Loading

Ger hûn gelek wêneyan bikar bînin, dibe ku ramanek baş be ku hûn alîkariya Gridzy bikin ku torê zûtir ava bike.

Pêşîgirtina Wêneyên Jumping

Gridzy bê guman pêdivî bi rêjeya dîmenê ya hemî wêneyan heye ku torê hesab bike. Heke hin wêne amade bin û yên din ne amade bin, ev rastî di hêmanên hilkişînê de encam didin. Wêneyên bêtir hene, ev bandor dikare bêtir acizker be.

Ji bo pêşîgirtina vê tevgerê, tenê ji bo hemî hêmanên img taybetmendiyên width û height bicîh bikin. Girîng e ku ji bo her wêneyek kesane nirxên rast werin danîn, wekî din dê wêne werin xera kirin. Nirxên rast firehî û bilindahiya eslî ya wêneya têkildar in:

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

Dûv re Gridzy dikare tavilê torê hesab bike bêyî ku hewce bike ku mezinahiyên rastîn ên wêneyan zanibe.

Lazy Loading

Ji bo barkirina tenê wêneyên ku di dîmendera xuyang de ne, tenê van gavan bişopînin:

Taybetmendiyên width û height wekî ku li jor hatî destnîşan kirin têxin (pê bawer bin ku nirxên rast bikar bînin)
Hemî taybetmendiyên src bi data-gridzylazysrc veguherînin wekî ku li jêr tê xuyang kirin (heke we taybetmendiyên srcset jî hebin, wan bi data-gridzylazysrcset veguherînin).

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

Piştî van gavan gava ku ew nêzikî an di hundurê dîmenderê de bin dê wêne werin barkirin.

Process Indicator

Nîşana pêvajoyê îkonek anîmasyonek piçûk e ku dema ku wêne tê barkirin xuya dike. Ger hûn sernav û çerm bikar bînin, nîşana pêvajoyê dê bixweber were xuyang kirin. Wekî din, hûn hewce ne ku hin sererastkirinê:

Her elementek img -ê têxe nav hêmanek div
(an jî di hêmanek din de - ji bo bêtir HTML-ya semantîk binêre)
Dersa gridzyImage li her hêmanek img zêde bikin

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

Piştî vê yekê, heke barkirina wêneyan wext digire, divê hûn nîşanên pêvajoyê bibînin.

Parzûnên

Parzûnên li Gridzy pir hêsan lê bi hêz in. Ji we re çi celeb fîlterek hewce dike jî, îhtîmalek pir mezin e ku ew pêk were. Ya ku hûn hewce ne ev e, piçek CSS û çend hêmanên forma HTML-ê…

Li vir mînakek fonksiyonel e:

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

Werin em Wê gav bi gav ava bikin

1. Pêşî pêdiviya me bi avahiya HTML-ya adetî ya Gridzy heye û ji bo hemî tiştên galeriyê navên polê saz bikin, da ku em paşê wan fîlter bikin

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

Di vê nimûneyê de em ji bo her hêmanek tenê çînek bikar tînin. Lê hûn dikarin ji bo yek hêmanek pir çînan jî saz bikin, heke ew hêman bi gelek fîlteran ve were dîtin.

2. Dûv re em hin bişkokan lê zêde dikin ku em dikarin wê hingê parzûnan biguherînin

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

Li şûna bişkokan, hûn dikarin hêmanên formên din ên wekî qutiyên kontrolê, bişkokên radyoyê, zeviyên hilbijêrin û hwd jî bikar bînin.

Wekî ku hûn dikarin bibînin, nirxên bişkokan hilbijêrên CSS-ê yên gelemperî ne. Hema ku me qediya, klîkek li ser bişkokek wusa dê wêneyên ku bi hilbijarka CSS-ê re hevaheng in nîşan bide. Ji hêla teknîkî ve ew tenê vebijarka filter li ser vê nirxê destnîşan dike.

Her weha hûn dikarin hilbijêrên pir tevlihevtir bikar bînin. Mesela :not(.animals) jî dê bixebite, herwekî .animals.people û .animals, .people .

3. Di dawiyê de, em bişkokan di konteynirek div de vedihewînin û wan bi galeriya Gridzy ve girêdidin, bi danîna vebijarka 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>

Wekî ku hûn dibînin, em ji bo vebijarka filterControls hilbijêrek CSS-ê jî bikar tînin. Konteynera div bi taybetmendiya id tenê ji bo hilbijartina bişkokan bi rêya wê hilbijêra CSS-ê re hêsantir dike.

Her eve!

Heke hûn çareseriyek JavaScript tercîh dikin, API-ê binihêrin.

API

Her çend Gridzy xwedan API-ya xwe ye jî, pir tişt bêyî wê têne kirin, bi tenê bi manipulasyona DOM-ê. Gridzy wê ferq bike û torê eyar bike. Lê di heman demê de API-yek pir hêzdar jî heye…

Manîpulasyona DOM

Ji bo hemî manîpulasyonên Modela Objeya Belgeyê (DOM) em pêşî hewceyê hêmana konteyner in:

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

Wêne zêde bikin

Berî ku hûn wê li hêmana konteynerê zêde bikin, girîng e ku hûn hêmana zaroka nû bi tevahî ava bikin û tijî bikin. Wekî din Gridzy nikare pîvanên rast tespît bike.

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

Wêne jêbirin

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

Vebijêrk biguherînin

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

Zêdetir di derbarê manîpulekirina DOM-ê de hûn dikarin li belgeyên webê MDN bibînin. Di heman demê de Destpêkek DOM-ê jî heye.

API-ya xwedan

Ji bo ku API-ê bikar bînin, em pêşî hewceyê mînaka Gridzy e, ku bi hêmana konteynerê Gridzy ve girêdayî ye:

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

Vebijêrk bistînin

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

Hemî Vebijarkan bistînin

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

Vebijêrkên Set

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

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

Parzûnê sepînin

Serlêdana parzûnek tenê danîna filter vebijarkê ye ku dikare her hilbijêrek derbasdar a CSS-ê be:

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

Fonksiyonên Vegera Bangê zêde bikin

Ji ber guhertoya 2.4.0-ê DEPRECATED
Li şûna wê Bûyerên nûjen û maqûltir bikar bînin. Ji bo hûragahiyan li beşa paşîn binêre.

~~Gridzy.js 2 ji bo fonksiyonên vegerê hin vebijarkan piştgirî dike. Ew dikarin tenê bi navgîniya API-ya xwedan werin danîn, lê mîna vebijarkên din:~~

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

	~~Terîf~~
~~`onBeforeOptionsChanged`~~	~~Fonksiyona vegerandina bangê ya ku rasterast berî vebijarkan tê veguheztin.~~
~~`onOptionsChanged`~~	~~Fonksiyona vegerê ya ku piştî vebijarkan rasterast tê gazî kirin.~~
~~`onBeforeRender`~~	~~Fonksiyona vegerandina bangê ya ku rasterast berî vegotinê tê gazî kirin.~~
~~`onRender`~~	~~Fonksiyona vegerandina gazîkirinê ya ku rasterast piştî vegotinê tê gazî kirin.~~

Bûyeran bikar bînin

ji ber ku guhertoya 2.4.0

Hûn dikarin bûyerên Gridzy tam mîna bûyerên JavaScript-ê yên gelemperî bikar bînin:

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

Hin bûyer li ser hêmana konteynerê Gridzy û bûyerên din jî li ser hêmanên hêmanên kesane yên di hundurê hêmana konteynerê de têne şewitandin.

Bûyerên ku li ser hêmana konteynerê Gridzy hatine şewitandin:

	Terîf
`gridzyBeforeInit`	Berî destpêkirina galeriyê dişewite.
`gridzyInit`	Piştî destpêkirina galeriyê dişewite.
`gridzyBeforeOptionsChanged`	Agir berî vebijarkên danîn.
`gridzyOptionsChanged`	Piştî vebijarkên sazkirinê agir dike.
`gridzyBeforeRender`	Berî rendering agir dike.
`gridzyRender`	Piştî rendering agir dike.

Ger hûn bûyerek li vir ji bîr nekin, ji kerema xwe daxwaznameyek piştgiriyê bişînin.

event.target hêmana konteynerê Gridzy peyda dike.
event.detail.instance mînaka Gridzy peyda dike.

Bûyerên ku li ser hêmanên babetê hatine şewitandin:

	Terîf
`gridzyItemBeforeInit`	Berî destpêkirina babetekê dişewite.
`gridzyItemInit`	Piştî destpêkirina babetê dişewite.
`gridzyItemLoading`	Dema ku tişt dest bi barkirinê dike, dişewite.
`gridzyItemReady`	Dema ku tişt ji bo hesabkirina torê amade ye, dişewite. Ji ber vê yekê rêjeya pîvanê tê zanîn, lê dibe ku wêne hîn jî were barkirin.
`gridzyItemComplete`	Dema ku wêneyê tişt bi tevahî tê barkirin dişewite.

Ger hûn bûyerek li vir ji bîr nekin, ji kerema xwe daxwaznameyek piştgiriyê bişînin.

event.target hêmana babetê têkildar peyda dike.
event.detail.instance mînaka Gridzy peyda dike.

API - Global

Hin fonksiyon hene ku ji mînakên Gridzy serbixwe ne. Ji ber vê yekê ne hewce ye ku em berê mînakek bistînin.

Vebijarka Xweseriyê bistînin

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

Hemî Vebijarkên Pêşbirk bistînin

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

Vebijêrkên Default Set

Ev vebijarkên hemî nimûneyên Gridzy yên ku berê hatine destpêkirin destnîşan nake, lê bingehê ji bo mînakên nû diyar dike. Lêbelê, heke vebijarkek mînakek heyî bi riya nirxa null were nûve kirin, ew ê nirxa xwerû ya nû bikar bîne.

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

Hûn dikarin vê yekê bikar bînin ku vebijarkan li seranserê cîhanê bicîh bikin, heke hûn jê re dibêjin berî ku DOM amade be. Ji ber vê yekê hûn ê êdî ne hewce ne ku vebijarkan wekî taybetmendî destnîşan bikin.

Automatisms

Heya ku hemî otomatîkên Gridzy.js 2 çalak in, hewcedarî bi rêbazên jêrîn tune. Lê otomatîzma dikarin bêne qut kirin da ku Gridzy bi rengek kevneşopî bikar bînin:

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

Hin ji van vebijarkan ji ber sedemên mentiqî nikarin bi navgîniya data-gridzy- ve an jî bi riya setOptions() ve werin saz kirin:

	Nirxa Bingehîn	Terîf
`autoInitOnDomReady`	`true`	Di barkirina rûpelê de hêmanên bi sinifa `gridzy` tespît dike û wan dest pê dike. Bi rêya `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Gava ku ew di DOM-ê de xuya dibin hêmanên nû bi `gridzy` a pola nas dike û wan dest pê dike. (mînak bikaranîna veguheztina rûpelan) Bi rêya `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Teşhîs dike ka hêmanên zarokan (wêneyên) lê têne zêdekirin an jêbirin, û torê bixweber nûve dike. Bi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Diyar dike ka taybetmendiyên `data-gridzy-` bi gelemperî têne bikar anîn an na. Heke ev `false` be, vebijarkên tenê bi navgîniya API-ya xwedan têne danîn. Bi rêya `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Guhertinên taybetmendîyên `data-gridzy-` tespît dike, û torê bixweber nûve dike. Di heman demê de diyar dike ka pola `gridzyAnimated` tê zêdekirin an jêbirin û gelo guhertinên taybetmendiya `style` çêdibin. Ger `useOptionAttributes` `false` be, ew tenê guhertinên taybetmendiya `style` nas dike. Bi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Guhertinên taybetmendiyên `class` hemî hêmanên zarokan (wêne) destnîşan dike. Di derbarê fîlteran de têkildar e. Bi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver ji ber ku guhertoya 2.5.0	`true`	Guhertinên taybetmendiyên `src` yên hemî wêneyan destnîşan dike. Dema ku bi React an pirtûkxaneyên mîna wan re tê bikar anîn têkildar e. Bi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver ji ber guhertoya 2.6.0	`true`	Guhertinên firehiya hêmanê tespît dike. Di derbarê sêwirana bersivdar de têkildar e. (Berî guhertoya 2.6.0 guhdarkerek bûyera mezinbûna pencereyê hate bikar anîn) Bi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Destpêkirin bi destan

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

Mînakê hilweşînin

Bi giranî got, berevajî destpêkirina Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Lîsteya Zarokan bi destan hevdeng bikin

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

Bi destan hêmanek zarokek yekane hevdeng bikin

Bi gelemperî ne hewce ye, ji bilî rewşên pir kêm.

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

Taybetmendiyên bi destan hevdeng bikin

Têbînî ku vebijarka useOptionAttributes divê ji bo vê true be.

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

Force Rendering

Bi gelemperî ne hewce ye, hetta ku hemî otomatîzm têne girtin

gridzyInstance.render();

Plugin WordPress

Pirtûkxaneya JavaScript

Xizmetkar