2.x wersiýasy - Gridzy.Gallery

Web sahypasy awtomatiki terjime edildi. Bir zat düşnüksiz bolsa, iňlis resminamalaryna göz aýlaň.

Esasy ulanylyşy

Gridzy faýllaryny serweriňize ýükläň we web sahypaňyza goşuň (köplenç baş bölümde):

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

HTML kody goşuň (beden bölüminiň islendik ýerinde):

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

Ine! Bu doly işleýän mysal. Goşmaça başlangyç talap edilmeýär.

Sazlama

“Gridzy” -ni düzmegiň iň aňsat usuly, diňe HTML atributlaryny ulanmakdyr. Diňe opsiýa atlaryny data-gridzy- bilen goşmaly. Şeýlelik bilen, spaceBetween opsiýasyny bellemek üçin diňe data-gridzy-spaceBetween atributyny goşuň.

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

Esasy opsiýalar

	Bellenen baha	Düşündiriş
`animate`	`true`	Panel üýtgän mahaly animasiýalaryň ulanylmalydygyny kesgitleýär (mysal üçin, brauzer penjiresiniň ölçegini üýtgedeniňizde ýa-da süzgüç düzeniňizde).
`layout`	`justified`	Ulanylan tertibi kesgitleýär. Gridzy.js 2 iki dürli düzülişi goldaýar `justified` we `waterfall` . Olaryň hersiniň öz goşmaça opsiýa parametrleri bar, olary şu tablisanyň aşagyndan tapyp bilersiňiz.
`filter`	`*`	Haýsy şekilleriň görkezilmelidigini kesgitleýär. Islendik CSS-saýlaýjy bu ýerde baha hökmünde ulanylyp bilner. Adatça `filterControls` arkaly awtomatiki düzüň (indiki opsiýa serediň). Filtrleri gözden geçiriň
`filterControls`		Suratlary süzmek üçin haýsy form elementleriniň ulanylyp bilinjekdigini kesgitleýär. HTML form elementlerini saýlaýan islendik CSS saýlaýjy, bu ýerde baha hökmünde ulanylyp bilner. Filtrleri gözden geçiriň
`autoConsiderScrollBars`	`true`	Aýlaw panelleri peýda bolsa ýa-da ýok bolsa, bar bolan giňligi çaklamak. Bu awtomatizm kynçylyk döretmese, elmydama `true` goýmak maslahat berilýär.

Justified Layout opsiýalary

	Bellenen baha	Düşündiriş
`autoFontSize`	`false`	Her gutynyň şrift ölçeg häsiýetini asyl gutynyň ululygyna görä awtomatiki täzeleýär. Adaty tertipde şrift ölçegli emläk aç-açan kesgitlenmedi.
`desiredHeight`	`190`	Element hatarlarynyň islenýän beýikligini kesgitleýär. Hakyky beýiklik, giňlige we hatardaky elementlere baglylykda hasaplanar.
`hideOnMissingImage`	`true`	Edükläp bolmaýan şekilleri öz içine alýan gutulary gizleýär.
`spaceBetween`	`4`	Pikseldäki elementleriň arasyndaky aralygy kesgitleýär.
`lastRowAlign` 2.3.0 wersiýasyndan bäri	`justified`	Soňky hataryň özüni alyp barşyny kesgitleýär. Rugsat berlen bahalar `left` , `center` , `right` we `justified` .
`singleRowAlign` 2.3.0 wersiýasyndan bäri	`justified`	Diňe bir hatar bar bolsa özüni alyp barşyny kesgitleýär. Rugsat berlen bahalar `left` , `center` , `right` we `justified` .
~~`fillLastRow`~~ ~~2.1.0 wersiýasyndan bäri~~	~~`true`~~	2.4.0 wersiýasyndan aýryldy ( 2.3.0 wersiýasyndan bäri GEREK) Suratlary iň soňky hatar elmydama doly doldurar ýaly tertipläň. Suratlary dinamiki taýdan goşmak isleseňiz, muny ýapmak gowy pikir bolup biler. Singleeke hatarlara täsir etmeýär ( `fillSingleRow` serediň).
`fillSingleRow` 2.1.0 wersiýasyndan bäri	~~`true`~~	2.4.0 wersiýasyndan aýryldy ( 2.3.0 wersiýasyndan bäri GEREK) ~~Diňe bir hatar bar bolsa, hatar elmydama dolulygyna şekillendirýär. Galereýada diňe bir ýa-da iki suratyň bolmagy mümkin bolsa, muny ýapmak gowy pikir bolup biler.~~

Waterfall Layout opsiýalary

	Bellenen baha	Düşündiriş
`autoFontSize`	`false`	Her gutynyň şrift ölçeg häsiýetini asyl gutynyň ululygyna görä awtomatiki täzeleýär. Adaty tertipde şrift ölçegli emläk aç-açan kesgitlenmedi.
`desiredWidth`	`250`	Sütünleriň islenýän giňligini kesgitleýär. Hakyky ini, bar bolan giňlige we sütünleriň sanyna baglylykda hasaplanar.
`hideOnMissingImage`	`true`	Edükläp bolmaýan şekilleri öz içine alýan gutulary gizleýär.
`horizontalOrder`	`false`	Elementleriň her sütünde çepden saga berk bir element ýerleşdirilendigini kesgitleýär, soňra sütüniň has köp ýerleşýän ýerinde iň çep sütünde täzeden başlaýar. Düzgüne görä elementler elmydama iň kiçi beýiklik bilen sütüne ýerleşdiriler.
`spaceBetween`	`4`	Pikseldäki elementleriň arasyndaky aralygy kesgitleýär.
`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`.

Has giňişleýin opsiýalar

Has ösen wariantlar üçin API-i gözden geçiriň.

Semantik HTML

Gridziniň iň ýönekeý HTML gurluşy:

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

Şeýle-de bolsa, “Gridzy” örän çeýe we beýleki HTML gurluşlaryny diýen ýaly ulanyp bilersiňiz. Göz öňünde tutmaly birnäçe pikir bar:

Konteýner elementiniň her bir çagasy gözenegiň bir elementini görkezýär.
Konteýner elementi we çagalary ul we li ýaly islendik bellik görnüşi bolup biler (diňe brauzeriň başlangyçlaryny täzeden düzmegi göz öňünde tutuň).
img elementi gönüden-göni çaganyň özi däl bolsa, gridzyImage synpyna mätäç.

Şeýlelikde, bu hem işleýän HTML gurluşy:

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

Esasanam ýazgy goşmak isleseňiz, ösen HTML gurluşy gerek. Bu hakda has giňişleýin öwrenmek üçin Tionsazgylara we derilere göz aýlaň.

Tionsazgylar we deriler

Galereýaňyza ýazgylar goşmak isleseňiz, daşky görnüşini kesgitlemeli. Şonuň üçin öňünden kesgitlenen deriler bar. Her deri CSS faýlyndan durýar. Bu faýly esasy Gridzy faýllaryna goşmaça goşmaly (köplenç baş bölümde):

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

Mundan başga-da, ösen HTML gurluşy gerek:

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

HTML gurluşy bilen gyzyklanýan bolsaňyz, semantik HTML- e göz aýlaň.

Tionazgy üçin belligiň islendik görnüşini ulanyp bilersiňiz, diňe gridzyCaption synpynyň bardygyna göz ýetiriň. img elementi gridzyImage synpyna mätäç.

Aboveokardaky mysal size gridzySkinClassic derini görkezýär. Başga birini ulanmak üçin deriniň adyny şularyň biri bilen çalyşyň:

Derileri öz içine alýar

	Elýeterli synplar
gridzySkinBlank öz derini döretmek üçin gowy başlangyç nokady göni ýaýlym	`gridzySkinBlank`
gridzySkinClassic göni ýaýlym	`gridzySkinClassic` `gridzySkinClassicLight`(2.6.0 wersiýasyndan bäri GEREK)
gridzySkinFullOverlay göni ýaýlym	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(2.6.0 wersiýasyndan bäri GEREK)
gridzySkinLift göni ýaýlym	`gridzySkinLift` `gridzySkinLiftLight`(2.6.0 wersiýasyndan bäri GEREK)
gridzySkinMagnifier ulaltmak funksiýasy goşulmaýar göni ýaýlym	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(2.6.0 wersiýasyndan bäri GEREK)

Aboveokardaky derileriň hemmesine diňe CSS faýly gerek, ýöne JavaScript faýlyny talap edýän goşmaça deriler bar:

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

	Elýeterli synplar
gridzySkinBlur IE-de işlemeýär göni ýaýlym	`gridzySkinBlur` `gridzySkinBlurLight`(2.6.0 wersiýasyndan bäri GEREK)
gridzySkinCard göni ýaýlym	`gridzySkinCard` `gridzySkinCardLight`(2.6.0 wersiýasyndan bäri GEREK)

Deriniň görnüşleri

2.6.0 wersiýasyndan bäri gurlan derileri sazlamak üçin opsiýalar bar. Belli bir derä baglylykda fon reňkini, tekst reňkini we tekst kölegesini düzüp bilersiňiz. Diňe şu ýerde görşüňiz ýaly CSS aýratyn häsiýetlerini ulanmaly bolarsyňyz:

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

Her deri üçin goldanýan üýtgeýänleri we deslapky bahalary gözden geçiriň:

gridzySkinClassic

Üýtgeýji	Bellenen baha	Maglumat
`--background`	`rgba(0, 0, 0, .7)`	islendik CSS fon bahasyna mümkinçilik berýär
`--color`	`rgb(255, 255, 255)`	islendik CSS reňk bahasyna mümkinçilik berýär
`--text-shadow`	`none`	islendik CSS tekst-kölege bahasyna mümkinçilik berýär

gridzySkinFullOverlay

Üýtgeýji	Bellenen baha	Maglumat
`--background`	`rgba(0, 0, 0, .7)`	islendik CSS fon bahasyna mümkinçilik berýär
`--color`	`rgb(255, 255, 255)`	islendik CSS reňk bahasyna mümkinçilik berýär
`--text-shadow`	`none`	islendik CSS tekst-kölege bahasyna mümkinçilik berýär

gridzySkinLift

Üýtgeýji	Bellenen baha	Maglumat
`--background`	`rgba(0, 0, 0, .7)`	islendik CSS fon bahasyna mümkinçilik berýär
`--color`	`rgb(255, 255, 255)`	islendik CSS reňk bahasyna mümkinçilik berýär
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	islendik CSS tekst-kölege bahasyna mümkinçilik berýär

gridzySkinMagnifier

Üýtgeýji	Bellenen baha	Maglumat
`--background`	`rgba(0, 0, 0, .7)`	islendik CSS fon bahasyna mümkinçilik berýär
`--color`	`rgb(255, 255, 255)`	islendik CSS reňk bahasyna mümkinçilik berýär

Bu deri --text-shadow goldaw bermeýär

gridzySkinBlur

Üýtgeýji	Bellenen baha	Maglumat
`--background`	`rgba(0, 0, 0, .7)`	islendik CSS fon bahasyna mümkinçilik berýär
`--color`	`rgb(255, 255, 255)`	islendik CSS reňk bahasyna mümkinçilik berýär
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	islendik CSS tekst-kölege bahasyna mümkinçilik berýär

gridzySkinCard

Üýtgeýji	Bellenen baha	Maglumat
`--background`	`rgba(0, 0, 0, 1)`	islendik CSS fon bahasyna mümkinçilik berýär
`--color`	`rgb(255, 255, 255)`	islendik CSS reňk bahasyna mümkinçilik berýär
`--text-shadow`	`none`	islendik CSS tekst-kölege bahasyna mümkinçilik berýär

Öňünden kesgitlenen deriler diňe ýönekeý tekst ýazgylaryny goldaýar. Özüňiziň has çylşyrymly derileri döredip bilersiňiz. Stil Gridzy -a göz aýlaň.

Stil Gridzy

Öňünden kesgitlenen deri zerurlyklaryňyza laýyk gelmeýän bolsa, özüňiziňki düzüp bilersiňiz.

Iň aňsat ýol, ilki bar bolan derini göçürip, öz islegleriňize laýyklaşdyrmakdyr. Öňünden kesgitlenen deri gridzySkinBlank adatça CSS faýlynda gowy resminama we gowy resminama berer:

/** SKIN Blank **/

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

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

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

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

CSS faýlynda gridzySkinBlank , gridzyImage we gridzyCaption sapaklaryny tapyp bilersiňiz. Gridziniň özi bu sapaklara mätäç däl. Olar diňe bezeg üçin ulanylýar, isleseňiz olary aýyryp ýa-da adyny üýtgedip bilersiňiz.

Mundan başga-da, CSS synp gridzyItem taparsyňyz. Gridzy bu synpy esasy konteýner elementiniň gönüden-göni çagalaryna awtomatiki düzýär. Şeýlelik bilen, bu synpy galereýaňyzyň zatlaryny düzmek üçin ulanyp bilersiňiz.

Möhüm zatlary pikir ediň

Harydyň mazmuny doly jogap bermeli. Elementiň ululygynyň hökman üýtgejekdigini göz öňünde tutuň. Piksel bahalarynyň ýerine göterim bahalaryny ulanyň. Şriftiň ululygyny element gutusynyň ululygyna baglanyşdyrýan “Gridzy” düzüliş autoFontSize opsiýasyna göz aýlaň.
Her elementiň gowy kesgitlenen tarapy bolmaly. Harydyň nukdaýnazary hiç haçan üýtgemez we gözenegi hasaplamak üçin zerurdyr. Şonuň üçin bir elementiň awtomatiki usulda gowy kesgitlenen tarapy ýok bolsa, ony el bilen kesgitläň (mysal üçin css arkaly).

Käbir ýagdaýlarda, Gridzy işe başlamazdan ozal zatlaryň mazmunyny düzmek has aňsat bolup biler. Munuň üçin synp gridzy ýa-da Gridzy javascript faýlyny wagtlaýyn aýyryň.

Ine! Öz deriňizi gurmak üçin zerur zat. Öňünden kesgitlenen derileriň köpüsi muny has köp ulanmaýar.

Youöne isleseňiz has köp zat bolup biler ...

Ösen deriler

Gridzy diňe gridzyItem den has köp CSS synpyny ulanýar. Olaryň köpüsi awtomatiki usulda gurlar we olary stil görnüşinde hem ulanyp bilersiňiz.

Esasy konteýner synplary

Synpyň ady	Düşündiriş
`gridzy` el bilen düzmek	Gridzy awtomatiki usulda bu synp bilen elementleri tapýar we başlaýar.
`gridzyAnimated`	`animate` görnüşi `true` bolsa awtomatiki usulda düzüler. Bu synp el bilen düzülen bolsa, `animate` opsiýa hem awtomatiki usulda `true` aşar (aç-açan `false` bolsa).

Haryt synplary

Synpyň ady	Düşündiriş
`gridzyItem`	Haryt başlangyç işine başlan badyna kesgitlener. Hiç haçan aýrylmaz.
`gridzyItemInitializing`	Haryt başlangyç işine başlan badyna kesgitlener. Haryt doly işe girizilen badyna `gridzyItemReady` bilen çalşyrylar. Suratlaryň doly ýüklenendigini aňlatmaýar ( `gridzyItemLoading` serediň), ýöne element görünmäge taýyn.
`gridzyItemReady`	Haryt doly işe girizilen badyna `gridzyItemInitializing` çalyşar. Hiç haçan aýrylmaz. Suratlaryň doly ýüklenendigini aňlatmaýar ( `gridzyItemComplete` serediň), ýöne element görünmäge taýyn.
`gridzyItemLoading`	Haryt başlangyç işine başlan badyna kesgitlener. Içindäki suratlar (köplenç diňe bir) doly ýüklenen badyna `gridzyItemComplete` bilen çalşylar.
`gridzyItemComplete`	Içindäki şekiller (köplenç diňe bir) doly ýüklenen badyna `gridzyItemLoading` iň ýerini alar. Hiç haçan aýrylmaz.
`gridzyItemInitialToVisible`	Haryt ilkinji gezek peýda bolup başlansoň düzüler. Haryt doly görünýän badyna aýrylar.
`gridzyItemVisible`	Haryt doly görünýän badyna düzüler. Haryt ýitip başlansoň aýrylar.
`gridzyItemVisibleToHidden`	Haryt ýitip başlansoň düzüler. Haryt doly gizlenen badyna aýrylar.
`gridzyItemHidden`	Haryt doly gizlenen badyna düzüler. Haryt peýda bolup başlansoň aýrylar.
`gridzyItemHiddenToVisible`	Haryt peýda bolup başlan badyna düzüler (ilkinji gezek peýda bolmakdan başga - `gridzyItemInitialToVisible` synpyna serediň). Haryt doly görünýän badyna aýrylar.
`gridzyItemVisibleToVisible`	Torda bir zat üýtgän badyna gurlar, ýöne elementiň özi görünýärdi. Üýtgetme animasiýasy gutaran badyna aýrylar.

Gaýybana tertip görkezijisi we şekilleriň peýda bolmagy we ýitip gitmegi üçin animasiýalar Gridzy esasy CSS faýly bilen öňünden kesgitlenýär.

Aboveokarda agzalan CSS synplary bilen öz iş görkezijiňizi we animasiýalaryňyzy düzüp bilersiňiz. Gridzy esasy CSS faýlyna göz aýlaň, nämäni ýok etmelidigiňize düşüniň. Gorkma, hemme zat ol ýerde gowy dokumentleşdirilen.

Adingüklemegi optimizirläň

Köp suratlary ulanýan bolsaňyz, Gridziniň toruny has çalt gurmagyna kömek etmek gowy pikir bolup biler.

Böküş suratlarynyň öňüni alyň

Gridzy, gözenegi hasaplamak üçin ähli suratlaryň aspekt gatnaşygy zerur. Bu hakykat, käbir suratlar taýýar bolsa, käbirleri taýýar bolmasa, bökmek elementlerine sebäp bolýar. Suratlar näçe köp bolsa, şonça-da bizar edip biler.

Bu özüni alyp barşyň öňüni almak üçin, ähli img elementleri üçin width we height aýratynlyklaryny belläň. Her aýratyn surat üçin dogry bahalary kesgitlemek möhümdir, ýogsam şekiller ýoýular. Dogry bahalar degişli suratyň asyl giňligi we beýikligi:

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

Ondan soň Gridzy şekilleriň hakyky ululyklaryny bilmezden derrew gözenegi hasaplap biler.

Yalta ýüklemek

Diňe görünýän görnüşdäki şekilleri ýüklemek üçin şu ädimleri ýerine ýetiriň:

Aboveokarda görkezilişi ýaly width we height atributlaryny goýuň (dogry bahalary ulanmagy unutmaň)
Rhli src atributlaryny aşakda görkezilişi ýaly data-gridzylazysrc bilen çalyşyň ( srcset atributlaryňyz hem bar bolsa, olary data-gridzylazysrcset bilen çalyşyň).

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

Bu ädimlerden soň suratlar görnüşiň golaýynda ýa-da içinde bolansoň ýüklener.

Amal görkezijisi

Amal görkezijisi, surat ýüklenýän mahaly peýda bolan kiçijik animasiýa nyşanydyr. Tionsazgylary we derileri ulansaňyz, amal görkezijisi awtomatiki görkeziler. Otherwiseogsam, käbir düzedişler gerek:

Her img elementini div elementine goýuň
(ýa-da başga bir elemente - has giňişleýin semantik HTML serediň)
Her img elementine gridzyImage synpyny goşuň

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

Ondan soň, suratlar ýüklemek üçin wagt gerek bolsa, proses görkezijilerini görmeli.

Süzgüçler

Gridzy-daky süzgüçler gaty ýönekeý, ýöne güýçli. Haýsy süzgüç gerek bolsa-da, durmuşa geçirilmegi gaty ähtimal. Size diňe CSS we birnäçe HTML form elementleri gerek ...

Ine funksional mysal:

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

Geliň, ädimme-ädim guralyň

1. Ilki bilen Gridziniň adaty HTML gurluşy gerek we ähli galereýa elementleri üçin synp atlaryny belläris, soňundan süzüp bileris

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

Bu mysalda her element üçin diňe bir synp ulanýarys. Alsoöne şol elementi birnäçe süzgüç arkaly tapyp bolýan bolsa, bir element üçin birnäçe synp belläp bilersiňiz.

2. Soňra süzgüçleri üýtgedip boljak käbir düwmeleri goşýarys

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

Düwmeleriň ýerine bellik gutusy, radio düwmeleri, meýdanlary saýlamak we ş.m. ýaly beýleki elementleri hem ulanyp bilersiňiz.

Görşüňiz ýaly, düwmeleriň bahalary adaty CSS saýlaýjylarydyr. Gutaranymyzdan soň, şeýle düwmä basylanda CSS saýlaýjysyna gabat gelýän şekiller görkeziler. Tehniki taýdan filter opsiýasyny diňe şu baha düzýär.

Şeýle hem has çylşyrymly saýlaýjylary ulanyp bilersiňiz. Mysal üçin :not(.animals) .animals.people we .animals, .people ýaly işlemez.

3. Iň soňunda bolsa, düwmeleri div konteýnerde jemleýäris we filterControls opsiýasyny belläp, Gridzy galereýasyna baglaýarys:

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

Görşüňiz ýaly, filterControls opsiýasy üçin CSS saýlaýjysyny hem ulanýarys. id atributly div konteýner, diňe şol CSS saýlaýjynyň üsti bilen düwmeleri saýlamagy aňsatlaşdyrýar.

Ine!

JavaScript çözgüdini isleseňiz, API-i gözden geçiriň.

API

Gridziniň öz API-si bar bolsa-da, köp zady diňe DOM-y dolandyrmak arkaly edip bolýar. Gridzy muny görer we paneli sazlar. Alsoöne gaty güýçli API hem bar…

DOM-y dolandyrmak

Documenthli resminama obýekt modeli (DOM) manipulýasiýalary üçin ilki bilen konteýner elementi gerek:

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

Suratlar goşuň

Konteýner elementine goşmazdan ozal täze çaga elementini doly gurmak we doldurmak möhümdir. Otherwiseogsam Gridzy dogry ölçegleri tapyp bilmeýär.

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

Suratlary aýyryň

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

Görnüşleri üýtgediň

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

MDN web resminamalarynda tapyp boljak DOM-y dolandyrmak barada has giňişleýin maglumat. Şeýle hem elýeterli DOM bilen tanyşlyk bar.

Emläk API

API-ni ulanmak üçin ilki bilen “Gridzy” konteýner elementi bilen baglanyşykly “Gridzy” mysaly gerek:

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

Opsiýa al

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

Optionshli opsiýalary alyň

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

Görnüşleri düzüň

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

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

Süzgüç ulanyň

Süzgüç ulanmak, diňe CSS saýlaýjy bolup biljek opsiýa filter düzmekdir:

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

Çagyryş funksiýalaryny goşuň

2.4.0 wersiýasyndan bäri köneldi
Munuň ýerine häzirki zaman we has çeýe wakalary ulanyň. Jikme-jiklikler üçin indiki bölüme serediň.

~~Gridzy.js 2 yzyna çagyryş funksiýalary üçin käbir wariantlary goldaýar. Olary diňe eýeçilik API arkaly düzüp bolýar, ýöne beýleki opsiýalar ýaly:~~

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

	~~Düşündiriş~~
~~`onBeforeOptionsChanged`~~	~~Opsiýalary düzmezden ozal çagyrylýan jaň funksiýasy.~~
~~`onOptionsChanged`~~	~~Opsiýalary düzeniňizden soň gönüden-göni çagyrylýan jaň funksiýasy.~~
~~`onBeforeRender`~~	~~Görkezilmezden ozal çagyrylýan jaň funksiýasy.~~
~~`onRender`~~	~~Görkezilenden soň gönüden-göni çagyrylýan jaň funksiýasy.~~

Wakalary ulanyň

2.4.0 wersiýasyndan bäri

Gridzy wakalaryny adaty JavaScript wakalary ýaly ulanyp bilersiňiz:

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

Käbir hadysalar “Gridzy” konteýner elementine, beýleki hadysalar bolsa konteýner elementiniň içindäki aýratyn elementlere atylýar.

Gridzy konteýner elementine atylan wakalar:

	Düşündiriş
`gridzyBeforeInit`	Galereýa işe başlamazdan öň ýangyn.
`gridzyInit`	Galereýa başlandan soň ýangyn.
`gridzyBeforeOptionsChanged`	Opsiýalary düzmezden ozal ýangyn.
`gridzyOptionsChanged`	Opsiýalary düzeniňizden soň ýangyn.
`gridzyBeforeRender`	Görkezilmezden öň ýangyn.
`gridzyRender`	Görkezilenden soň ýangyn.

Bu ýerde haýsydyr bir wakany sypdyrsaňyz, goldaw haýyşyny iberiň.

event.target “Gridzy” konteýner elementini üpjün edýär.
event.detail.instance Gridzy mysalyny üpjün edýär.

Element elementlerine garşy wakalar:

	Düşündiriş
`gridzyItemBeforeInit`	Haryt başlamazdan öň ýangyn.
`gridzyItemInit`	Haryt başlandan soň ýangyn.
`gridzyItemLoading`	Haryt ýüklenip başlanda ýanýar.
`gridzyItemReady`	Haryt hasaplamaga taýyn bolanda ýangyn. Şonuň üçin aspekt gatnaşygy belli, ýöne surat henizem ýüklenip biler.
`gridzyItemComplete`	Haryt şekili doly ýüklenende ýanýar.

Bu ýerde haýsydyr bir wakany sypdyrsaňyz, goldaw haýyşyny iberiň.

event.target degişli element elementini üpjün edýär.
event.detail.instance Gridzy mysalyny üpjün edýär.

API - Global

Gridzy mysallaryndan garaşsyz käbir funksiýalar bar. Şonuň üçin öňem mysal almaly däl.

Bellenen warianty alyň

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

Defaulthli deslapky opsiýalary alyň

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

Bellenen opsiýalary düzüň

Bu, eýýäm başlanan “Gridzy” mysallarynyň hemmesini kesgitlemeýär, ýöne täze mysallaryň esasyny kesgitleýär. Şeýle-de bolsa, bar bolan mysalyň bir görnüşi null bahasy arkaly täzeden düzülse, täze başlangyç bahany ulanar.

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

DOM taýýar bolmanka jaň etseňiz, muny dünýä derejesinde saýlamak üçin ulanyp bilersiňiz. Şonuň üçin indi atributlar hökmünde opsiýalary bellemegiň zerurlygy bolmaz.

Awtomatizm

Gridzy.js 2-iň ähli awtomatizasiýasy işjeň bolsa, aşakdaky usullara zerurlyk ýok. Emma Gridzini has adaty usulda ulanmak üçin awtomatizasiýany öçürip bolýar:

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

Bu opsiýalaryň käbiri logiki sebäplere görä data-gridzy- atributlary ýa-da setOptions() arkaly düzülip bilinmez:

	Bellenen baha	Düşündiriş
`autoInitOnDomReady`	`true`	Sahypa ýüklenende synp `gridzy` elementleri kesgitleýär we başlaýar. `Gridzy.setDefaultOptions()` arkaly sazlap bolýar
`autoInitOnDomMutation` MutationObserver	`true`	DOM-da peýda bolanyndan we başlangyç eden badyna synp `gridzy` täze elementleri kesgitleýär. (mysal üçin sahypa geçişlerini ulanmakda) `Gridzy.setDefaultOptions()` arkaly sazlap bolýar
`autoSyncChildListMutation` MutationObserver	`true`	Çaga elementleriniň (suratlarynyň) goşulandygyny ýa-da aýrylandygyny kesgitleýär we paneli awtomatiki täzeleýär. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` arkaly sazlap bolýar
`useOptionAttributes`	`true`	`data-gridzy-` atributlarynyň köplenç ulanylýandygyny ýa-da ýokdugyny kesgitleýär. Bu `false` wariantlar bolsa, diňe eýeçilik API-si arkaly düzülip bilner. `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` arkaly sazlap bolýar
`autoSyncAttributesMutation` MutationObserver	`true`	`data-gridzy-` atributlarynyň üýtgemelerini kesgitleýär we paneli awtomatiki täzeleýär. Şeýle hem `gridzyAnimated` synpyň goşulandygyny ýa-da aýrylandygyny we `style` atributynyň üýtgemeleriniň bardygyny anyklaýar. `useOptionAttributes` `false` bolsa, diňe `style` atributynyň üýtgemelerini kesgitleýär. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` arkaly sazlap bolýar
`autoSyncChildClassMutation` MutationObserver	`true`	Childhli çaga elementleriniň (şekilleriň) `class` häsiýetleriniň üýtgemelerini kesgitleýär. Süzgüçler bilen baglanyşykly. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` arkaly sazlap bolýar
`autoSyncImageMutation` MutationObserver 2.5.0 wersiýasyndan bäri	`true`	Imageshli suratlaryň `src` atributlarynyň üýtgemelerini kesgitleýär. React ýa-da şuňa meňzeş kitaphanalar bilen ulanylanda degişli. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` arkaly sazlap bolýar
`autoRenderOnResize` ResizeObserver 2.6.0 wersiýasyndan bäri	`true`	Elementiň giňliginiň üýtgemelerini kesgitleýär. Duýgur dizaýn bilen baglanyşykly. (2.6.0 wersiýasyndan öň hadysanyň diňleýjisiniň penjiresiniň ölçegi ulanyldy) `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` arkaly sazlap bolýar

El bilen başlaň

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

Instanty ýok ediň

Takyk aýtdy, Gridzini başlamagyň tersi.

gridzyInstance.destroy();
gridzyInstance = null;

Çagalaryň sanawyny el bilen sinhronlaň

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

Childeke çaga elementini el bilen sinhronlaň

Adatça zerur däl, gaty seýrek ýagdaýlardan başga.

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

Sypatlary el bilen sinhronlaň

Munuň üçin useOptionAttributes opsiýasynyň true bolmalydygyny unutmaň.

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

Güýç bermek

Adatça ähli awtomatizm öçürilen hem bolsa zerur däl

gridzyInstance.render();

WordPress Plugin

JavaScript kitaphanasy

Hyzmat

Wersiýa 2.x