Weergawe 2.x – Gridzy.Gallery

Die webwerf is outomaties vertaal. As iets nie duidelik is nie, kyk asseblief na die Engelse dokumentasie.

Basiese gebruik

Laai die Gridzy-lêers op na u bediener en voeg dit by u webwerf (gewoonlik in die hoofafdeling):

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

Voeg die HTML-kode by (enige plek in die liggaamsafdeling):

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

Dis dit! Dit is 'n ten volle funksionele voorbeeld. Geen ekstra inisialisering is nodig nie.

Konfigurasie

Die maklikste manier om Gridzy op te stel, is om net HTML-kenmerke te gebruik. U hoef slegs die opsiename met data-gridzy- voor te voeg. Dus, om die spaceBetween -opsie in te stel, voeg net die kenmerk data-gridzy-spaceBetween by.

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

Hoofopsies

	Verstekwaarde	Beskrywing
`animate`	`true`	Bepaal of animasies gebruik moet word wanneer die rooster verander (byvoorbeeld wanneer die grootte van die blaaiervenster verander word of wanneer 'n filter opgestel word).
`layout`	`justified`	Definieer die gebruikte uitleg. Gridzy.js 2 ondersteun die twee verskillende uitlegte `justified` en `waterfall` . Elkeen van hulle het sy eie bykomende opsieparameters, wat u onder hierdie tabel kan vind.
`filter`	`*`	Bepaal watter beelde gewys moet word. Enige CSS-kieser kan hier as waarde gebruik word. Stel gewoonlik outomaties via `filterControls` (sien volgende opsie). Kyk na Filters
`filterControls`		Bepaal watter vormelemente gebruik kan word om die beelde te filtreer. Enige CSS-kieser wat HTML-vormelemente kies, kan hier as waarde gebruik word. Kyk na Filters
`autoConsiderScrollBars`	`true`	Om die beskikbare breedte te voorspel as rolstawe verskyn of verdwyn. Dit word altyd aanbeveel om dit `true` te laat, tensy hierdie outomatisme probleme veroorsaak.

Justified Uitlegopsies

	Verstekwaarde	Beskrywing
`autoFontSize`	`false`	Dateer die lettergrootte-eienskap van elke boks outomaties op op grond van die oorspronklike boksgrootte. By verstek is die lettertipe-eienskap nie eksplisiet gestel nie.
`desiredHeight`	`190`	Definieer die verlangde hoogte van elementrye. Die werklike hoogte sal bereken word afhangende van die beskikbare breedte en die elemente in die ry.
`hideOnMissingImage`	`true`	Versteek bokse wat beelde bevat wat nie gelaai kon word nie.
`spaceBetween`	`4`	Definieer die afstand tussen elemente in pixels.
`lastRowAlign` sedert weergawe 2.3.0	`justified`	Definieer die gedrag van die laaste ry. Toegelate waardes is `left` , `center` , `right` en `justified` .
`singleRowAlign` sedert weergawe 2.3.0	`justified`	Definieer die gedrag as daar net een enkele ry is. Toegelate waardes is `left` , `center` , `right` en `justified` .
~~`fillLastRow`~~ ~~sedert weergawe 2.1.0~~	~~`true`~~	VERWYDER sedert weergawe 2.4.0 (VERVALS sedert weergawe 2.3.0 ) Rangskik die beelde sodat die laaste ry altyd heeltemal gevul is. As jy van plan is om beelde dinamies by te voeg, kan dit 'n goeie idee wees om dit te deaktiveer. Het geen effek op enkele rye nie (sien `fillSingleRow` ).
`fillSingleRow` sedert weergawe 2.1.0	~~`true`~~	VERWYDER sedert weergawe 2.4.0 (VERVALS sedert weergawe 2.3.0 ) As daar net een ry is, rangskik dit die beelde sodat die ry altyd heeltemal gevul is. As dit kan gebeur dat jy net een of twee prente in die gallery het, kan dit 'n goeie idee wees om dit te deaktiveer.

Waterfall Uitlegopsies

	Verstekwaarde	Beskrywing
`autoFontSize`	`false`	Dateer die lettergrootte-eienskap van elke boks outomaties op op grond van die oorspronklike boksgrootte. By verstek is die lettertipe-eienskap nie eksplisiet gestel nie.
`desiredWidth`	`250`	Definieer die verlangde breedte van kolomme. Die werklike breedte sal bereken word afhangende van die beskikbare breedte en die aantal kolomme.
`hideOnMissingImage`	`true`	Versteek bokse wat beelde bevat wat nie gelaai kon word nie.
`horizontalOrder`	`false`	Definieer dat die elemente streng een element in elke kolom van links na regs geplaas word, begin dan weer in die mees linkerkolom onafhanklik in watter kolom meer plek is. By verstek sal die elemente altyd in die kolom met die kleinste hoogte geplaas word.
`spaceBetween`	`4`	Definieer die afstand tussen elemente in pixels.
`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`.

Meer gevorderde opsies

Vir meer gevorderde opsies, kyk na die API .

Semantiese HTML

Die eenvoudigste HTML-struktuur van Gridzy is dit:

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

Gridzy is egter baie buigsaam en jy kan byna enige ander HTML-struktuur gebruik. Daar is net 'n paar punte om te oorweeg:

Elke kind van die houerelement verteenwoordig een item in die rooster.
Beide die houerelement en sy kinders kan enige merkertipe wees, soos ul en li (oorweeg net om blaaierverstekstellings terug te stel).
As 'n img -element nie self 'n direkte kind is nie, benodig dit die klas gridzyImage .

Dit is dus ook 'n werkende HTML-struktuur:

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

Veral as jy byskrifte wil byvoeg, het jy 'n gevorderde HTML-struktuur nodig. Om meer daaroor te wete te kom, kyk na Byskrifte en velle .

Byskrifte en velle

As jy byskrifte by jou gallery wil voeg, moet jy die voorkoms definieer. Daarom is 'n paar voorafbepaalde velle beskikbaar. Elke vel bestaan uit 'n CSS-lêer. Jy moet hierdie lêer byvoeg by die hoof Gridzy-lêers (gewoonlik in die kop-afdeling):

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

Verder benodig jy 'n gevorderde HTML-struktuur:

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

As jy wonder oor die HTML-struktuur, kyk na Semantiese HTML .

Vir die byskrif kan jy enige tipe merker gebruik, maak net seker dat dit die klas gridzyCaption het. Die img -element benodig die klas gridzyImage .

Die voorbeeld hierbo wys jou die vel gridzySkinClassic . Om 'n ander een te gebruik, vervang net die velnaam met een van hierdie:

Ingesluit velle

	Beskikbare klasse
gridzySkinBlank 'n goeie beginpunt om 'n eie vel te skep lewendige voorskou	`gridzySkinBlank`
gridzySkinClassic lewendige voorskou	`gridzySkinClassic` `gridzySkinClassicLight`(VERLAAG sedert weergawe 2.6.0)
gridzySkinFullOverlay lewendige voorskou	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(VERLAAG sedert weergawe 2.6.0)
gridzySkinLift lewendige voorskou	`gridzySkinLift` `gridzySkinLiftLight`(VERLAAG sedert weergawe 2.6.0)
gridzySkinMagnifier zoomfunksie nie ingesluit nie lewendige voorskou	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(VERLAAG sedert weergawe 2.6.0)

Al die bogenoemde velle benodig slegs 'n CSS-lêer, maar daar is bykomende velle wat ook 'n JavaScript-lêer benodig:

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

	Beskikbare klasse
gridzySkinBlur werk nie in IE nie lewendige voorskou	`gridzySkinBlur` `gridzySkinBlurLight`(VERLAAG sedert weergawe 2.6.0)
gridzySkinCard lewendige voorskou	`gridzySkinCard` `gridzySkinCardLight`(VERLAAG sedert weergawe 2.6.0)

Velopsies

Sedert weergawe 2.6.0 is daar Opsies om die ingeboude velle op te stel. Afhangende van die spesifieke vel kan jy die agtergrondkleur, tekskleur en teksskadu stel. U hoef net CSS-gepasmaakte eienskappe te gebruik, soos u hier kan sien:

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

Kyk hier na die ondersteunde veranderlikes en verstekwaardes vir elke vel:

gridzySkinClassic

Veranderlik	Verstekwaarde	Inligting
`--background`	`rgba(0, 0, 0, .7)`	laat enige CSS-agtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	laat enige CSS-kleurwaarde toe
`--text-shadow`	`none`	laat enige CSS-teks-skaduwaarde toe

gridzySkinFullOverlay

Veranderlik	Verstekwaarde	Inligting
`--background`	`rgba(0, 0, 0, .7)`	laat enige CSS-agtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	laat enige CSS-kleurwaarde toe
`--text-shadow`	`none`	laat enige CSS-teks-skaduwaarde toe

gridzySkinLift

Veranderlik	Verstekwaarde	Inligting
`--background`	`rgba(0, 0, 0, .7)`	laat enige CSS-agtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	laat enige CSS-kleurwaarde toe
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	laat enige CSS-teks-skaduwaarde toe

gridzySkinMagnifier

Veranderlik	Verstekwaarde	Inligting
`--background`	`rgba(0, 0, 0, .7)`	laat enige CSS-agtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	laat enige CSS-kleurwaarde toe

Hierdie vel ondersteun nie --text-shadow nie

gridzySkinBlur

Veranderlik	Verstekwaarde	Inligting
`--background`	`rgba(0, 0, 0, .7)`	laat enige CSS-agtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	laat enige CSS-kleurwaarde toe
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	laat enige CSS-teks-skaduwaarde toe

gridzySkinCard

Veranderlik	Verstekwaarde	Inligting
`--background`	`rgba(0, 0, 0, 1)`	laat enige CSS-agtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	laat enige CSS-kleurwaarde toe
`--text-shadow`	`none`	laat enige CSS-teks-skaduwaarde toe

Alle vooraf gedefinieerde velle ondersteun slegs eenvoudige teksonderskrifte. Jy kan jou eie en meer komplekse velle skep. Kyk gerus na Style Gridzy .

Styl Gridzy

As geen voorafbepaalde vel by jou behoeftes pas nie, kan jy jou eie een styl.

Die maklikste manier is om eers 'n bestaande vel te kopieer en dit by jou eie behoeftes aan te pas. Die vooraf gedefinieerde vel gridzySkinBlank sal gewoonlik 'n goeie basis sowel as 'n goeie dokumentasie in die CSS-lêer verskaf:

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

In die CSS-lêer sal jy die klasse gridzySkinBlank , gridzyImage en gridzyCaption vind. Gridzy self het nie hierdie klasse nodig nie. Hulle word net vir stilering gebruik en dus kan jy hulle verwyder of hernoem as jy wil.

Daarbenewens sal jy die CSS-klas gridzyItem vind. Gridzy stel hierdie klas outomaties op alle direkte kinders van die hoofhouerelement. So, jy kan hierdie klas gebruik om die items van jou gallery te styl.

Let op Belangrike Dinge

Die iteminhoud moet ten volle reageer. Oorweeg dat die elementgrootte beslis sal verander. Gebruik persentasiewaardes in plaas van pixelwaardes. En kyk na die Gridzy-uitlegopsie autoFontSize , wat die lettergrootte aan die itemkasgrootte bind.
Elke item moet 'n goed gedefinieerde aspekverhouding hê. Die item se aspekverhouding sal nooit verander nie en is nodig om die rooster te bereken. As 'n item dus nie outomaties 'n goed gedefinieerde aspekverhouding het nie, definieer dit met die hand vooraf (bv. via css).

In sommige gevalle kan dit makliker wees om die inhoud van die items te stileer voordat Gridzy geïnisialiseer word. Verwyder eenvoudig die klas gridzy of die Gridzy javascript lêer tydelik hiervoor.

Dis dit! Dit is al wat jy nodig het om jou eie vel te bou. Die meeste van die vooraf gedefinieerde velle gebruik nie meer as dit nie.

Maar daar kan meer wees as jy wil ...

Gevorderde velle

Gridzy gebruik meer CSS-klasse as net gridzyItem . Die meeste van hulle sal outomaties gestel word en jy kan dit ook vir stilering gebruik.

Hoofhouerklasse

Klas Naam	Beskrywing
`gridzy` handmatig in te stel	Gridzy vind outomaties elemente met hierdie klas en inisialiseer hulle.
`gridzyAnimated`	Sal outomaties gestel word as opsie `animate` `true` is. As hierdie klas met die hand gestel word, sal die opsie `animate` outomaties ook `true` word (behalwe as dit uitdruklik op `false` gestel is).

Item Klasse

Klas Naam	Beskrywing
`gridzyItem`	Sal gestel word sodra die item met die inisialiseringsproses begin. Sal nooit verwyder word nie.
`gridzyItemInitializing`	Sal gestel word sodra die item met die inisialiseringsproses begin. Sal deur `gridzyItemReady` vervang word sodra die item volledig geïnisialiseer is. Beteken nie dat beelde volledig gelaai is nie (sien `gridzyItemLoading` ), maar item is gereed om sigbaar te word.
`gridzyItemReady`	Sal `gridzyItemInitializing` vervang sodra die item volledig geïnisialiseer is. Sal nooit verwyder word nie. Beteken nie dat beelde volledig gelaai is nie (sien `gridzyItemComplete` ), maar item is gereed om sigbaar te word.
`gridzyItemLoading`	Sal gestel word sodra die item met die inisialiseringsproses begin. Sal deur `gridzyItemComplete` vervang word sodra die vervatte beelde (gewoonlik net een) volledig gelaai is.
`gridzyItemComplete`	Sal `gridzyItemLoading` vervang sodra die vervatte beelde (gewoonlik net een) volledig gelaai is. Sal nooit verwyder word nie.
`gridzyItemInitialToVisible`	Sal gestel word sodra die item die eerste keer begin verskyn. Sal verwyder word sodra die item heeltemal sigbaar is.
`gridzyItemVisible`	Sal gestel word sodra die item ten volle sigbaar is. Sal verwyder word sodra die item begin verdwyn.
`gridzyItemVisibleToHidden`	Sal gestel word sodra die item begin verdwyn. Sal verwyder word sodra die item heeltemal weggesteek is.
`gridzyItemHidden`	Sal gestel word sodra die item heeltemal weggesteek is. Sal verwyder word sodra die item begin verskyn.
`gridzyItemHiddenToVisible`	Sal gestel word sodra die item begin verskyn (behalwe om die eerste keer te verskyn – sien klas `gridzyItemInitialToVisible` ). Sal verwyder word sodra die item heeltemal sigbaar is.
`gridzyItemVisibleToVisible`	Sal gestel word sodra iets in die rooster verander het, maar die item self was en bly sigbaar. Sal verwyder word sodra die verandering-animasie klaar is.

By verstek word die prosesaanwyser en die animasies vir verskyning en verdwyning van beelde vooraf gedefinieer deur die Gridzy-hoof CSS-lêer.

Met hierdie bogenoemde CSS-klasse kan jy jou eie prosesaanwyser en animasies styl. Durf 'n kykie na die Gridzy-hoof CSS-lêer, om te verstaan wat jy sal moet ignoreer. Geen vrees nie, alles is goed gedokumenteer daar.

Optimaliseer laai

As jy baie beelde gebruik, kan dit 'n goeie idee wees om Gridzy te help om die rooster vinniger te bou.

Voorkom springende beelde

Gridzy het absoluut die aspekverhouding van alle beelde nodig om die rooster te bereken. Hierdie feit lei tot springende elemente as sommige beelde gereed is en ander nie. Hoe meer beelde daar is, hoe meer irriterend kan hierdie effek wees.

Om hierdie gedrag te voorkom, stel net width en height -kenmerke vir alle img elemente in. Dit is belangrik om die korrekte waardes vir elke individuele beeld in te stel, anders sal die beelde vervorm word. Die korrekte waardes is die oorspronklike breedte en hoogte van die onderskeie beeld:

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

Daarna kan Gridzy die rooster onmiddellik bereken sonder om die werklike groottes van die beelde te weet.

Lui laai

Om slegs beelde te laai wat in die sigbare viewport is, volg net hierdie stappe:

Voeg width en height -kenmerke in soos hierbo beskryf (maak seker dat jy die korrekte waardes gebruik)
Vervang alle src kenmerke met data-gridzylazysrc soos hieronder getoon (as jy ook srcset kenmerke het, vervang dit met 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>

Na hierdie stappe sal die beelde gelaai word sodra hulle naby of binne die kykpoort is.

Proses aanwyser

Die prosesaanwyser is die klein geanimeerde ikoon wat verskyn terwyl die prent laai. As jy byskrifte en velle gebruik, sal die prosesaanwyser outomaties gewys word. Andersins het jy 'n paar aanpassings nodig:

Plaas elke img element in 'n div -element
(of in enige ander element – sien semantiese HTML vir meer)
Voeg die klas gridzyImage by elke img -element

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

Daarna moet u die prosesaanwysers sien as die beelde tyd neem om te laai.

Filters

Filters in Gridzy is redelik eenvoudig, maar kragtig. Maak nie saak watter soort filter jy nodig het nie, dit is baie waarskynlik dat dit realiseerbaar is. Al wat jy nodig het, is 'n bietjie CSS en 'n paar HTML-vormelemente ...

Hier is 'n funksionele voorbeeld:

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

Kom ons bou dit stap vir stap

1. Eerstens benodig ons die gewone HTML-struktuur van Gridzy en stel klasname vir alle gallery-items sodat ons dit daarna kan filtreer

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

In hierdie voorbeeld gebruik ons net een klas vir elke element. Maar jy kan ook verskeie klasse vir 'n enkele element stel, as daardie element via verskeie filters gevind kan word.

2. Dan voeg ons 'n paar knoppies by waardeur ons die filters dan kan verander

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

In plaas van die knoppies, kan jy ook ander vormelemente soos merkblokkies, radioknoppies, kiesvelde en so meer gebruik.

Soos u kan sien, is die waardes van die knoppies gewone CSS-kiesers. Sodra ons klaar is, sal 'n klik op so 'n knoppie die beelde vertoon wat by daardie CSS-kieser pas. Tegnies stel dit eenvoudig die filter op hierdie waarde.

Jy kan ook baie meer komplekse keurders gebruik. Byvoorbeeld :not(.animals) sal ook werk, sowel as .animals.people en .animals, .people .

3. Laastens, omhul ons die knoppies in 'n div -houer en bind dit aan die Gridzy-galery, deur die filterControls opsie te stel:

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

Soos u kan sien, gebruik ons ook 'n CSS-kieser vir die filterControls -opsie. Die div houer met die id -kenmerk dien slegs om die knoppies makliker te maak om via daardie CSS-kieser te kies.

Dis dit!

As jy 'n JavaScript-oplossing verkies, kyk na die API .

API

Alhoewel Gridzy sy eie API het, kan die meeste dinge daarsonder gedoen word, bloot deur die DOM te manipuleer. Gridzy sal dit agterkom en die rooster aanpas. Maar daar is ook 'n baie kragtige API ...

Manipuleer die DOM

Vir alle Document Object Model (DOM) manipulasies benodig ons eers die houerelement:

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

Voeg prente by

Dit is belangrik om die nuwe kinderelement volledig te bou en te vul voordat jy dit by die houerelement voeg. Andersins kan Gridzy nie die korrekte afmetings opspoor nie.

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

Verwyder prente

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

Verander Opsies

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

Meer oor die manipulering van die DOM kan jy vind by MDN web docs . Daar is ook 'n inleiding tot die DOM beskikbaar.

Eie API

Om die API te gebruik, benodig ons eers die Gridzy-instansie, wat aan die Gridzy-houerelement gebind is:

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

Kry Opsie

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

Kry alle opsies

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

Stel Opsies

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

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

Pas filter toe

Om 'n filter toe te pas, stel net die filter in wat enige geldige CSS-kieser kan wees:

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

Voeg terugbelfunksies by

UITGEDAAN sedert weergawe 2.4.0
Gebruik eerder die moderne en meer buigsame Events . Sien die volgende afdeling vir besonderhede.

~~Gridzy.js 2 ondersteun sommige opsies vir terugbelfunksies. Hulle kan slegs via die eie API ingestel word, maar net soos ander opsies:~~

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

	~~Beskrywing~~
~~`onBeforeOptionsChanged`~~	~~Terugbelfunksie wat direk opgeroep word voordat opsies opgestel word.~~
~~`onOptionsChanged`~~	~~Terugbelfunksie wat direk na die instelling van opsies opgeroep word.~~
~~`onBeforeRender`~~	~~Terugbelfunksie wat direk voor lewering opgeroep word.~~
~~`onRender`~~	~~Terugbelfunksie wat direk na lewering opgeroep word.~~

Gebruik Events

sedert weergawe 2.4.0

U kan Gridzy-geleenthede presies soos gewone JavaScript-geleenthede gebruik:

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

Sommige gebeurtenisse word op die Gridzy-houerelement afgevuur en ander gebeurtenisse word op die individuele itemelemente binne die houerelement afgevuur.

Gebeurtenisse wat op die Gridzy-houerelement afgevuur is:

	Beskrywing
`gridzyBeforeInit`	Vuur voor galery-inisialisering.
`gridzyInit`	Brand na galery-inisialisering.
`gridzyBeforeOptionsChanged`	Vuur voordat opsies opgestel word.
`gridzyOptionsChanged`	Vuur na die instelling van opsies.
`gridzyBeforeRender`	Vure voor lewering.
`gridzyRender`	Brande na lewering.

As jy enige geleenthede hier mis, stuur asseblief 'n ondersteuningsversoek .

event.target verskaf die Gridzy-houerelement.
event.detail.instance verskaf die Gridzy-instansie.

Gebeurtenisse wat op itemelemente afgevuur is:

	Beskrywing
`gridzyItemBeforeInit`	Vuur voor item inisialisering.
`gridzyItemInit`	Brand na item-inisialisering.
`gridzyItemLoading`	Brand wanneer die item begin laai.
`gridzyItemReady`	Brand wanneer die item gereed is vir roosterberekening. Die aspekverhouding is dus bekend, maar die beeld kan steeds laai.
`gridzyItemComplete`	Vuur wanneer die itemprent volledig gelaai is.

As jy enige geleenthede hier mis, stuur asseblief 'n ondersteuningsversoek .

event.target verskaf die onderskeie itemelement.
event.detail.instance verskaf die Gridzy-instansie.

API – Wêreldwyd

Daar is 'n paar funksies wat onafhanklik is van Gridzy-gevalle. Ons hoef dus nie voorheen 'n instansie te kry nie.

Kry verstek opsie

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

Kry alle verstek opsies

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

Stel verstekopsies

Dit stel nie die opsies van alle reeds geïnisialiseerde Gridzy-gevalle nie, maar definieer die basis vir nuwe gevalle. As 'n opsie van 'n bestaande instansie egter via die waarde null teruggestel sou word, sal dit die nuwe verstekwaarde gebruik.

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

Jy kan dit gebruik om opsies wêreldwyd te stel, as jy dit bel voordat DOM gereed is. U hoef dus nie meer opsies as eienskappe in te stel nie.

Outomatismes

Solank as wat alle outomatismes van Gridzy.js 2 aktief is, is daar geen behoefte aan die onderstaande metodes nie. Maar die outomatismes kan afgeskakel word om Gridzy op 'n meer tradisionele manier te gebruik:

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

Sommige van hierdie opsies kan nie ingestel word via data-gridzy- attribute of via setOptions() , as gevolg van logiese redes:

	Verstekwaarde	Beskrywing
`autoInitOnDomReady`	`true`	Bespeur elemente met `gridzy` tydens bladsylaai en inisialiseer dit. Instelbaar via `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Bespeur nuwe elemente met klas `gridzy` sodra hulle in die DOM verskyn en inisialiseer hulle. (bv. oor die gebruik van bladsyoorgange) Instelbaar via `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Bespeur of kinderelemente (prente) bygevoeg of verwyder word, en dateer die rooster outomaties op. Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definieer of die `data-gridzy-` eienskappe oor die algemeen gebruik word of nie. As dit `false` is, kan opsies slegs via die eie API gestel word. Instelbaar via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Bespeur veranderinge van `data-gridzy-` eienskappe, en dateer die rooster outomaties op. Bespeur ook of die `gridzyAnimated` -klas bygevoeg of verwyder word en as `style` plaasvind. As `useOptionAttributes` `false` is, bespeur dit slegs `style` . Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Bespeur veranderinge van `class` van alle kinderelemente (prente). Relevant met betrekking tot filters. Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver sedert weergawe 2.5.0	`true`	Bespeur veranderinge van `src` kenmerke van alle beelde. Relevant wanneer dit saam met React of soortgelyke biblioteke gebruik word. Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver sedert weergawe 2.6.0	`true`	Bespeur veranderinge van die elementwydte. Relevant met betrekking tot responsiewe ontwerp. (Voor weergawe 2.6.0 is 'n venstergrootte-gebeurtenisluisteraar gebruik) Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inisialiseer handmatig

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

Vernietig die instansie

Rofweg gesê, die teenoorgestelde van die initialisering van Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkroniseer kinderlys met die hand

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

Sinkroniseer 'n enkelkindelement handmatig

Gewoonlik nie nodig nie, behalwe in baie seldsame gevalle.

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

Sinkroniseer eienskappe handmatig

Let daarop dat useOptionAttributes -opsie true moet wees hiervoor.

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

Kragweergawe

Gewoonlik nie nodig nie, selfs al is alle outomatismes afgeskakel

gridzyInstance.render();