Veršuvdna 2.x – Gridzy.Gallery

Neahttasiidu lea automáhtalaččat jorgaluvvon. Jus juoga ii leat čielggas, de geahča eŋgelasgielat dokumentašuvnna.

Vuođđogeavaheapmi

Lasit Gridzy-fiillaid iežat bálvaleaddjái ja lasit daid iežat neahttasiidduide (dábálaččat oaiveoasis):

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

Lasit HTML-koda (vaikko gos rupmaša oasis):

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

Dat lea dat! Dat lea áibbas doaibmi ovdamearka. Ii dárbbaš lassi álggaheami.

Konfigurašuvdna

Álkimus vuohki konfigureret Gridzy lea dušše geavahit HTML-attributtaid. Don fertet dušše bidjat ovdan válljenvejolašvuođaid namaid data-gridzy- . Nu ahte, jus galggat bidjat spaceBetween -válljema, de fertet dušše bidjat attribuhta 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>

Váldoválljejumit

	Standárdaárvu	Govvádus
`animate`	`true`	Mearrida galgá go animašuvnnat geavahuvvot go ruovdegeaidnu rievdá (ovdamearkka dihte go rievdada neahttačujuhusa sturrodaga dahje go bidjá filtera).
`layout`	`justified`	Definere geavahuvvon ortnega. Gridzy.js 2 doarju guokte iešguđetlágan hábmema `justified` ja `waterfall` . Juohkehaččas sis leat iežas lassi válljenvejolašvuođaparamehterat, maid gávnnat dán tabealla vuolábealde.
`filter`	`*`	Mearrida makkár govat galget čájehuvvot. Dáppe sáhttá geavahit juohke CSS-válljejeaddji árvun. Dábálaččat bidjá automáhtalaččat `filterControls` bokte (gč. boahtte válljejumi). Geahča Filterat
`filterControls`		Mearrida makkár hámi elemeanttaid sáhttá geavahit govaid filtremii. Vaikko makkár CSS-válljejeaddji, mii vállje HTML-skovi elemeanttaid, sáhttá geavahuvvot dás árvun. Geahča Filterat
`autoConsiderScrollBars`	`true`	Einnostit gávdnomis viidodaga jus rullačuoggát čájehuvvojit dahje jávket. Ávžžuhit álo bidjat dan `true` jus dát automatisma ii daga váttisvuođaid.

Justified Layout Options

	Standárdaárvu	Govvádus
`autoFontSize`	`false`	Ođasmahttá automáhtalaččat juohke kássa čállinsturrodaga iešvuođa álgoálgosaš kássa sturrodaga vuođul. Standárda mielde font-size-eavttut eai leat mearriduvvon čielgasit.
`desiredHeight`	`190`	Definere elemeantarájiid háliidan govdodaga. Duohta govdodat rehkenastojuvvo dan mielde makkár viidodat lea gávdnamis ja makkár elemeanttat leat ráiddus.
`hideOnMissingImage`	`true`	Čuoččáldahttá bovssaid main leat govat maid ii sáhttán bidjat sisa.
`spaceBetween`	`4`	Definere gaskka elemeanttaid gaskkas pikselain.
`lastRowAlign` veršuvnna 2.3.0 rájes	`justified`	Definere maŋimuš rievtti doaibmavugiid. Dohkkehuvvon árvvut leat `left` , `center` , `right` ja `justified` .
`singleRowAlign` veršuvnna 2.3.0 rájes	`justified`	Definere doaibmavugiid jus lea dušše okta ovttaskas ráidu. Dohkkehuvvon árvvut leat `left` , `center` , `right` ja `justified` .
~~`fillLastRow`~~ ~~veršuvnna 2.1.0 rájes~~	~~`true`~~	HEAITTIN veršuvnna 2.4.0 rájes (HEIVEHEAPMI veršuvnna 2.3.0 rájes ) Ordne govaid nu ahte maŋimuš ráidu lea álo áibbas gokčojuvvon. Jus áiggut bidjat govaid dynámalaččat, de sáhttá leat buorre jurdda deaktiveret dan. Ii váikkut ovttaskas rievttiide (gč. `fillSingleRow` ).
`fillSingleRow` veršuvnna 2.1.0 rájes	~~`true`~~	HEAITTIN veršuvnna 2.4.0 rájes (HEIVEHEAPMI veršuvnna 2.3.0 rájes ) Jus lea dušše okta ráidu, de dat ordne govaid nu ahte ráidu lea álo áibbas dievva. Jus sáhttá dáhpáhuvvat ahte dus leat dušše okta dahje guokte gova galleriijas, de sáhttá leat buorre jurdda deaktiveret dán.

Waterfall Layout Options

	Standárdaárvu	Govvádus
`autoFontSize`	`false`	Ođasmahttá automáhtalaččat juohke kássa čállinsturrodaga iešvuođa álgoálgosaš kássa sturrodaga vuođul. Standárda mielde font-size-eavttut eai leat mearriduvvon čielgasit.
`desiredWidth`	`250`	Definere háliidan viidodaga kolonnain. Duohta viidodat rehkenastojuvvo dan mielde man viidodat lea gávdnamis ja man ollu kolonnat leat.
`hideOnMissingImage`	`true`	Čuoččáldahttá bovssaid main leat govat maid ii sáhttán bidjat sisa.
`horizontalOrder`	`false`	Definere ahte elemeanttat biddjojuvvojit duššefal okta elemeanta juohke kolonnii olgešbealde olgešbeallái, ja de álgá fas olgešbeale kolonnii beroškeahttá makkár kolonnas lea eanet sadji. Elemeanttat biddjojuvvojit álo dan kolonnii mas lea unnimus govdodat.
`spaceBetween`	`4`	Definere gaskka elemeanttaid gaskkas pikselain.
`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`.

Eanet ovdánan vejolašvuođat

Jus háliidat eanet ovdánan vejolašvuođaid, de geahča API:s .

Semantihkalaš HTML

Gridzy álkimus HTML-struktuvra lea dát:

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

Muhto Gridzy lea hui fleksibel ja sáhtát geavahit measta juohke eará HTML-struktuvrra. Leat dušše moadde čuoggá maid galgá váldit vuhtii:

Juohke konteavstta elemeantta mánná ovddasta ovtta ávdnasa ráiddus.
Sihke container-elemeanta ja dan mánát sáhttet leat vaikko makkár mearkašládja, nugo ul ja li (dušše árvvoštallat nuppástuhttit neahttačuovgga standárddaid).
Jus img -elemeanta ii leat ieš njuolggo mánná, de dárbbaša dat luohkká gridzyImage .

Nu ahte dát lea maid doaibmi HTML-struktuvra:

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

Erenoamážit jus háliidat lasihit teavsttaid, de dárbbašat ovdánan HTML-struktuvrra. Go háliidat diehtit eanet dan birra, de geahča Captions & Skins .

Teavsttat ja ivdni

Jus háliidat lasihit teavsttaid iežat galleriijai, de fertet defineret dan čalmmiid. Danne leat muhtun ovddalgihtii mearriduvvon skinnat gávdnamis. Juohke ivdni mas lea CSS-fiila. Don fertet lasihit dán fiilla lassin váldo Gridzy-fiillaide (dábálaččat oaiveoasis):

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

Dasa lassin dárbbašat ovdánan HTML-struktuvrra:

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

Jus leat imaštallan HTML-struktuvrra birra, de geahča Semantic HTML .

Teavstta várás sáhtát geavahit vaikko makkár merkema, dušše sihkkarastte ahte das lea luohkká gridzyCaption . img elemeanta dárbbaša luohkká gridzyImage .

Ovddit ovdamearka čájeha dutnje ivnni gridzySkinClassic . Jus háliidat geavahit eará, de fertet dušše ovttastahttit ivdnenama ovtta dáin:

Sisdoallojuvvon ivdnit

	Gávdnomis luohkát
gridzySkinBlank buorre vuolggasadji iežas ivnni ráhkadeapmái njuolggo ovdačájáhus	`gridzySkinBlank`
gridzySkinClassic njuolggo ovdačájáhus	`gridzySkinClassic` `gridzySkinClassicLight`(HEIVEHEAPMI veršuvnna 2.6.0 rájes)
gridzySkinFullOverlay njuolggo ovdačájáhus	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(HEIVEHEAPMI veršuvnna 2.6.0 rájes)
gridzySkinLift njuolggo ovdačájáhus	`gridzySkinLift` `gridzySkinLiftLight`(HEIVEHEAPMI veršuvnna 2.6.0 rájes)
gridzySkinMagnifier zoom-funkšuvdna ii leat mielde njuolggo ovdačájáhus	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(HEIVEHEAPMI veršuvnna 2.6.0 rájes)

Buot ovddit skinnat dárbbašit dušše CSS-fiilla, muhto leat lassi skinnat mat maiddái dárbbašit JavaScript-fiilla:

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

	Gávdnomis luohkát
gridzySkinBlur ii doaimma IE:s njuolggo ovdačájáhus	`gridzySkinBlur` `gridzySkinBlurLight`(HEIVEHEAPMI veršuvnna 2.6.0 rájes)
gridzySkinCard njuolggo ovdačájáhus	`gridzySkinCard` `gridzySkinCardLight`(HEIVEHEAPMI veršuvnna 2.6.0 rájes)

Náhkkeválljemat

Veršuvnna 2.6.0 rájes leat vejolašvuođat konfigureret sisačálihuvvon ivnniid. Dan mielde makkár ivdni lea, sáhtát bidjat duogášivnni, teakstaivnni ja teakstačuovgga. Don fertet dušše geavahit CSS iešheanalaš iešvuođaid nugo dáppe oainnát:

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

Geahča doarjjavariábeliid ja standárdaárvvuid juohke skinii dáppe:

gridzySkinClassic

Rievdadus	Standárdaárvu	Diehtu
`--background`	`rgba(0, 0, 0, .7)`	dohkkeha makkárge CSS-duogášárvvu
`--color`	`rgb(255, 255, 255)`	dohkkeha makkárge CSS-ivdneárvvu
`--text-shadow`	`none`	dohkkeha makkárge CSS-teaksta-čuovgaárvvu

gridzySkinFullOverlay

Rievdadus	Standárdaárvu	Diehtu
`--background`	`rgba(0, 0, 0, .7)`	dohkkeha makkárge CSS-duogášárvvu
`--color`	`rgb(255, 255, 255)`	dohkkeha makkárge CSS-ivdneárvvu
`--text-shadow`	`none`	dohkkeha makkárge CSS-teaksta-čuovgaárvvu

gridzySkinLift

Rievdadus	Standárdaárvu	Diehtu
`--background`	`rgba(0, 0, 0, .7)`	dohkkeha makkárge CSS-duogášárvvu
`--color`	`rgb(255, 255, 255)`	dohkkeha makkárge CSS-ivdneárvvu
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	dohkkeha makkárge CSS-teaksta-čuovgaárvvu

gridzySkinMagnifier

Rievdadus	Standárdaárvu	Diehtu
`--background`	`rgba(0, 0, 0, .7)`	dohkkeha makkárge CSS-duogášárvvu
`--color`	`rgb(255, 255, 255)`	dohkkeha makkárge CSS-ivdneárvvu

Dát ivdni ii doarjjo --text-shadow

gridzySkinBlur

Rievdadus	Standárdaárvu	Diehtu
`--background`	`rgba(0, 0, 0, .7)`	dohkkeha makkárge CSS-duogášárvvu
`--color`	`rgb(255, 255, 255)`	dohkkeha makkárge CSS-ivdneárvvu
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	dohkkeha makkárge CSS-teaksta-čuovgaárvvu

gridzySkinCard

Rievdadus	Standárdaárvu	Diehtu
`--background`	`rgba(0, 0, 0, 1)`	dohkkeha makkárge CSS-duogášárvvu
`--color`	`rgb(255, 255, 255)`	dohkkeha makkárge CSS-ivdneárvvu
`--text-shadow`	`none`	dohkkeha makkárge CSS-teaksta-čuovgaárvvu

Buot ovddalgihtii mearriduvvon skinnat dorjot dušše álkes teakstačállosiid. Sáhtát ráhkadit iežat hui iežat ja eambbo kompleaksa ivnniid. Geahča Style Gridzy .

Stiila Gridzy

Jus ii oktage ovddalgihtii mearriduvvon ivdni heive du dárbbuide, de sáhtát ieš hábmet ivnni.

Álkimus vuohki lea vuos kopieret juo juo ivdni ja heivehit dan iežat dárbbuide. Ovdal mearriduvvon ivdni gridzySkinBlank dábálaččat addá buori vuođu ja maiddái buori dokumentašuvnna CSS-fiillas:

/** 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-fiillas gávnnat luohkáid gridzySkinBlank , gridzyImage ja gridzyCaption . Gridzy ieš ii dárbbaš dáid luohkáid. Dat geavahuvvojit dušše stiilemii ja nu sáhtát daid váldit eret dahje rievdadit nama jus háliidat.

Dasa lassin gávnnat CSS-luohká gridzyItem . Gridzy bidjá dán luohká automáhtalaččat buot njuolggománáide váldokonteavstta elemeanttas. Nu ahte, don sáhtát geavahit dán luohká stiilet iežat galleriija ávdnasiid.

Fuomáš dehálaš áššiid

Ávdnasa sisdoallu galgá leat áibbas vástideaddji. Fuomáš ahte elemeantta sturrodat sihkkarit rievdá. Geavat proseantaárvvuid pikselaárvvuid sadjái. Ja geahča Gridzy čállinvuogi autoFontSize , mii čatná čállinmeari sturrodaga ávdnasa sturrodagaide.
Juohke ávdnasis galgá leat bures čilgejuvvon govvenproporšuvdna. Ávdnasa govvenproporšuvdna ii goassege rievdda ja lea dárbbašlaš rehkenastit ruovdegeaidnu. Nu ahte jus muhtun ávdnasis ii leat automáhtalaččat bures definerejuvvon govvenproporšuvdna, de ovddalgihtii definere dan manuálalaččat (omd. css bokte).

Muhtun dáhpáhusain sáhttá leat álkit stiilet áššiid sisdoalu ovdal go Gridzy álggahuvvo. Dušše váldde eret luohkká gridzy dahje Gridzy javascript-fiilla gaskaboddosaččat dan dihte.

Dat lea dat! Dat lea buot maid dárbbašat vai sáhtát hukset iežat ivnni. Eanaš ovddalgihtii mearriduvvon skinnat eai geavat eambbo go dát.

Muhto sáhttet leat eanet jus háliidat ...

Ovddiduvvon ivdnit

Gridzy geavaha eanet CSS-luohkáid go dušše gridzyItem . Eanaš dain bidjojuvvojit automáhtalaččat ja daid sáhtát maiddái geavahit stiilabargui.

Váldokonteineraluohkát

Luohká namma	Govvádus
`gridzy` bidjat gieđaiguin	Gridzy gávdná automáhtalaččat elemeanttaid dán luohkás ja álggaha daid.
`gridzyAnimated`	Ásahuvvo automáhtalaččat jus `animate` válljen lea `true` . Jus dát luohkká lea biddjon manuálalaččat, de šaddá maiddái `animate` -válljen automáhtalaččat `true` (earret jus dat lea čielgasit biddjon `false` ).

Ávdnasiid luohkát

Luohká namma	Govvádus
`gridzyItem`	Ásahuvvo dakkaviđe go ávnnas álggaha álggahanproseassa. Ii goassege váldo eret.
`gridzyItemInitializing`	Ásahuvvo dakkaviđe go ávnnas álggaha álggahanproseassa. Dan sadjái boahtá `gridzyItemReady` dakkaviđe go ávnnas lea áibbas álggahuvvon. Ii mearkkaš ahte govat leat áibbas čállojuvvon (gč. `gridzyItemLoading` ), muhto ávnnas lea gearggus oidnot.
`gridzyItemReady`	Ovttastahttá `gridzyItemInitializing` nu johtilit go ávnnas lea áibbas álggahuvvon. Ii goassege váldo eret. Ii mearkkaš ahte govat leat ollásit čállojuvvon (gč. `gridzyItemComplete` ), muhto ávnnas lea gearggus oidnot.
`gridzyItemLoading`	Ásahuvvo dakkaviđe go ávnnas álggaha álggahanproseassa. Dan sadjái boahtá `gridzyItemComplete` dakkaviđe go govat (dábálaččat dušše okta) leat ollásit biddjon.
`gridzyItemComplete`	`gridzyItemLoading` sadjái boahtá dakkaviđe go sisdoallu govat (dábálaččat dušše okta) leat ollásit biddjon. Ii goassege váldo eret.
`gridzyItemInitialToVisible`	Ásahuvvo dakkaviđe go ávnnas álgá boahtit ovdan vuosttaš geardde. Váldojuvvo eret dakkaviđe go ávnnas lea áibbas oidnosis.
`gridzyItemVisible`	Ásahuvvo dakkaviđe go ávnnas lea áibbas oidnosis. Váldojuvvo eret dakkaviđe go ávnnas álgá jávkat.
`gridzyItemVisibleToHidden`	Ásahuvvo dakkaviđe go ávnnas álgá jávkat. Váldojuvvo eret dakkaviđe go ávnnas lea áibbas čihkkojuvvon.
`gridzyItemHidden`	Ásahuvvo dakkaviđe go ávnnas lea áibbas čihkkojuvvon. Váldojuvvo eret dakkaviđe go ávnnas álgá boahtit ovdan.
`gridzyItemHiddenToVisible`	Ásahuvvo dakkaviđe go ávnnas álgá čájehuvvot (earret go čájehuvvo vuosttaš geardde – geahča luohkká `gridzyItemInitialToVisible` ). Váldojuvvo eret dakkaviđe go ávnnas lea áibbas oidnosis.
`gridzyItemVisibleToVisible`	Ásahuvvo dakkaviđe go juoga ráiddus rievdá, muhto ávnnas ieš lei ja bissu oidnosis. Váldojuvvo eret dakkaviđe go rievdadus-animašuvdna lea gárvvis.

Gridzy váldo CSS-fiillas leat proseassaindikáhtor ja animašuvnnat čájehuvvon ja jávkan govaide ovddalgihtii mearriduvvon.

Dáinna ovdalis namuhuvvon CSS-luohkáin sáhtát ieš stiilet iežat proseassaindikáhtora ja animašuvnnaid. Geahča Gridzy váldo CSS-fiilla, vai ipmirdat maid fertet rievdadit. Ii leat ballu, doppe lea visot bures dokumenterejuvvon.

Buoridit lasáhusa

Jus geavahat máŋga gova, de sáhttá leat buorre jurdda veahkehit Gridzy hukset fierpmádaga jođáneappot.

Eastadit govaid čuožžilit

Gridzy dárbbaša áibbas sihkkarit buot govaid govvenproporšuvnna vai sáhttá rehkenastit ruovttu. Dát fáktat dagahit ahte elemeanttat čuožžilit jus muhtun govat leat gárvásat ja earát eai. Mađi eanet govat leat, dađi balddihahtti sáhttá dát effeakta leat.

Eastadan dihte dán doaibmabiju, de fertet dušše bidjat width ja height iešvuođaid buot img elemeanttaide. Lea dehálaš bidjat rivttes árvvuid juohke ovttaskas gova várás, muđui govat šaddet rievdaduvvot. Rivttes árvvut leat gova álgoálgosaš viidodat ja govdodat:

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

Dan maŋŋá Gridzy sáhttá rehkenastit ruovttu dakkaviđe almmá ahte dárbbaša diehtit govaid duohta sturrodaga.

Lazy Loading

Go galggat bidjat dušše govaid mat leat oidnosis, de dušše čuovo dáid lávkkiid:

Bija sisa width ja height iešvuođaid nugo ovdalis lea čilgejuvvon (dárkkis ahte geavahat rivttes árvvuid)
Bija buot src -attributtaid sadjái data-gridzylazysrc nugo čájehuvvo vuolábealde (jus dus leat srcset attributtat maid, de bidjet daid 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>

Dáid lávkkiid maŋŋá govat čájehuvvojit dakkaviđe go leat lahka dahje siskkobealde geahččanbáikki.

Proseassaindikáhtor

Proseassaindikáhtor lea unna animerejuvvon ikona mii oidno go govva lea biddjon. Jus geavahat teavsttaid ja ivnniid , de čájehuvvo proseassaindikáhtor automáhtalaččat. Muđui dárbbašat muhtun heivehemiid:

Bija juohke img -elemeantta div -elemeantta sisa
(dahje eará elemeanttaide – geahča semantihkalaš HTML eambbo)
Lasit luohkká gridzyImage juohke img -elemeanttaide

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

Dan maŋŋá galggat oaidnit proseassaindikáhtoriid jus govat váldet áiggi čálihit.

Filterat

Filterat Gridzy:s leat oalle álkit muhto fámolaččat. Vaikko makkár filtera dárbbašat, de lea hui jáhkehahtti ahte dat lea ollašuhttimis. Buot maid dárbbašat lea veahá CSS ja moadde HTML-skovi elemeantta ...

Dá lea doaibmi ovdamearka:

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

Hukset dan lávkkiid mielde

1. Vuos mii dárbbašit dábálaš HTML-struktuvrra Gridzy:s ja bidjat luohkkánamaid buot galleriijaáššiide nu ahte mii sáhttit filtreret daid maŋŋel

<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án ovdamearkkas mii geavahit dušše ovtta luohká juohke elemeantta várás. Muhto sáhtát maid bidjat máŋga luohká ovtta elemeantta várás, jus dat elemeanta galggašii gávdnot máŋgga filtera bokte.

2. De mii lasihit muhtun nuppástusaid maiguin mii sáhttit rievdadit filteriid de

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

Nuppiid sadjái sáhtát maiddái geavahit eará skovi elemeanttaid nugo merkenruđaid, radiočuoggáid, válljenčuoggáid ja nu ain.

Nu go oainnát, de leat nuppástusaid árvvut dábálaš CSS-válljejeaddjit. Dakkaviđe go mii leat gárvvis, de go deaddilat dakkár nuppástusa, de čájehuvvojit govat mat heivejit dan CSS-válljejeaddjii. Teknihkalaččat dat dušše bidjá filter dán árvui.

Sáhtát maid geavahit olu eambbo kompleaksa válljejeaddjiid. Ovdamearkka dihte :not(.animals) maiddái doaibmá, ja maiddái .animals.people ja .animals, .people .

3. Loahpas mii bidjat nuppástusaid div -konteinerii ja čatnat daid Gridzy-galleriijai, go bidjat filterControls válljema:

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

Nu go oainnát, de mii maiddái geavahit CSS-válljejeaddji filterControls -válljemii. div konteavstta mas lea id attributta dušše dahká nu ahte nuppástusat leat álkit válljet dan CSS-válljejeaddji bokte.

Dat lea dat!

Jus háliidat JavaScript-čovdosa, de geahča API .

API

Vaikko Gridzy:s lea iežas API, de eanaš áššiid sáhttá dahkat dan haga, duššefal dan bokte ahte manipuleret DOM:a. Gridzy fuomáša dan ja heiveha ruovttu. Muhto doppe lea maid hui fámolaš API ...

DOM-vuogádaga manipuleren

Buot Document Object Model (DOM) manipuleremiidda mii dárbbašit vuos konteavstta elemeantta:

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

Lasit govaid

Lea dehálaš ollásit hukset ja deavdit ođđa mánáidelemeantta ovdal go lasihat dan konteavstta elemeanttaide. Muđui ii sáhte Gridzy gávdnat rivttes dimenšuvnnaid.

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

Váldde eret govaid

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

Rievdat válljejumiid

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

Eambbo DOM manipulerema birra gávnnat MDN neahttadokumeanttain . Doppe gávdno maiddái álggahus DOM :ii.

Iežas API

Go galgá geavahit API, de mii dárbbašit vuos Gridzy-instanssa, mii lea čadnojuvvon Gridzy-konteavstta elemeanttaide:

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

Oaččut vejolašvuođa

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

Oaččut buot vejolašvuođaid

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

Bija válljejumiid

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

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

Geavat filtera

Filtera geavaheapmi lea dušše bidjat filter mii sáhttá leat vaikko makkár dohkálaš CSS-válljejeaddji:

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

Lasit ruovttoluottačuorvunfunkšuvnnaid

HEAITTIN veršuvnna 2.4.0 rájes
Geavat dan sadjái ođđaáigásaš ja fleksibel dáhpáhusaid . Geahča boahtte oasi dieđuid birra.

~~Gridzy.js 2 doarju muhtun vejolašvuođaid ruovttoluottačujuhusfunkšuvnnaide. Daid sáhttá bidjat dušše iežas API bokte, muhto nugo eará válljejumit:~~

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

	~~Govvádus~~
~~`onBeforeOptionsChanged`~~	~~Ruovttoluottačujuhusfunkšuvdna mii gohččoduvvo njuolga ovdal go bidjá válljejumiid.~~
~~`onOptionsChanged`~~	~~Ruovttoluottačujuhusfunkšuvdna mii gohččoduvvo njuolga maŋŋel go leat bidjan válljejumiid.~~
~~`onBeforeRender`~~	~~Ruovttoluottačujuhusfunkšuvdna mii gohččoduvvo njuolga ovdal go govvejuvvo.~~
~~`onRender`~~	~~Ruovttoluottačujuhusfunkšuvdna mii gohččojuvvo njuolga govvema maŋŋá.~~

Geavat dáhpáhusaid

veršuvnna 2.4.0 rájes

Gridzy-dáhpáhusaid sáhtát geavahit juste nugo dábálaš JavaScript-dáhpáhusaid:

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

Muhtun dáhpáhusat álggahuvvojit Gridzy-konteavstta elemeanttas ja eará dáhpáhusat álggahuvvojit sierra ávdnasiid elemeanttain mat leat konteavstta elemeanttas.

Dáhpáhusat mat leat álggahuvvon Gridzy-konteavstta elemeanttas:

	Govvádus
`gridzyBeforeInit`	Buollá ovdal go galleriija álggahuvvo.
`gridzyInit`	Buollá maŋŋel go galleriija lea álggahuvvon.
`gridzyBeforeOptionsChanged`	Buollá ovdal go bidjá válljejumiid.
`gridzyOptionsChanged`	Buollá maŋŋel go leat bidjan válljejumiid.
`gridzyBeforeRender`	Buollá ovdal go govvejuvvo.
`gridzyRender`	Buollá maŋŋel go lea govven.

Jus vajálduhtát muhtun dáhpáhusaid dáppe, de sáddes doarjjaohcamuša .

event.target fállá Gridzy-konteavstta elemeantta.
event.detail.instance fállá Gridzy-instanssa.

Dáhpáhusat mat leat álggahuvvon ávdnasa elemeanttain:

	Govvádus
`gridzyItemBeforeInit`	Buollá ovdal go ávnnas álggahuvvo.
`gridzyItemInit`	Buollá maŋŋel go ávnnas lea álggahuvvon.
`gridzyItemLoading`	Buollá go ávnnas álgá lastadit.
`gridzyItemReady`	Buollá go ávnnas lea gárvvis neahttarehkenastimii. Nu ahte govvenproporšuvdna lea dovddus, muhto govva soaitá ain leat láddan.
`gridzyItemComplete`	Čuoččáldahttá go ávnnasgovva lea ollásit čállojuvvon.

Jus vajálduhtát muhtun dáhpáhusaid dáppe, de sáddes doarjjaohcamuša .

event.target fállá guoskevaš ávdnasa elemeantta.
event.detail.instance fállá Gridzy-instanssa.

API – Globála

Leat muhtun doaimmat mat leat sorjjasmeahttumat Gridzy-instanssain. Nu ahte mii eat dárbbaš ovdal oažžut ovdamearkka.

Oaččut standárdaválljema

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

Oaččut buot standárdaválljemiid

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

Ásahit standárdaválljemiid

Dát ii bidjat buot juo álggahuvvon Gridzy-instanssaid válljemiid, muhto definere vuođu ođđa instanssaid várás. Muhto jus dálá instanssa válljenvejolašvuohta nuppástuhttojuvvo null árvvu bokte, de dat geavaha ođđa standárdaárvvu.

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

Dáinna sáhtát bidjat opšuvnnaid globálalaččat, jus gohččut dan ovdal go DOM lea gárvvis. Nu ahte it dárbbaš šat bidjat opšuvnnaid attributtan.

Automatismmat

Nu guhká go buot Gridzy.js 2 automatihkat leat aktiivvalaččat, de ii leat dárbu vuolábealde čujuhuvvon vuogádagaide. Muhto automatismmaid sáhttá heaittihit vai geavaha Gridzy eanet árbevirolaš vuogi mielde:

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

Muhtun dáin válljejumiid ii sáhte bidjat data-gridzy- attributtaid dahje setOptions() bokte, logihkalaš sivaid geažil:

	Standárdaárvu	Govvádus
`autoInitOnDomReady`	`true`	Fuomášahttá elemeanttaid main lea `gridzy` -luohkká go siiddut biddjojuvvojit ja álggaha daid. Sáhttá biddjojuvvot `Gridzy.setDefaultOptions()` bokte
`autoInitOnDomMutation` MutationObserver	`true`	Fuomášahttá ođđa elemeanttaid `gridzy` luohkáin nu johtilit go dat bohtet ovdan DOM:s ja álggaha daid. (omd. siidduid sirdima geavaheami birra) Sáhttá biddjojuvvot `Gridzy.setDefaultOptions()` bokte
`autoSyncChildListMutation` MutationObserver	`true`	Fuomášahttá leat go mánáidelemeanttat (govat) lasihuvvon vai váldojuvvon eret, ja ođasmahttá ruovttu automáhtalaččat. Ásahuvvo `data-grizy-` bokte, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definere geavahuvvojit go `data-gridzy-` attributtat oppalaččat vai eai. Jus dát lea `false` de sáhttá válljejumiid bidjat dušše iežas API bokte. Ásahuvvo `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` bokte
`autoSyncAttributesMutation` MutationObserver	`true`	Fuomáša rievdadusaid `data-gridzy-` attributtain, ja ođasmahttá fierpmádaga automáhtalaččat. Fuomášahttá maiddái ahte `gridzyAnimated` luohkká lea lasihuvvon dahje váldon eret ja jus `style` rievdaduvvo. Jus `useOptionAttributes` lea `false` , de dat fuomáša dušše `style` rievdadusaid. Ásahuvvo `data-grizy-` bokte, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Fuomáša rievdadusaid `class` buot mánáidelemeanttain (govain). Relevánta filteriid ektui. Ásahuvvo `data-grizy-` bokte, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver veršuvnna 2.5.0 rájes	`true`	Fuomáša rievdadusaid `src` -attributtain buot govain. Relevánta go geavahuvvo React:in dahje sullasaš girjerádjosiin. Ásahuvvo `data-grizy-` bokte, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Geahčadeaddji sturrodaga rievdadit veršuvnna 2.6.0 rájes	`true`	Fuomáša rievdadusaid elemeantta viidodagas. Relevánta vástideaddji hábmema ektui. (Ovdal veršuvnna 2.6.0 geavahuvvui uvssa sturrodaga dáhpáhusguldaleaddji) Ásahuvvo `data-grizy-` bokte, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Álggahit gieđaiguin

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

Heaittihit ovdamearkka

Sullii dadjat, nuppe láhkai go álggahit Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Synkronisere mánáidlisttu gieđaiguin

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

Synkronisere ovtta máná elemeantta gieđaiguin

Dábálaččat ii dárbbaš, earret hui hárvenaš dáhpáhusain.

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

Synkronisere attributtaid gieđaiguin

Fuomáš ahte useOptionAttributes -válljenvejolašvuohta ferte leat true dán várás.

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

Fámu govvideapmi

Dábálaččat ii dárbbaš, vaikko buot automatihkka lea heaittihuvvon

gridzyInstance.render();

WordPress-plugin

JavaScript-girjerádju

Bálvalus