Útgáva 2.x – Gridzy.Gallery

Heimasíðan er sjálvvirkandi týdd. Um okkurt ikki er greitt, vinarliga hygg eftir ensku skjølunum.

Grunnýtsla

Lat Gridzy fílurnar upp á tín ambætara og legg tær til tína heimasíðu (vanliga í høvuðspartinum):

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

Legg HTML-kotuna til (hvar sum helst í kropspartinum):

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

Tað er tað! Hatta er eitt fult virkandi dømi. Eingin eyka initialisering er kravd.

Uppseting

Tann lættasti mátin at konfigurera Gridzy er, at bara brúka HTML eginleikar. Tú skalt bara seta data-gridzy- frammanfyri valmøguleikanøvnini. So fyri at seta spaceBetween , skalt tú bara leggja eginleikan data-gridzy-spaceBetween til.

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

Høvuðsmøguleikar

	Forsett virði	Lýsing
`animate`	`true`	Ásetur, um animatiónir skulu nýtast, tá ið grindin broytist (til dømis tá ið støddin á kagavindeyganum verður broytt ella tá ið eitt filtur verður sett).
`layout`	`justified`	Definerar brúkta uppsetingina. Gridzy.js 2 stuðlar teimum báðum ymisku uppsetingunum `justified` og `waterfall` . Hvør teirra hevur sínar egnu eyka valmøguleikar, sum tú finnur undir hesi talvuni.
`filter`	`*`	Ásetir, hvørjar myndir skulu vísast. Ein og hvør CSS-veljari kann brúkast sum virði her. Vanliga sett sjálvvirkandi umvegis `filterControls` (sí næsta møguleika). Hygg eftir Filtur
`filterControls`		Ásetur, hvørjir form-elementir kunnu brúkast til at filtra myndirnar. Ein og hvør CSS veljari, sum velur HTML oyðublaðselementir, kann brúkast sum virði her. Hygg eftir Filtur
`autoConsiderScrollBars`	`true`	At siga frammanundan um tøku breiddina, um rullustrikur koma fram ella hvørva. Tað verður altíð mælt til at lata tað standa á `true` uttan so at henda sjálvvirkan elvir til trupulleikar.

Justified Uppsetingarmøguleikar

	Forsett virði	Lýsing
`autoFontSize`	`false`	Dagførir sjálvvirkandi skriftstødd eginleikan í hvørjum kassa grundað á upprunaligu kassastøddina. Standard er eginleikin skriftstødd ikki settur beinleiðis.
`desiredHeight`	`190`	Definerar ynsktu hæddina á elementrøðum. Sjálv hæddin verður roknað alt eftir tøku breiddini og elementunum í røðini.
`hideOnMissingImage`	`true`	Fjalir kassar, sum innihalda myndir, sum ikki kundu heintast.
`spaceBetween`	`4`	Definerar fjarstøðuna millum elementir í pixel.
`lastRowAlign` síðani útgávu 2.3.0.	`justified`	Definerar atferðina hjá seinastu røð. Loyvd virði eru `left` , `center` , `right` og `justified` .
`singleRowAlign` síðani útgávu 2.3.0.	`justified`	Definerar atferðina, um tað bert er ein einkult røð. Loyvd virði eru `left` , `center` , `right` og `justified` .
~~`fillLastRow`~~ ~~síðani útgávu 2.1.0.~~	~~`true`~~	STRIKAÐ síðani útgávu 2.4.0. (ÚTBÚGVING síðani útgávu 2.3.0 ) Skipar myndirnar soleiðis, at seinasta røðin altíð er heilt fylt. Um tú ætlar at leggja myndir dynamiskt afturat, so kundi tað verið eitt gott hugskot at sløkt hetta. Hevur onga ávirkan á einstakar røðir (sí `fillSingleRow` ).
`fillSingleRow` síðani útgávu 2.1.0.	~~`true`~~	STRIKAÐ síðani útgávu 2.4.0. (ÚTBÚGVING síðani útgávu 2.3.0 ) Um tað bara er ein røð, leggur hon myndirnar soleiðis til rættis, at røðin altíð er heilt fylt. Um tað kann henda, at tú hevur eina ella tvær myndir í myndasavninum, so kundi tað verið eitt gott hugskot at sløkt hetta.

Waterfall Uppsetingarmøguleikar

	Forsett virði	Lýsing
`autoFontSize`	`false`	Dagførir sjálvvirkandi skriftstødd eginleikan í hvørjum kassa grundað á upprunaligu kassastøddina. Standard er eginleikin skriftstødd ikki settur beinleiðis.
`desiredWidth`	`250`	Definerar ynsktu breiddina á súlum. Sjálv breiddin verður roknað alt eftir tøku breiddini og talinum av súlum.
`hideOnMissingImage`	`true`	Fjalir kassar, sum innihalda myndir, sum ikki kundu heintast.
`horizontalOrder`	`false`	Definerar at elementini eru sett strangt eitt element í hvørjari súlu frá vinstru til høgru, byrjar síðani aftur í mest vinstru súlu óheft í hvørjari súlu er meira stað. Standard verða elementini altíð sett í súluna við minstu hædd.
`spaceBetween`	`4`	Definerar fjarstøðuna millum elementir í pixel.
`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`.

Fleiri framkomnir møguleikar

Fyri fleiri framkomnar møguleikar, hygg eftir API .

Merkingarligt HTML

Einfaldasti HTML bygnaðurin hjá Gridzy er hesin:

<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 er tó sera fleksibult og tú kanst brúka næstan hvønn annan HTML struktur. Tað eru bert nøkur fá punkt at hugsa um:

Hvørt barn av ílati-elementinum umboðar ein lutur í ristinum.
Bæði container-elementið og børnini hjá tí kunnu vera hvørt tag-slag, so sum ul og li (umhugsa bara at nullstilla kaga-standard).
Um eitt img -element ikki er eitt beinleiðis barn í sær sjálvum, so hevur tað brúk fyri flokkinum gridzyImage .

So hetta er eisini ein virkandi HTML bygnaður:

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

Serliga um tú vilt leggja yvirskriftir til, so skalt tú hava ein framkomnan HTML-bygnað. Fyri at læra meira um tað, hygg eftir Yvirskriftir & Skins .

Yvirskriftir og skins

Um tú vilt leggja yvirskriftir til títt myndasavn, mást tú definera útsjóndina. Tí eru nøkur fordefinerað skinn tøk. Hvørt húð, sum er samansett av eini CSS fílu. Tú mást leggja hesa fíluna afturat høvuðs Gridzy fílunum (vanliga í høvuðspartinum):

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

Harumframt hevur tú brúk fyri einum framkomnum HTML bygnaði:

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

Um tú undrast á HTML bygnaðin, so hygg eftir Semantisk HTML .

Til yvirskriftina kanst tú brúka hvørt slag av merki, men tryggja tær bara, at tað hevur flokkin gridzyCaption . img -elementið hevur brúk fyri flokkinum gridzyImage .

Omanfyristandandi dømi vísir tær húðina gridzySkinClassic . Fyri at brúka eitt annað, skalt tú bara skifta húðnavnið út við eitt av hesum:

Skins fylgja við

	Tøkur flokkar
gridzyHúðBlankt eitt gott útgangsstøði fyri at skapa egna húð beinleiðis forsýning	`gridzySkinBlank`
gridzySkinClassic beinleiðis forsýning	`gridzySkinClassic` `gridzySkinClassicLight`(ÚTØKT síðani útgávu 2.6.0)
gridzySkinFullOverlay beinleiðis forsýning	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(ÚTØKT síðani útgávu 2.6.0)
gridzySkinLift beinleiðis forsýning	`gridzySkinLift` `gridzySkinLiftLight`(ÚTØKT síðani útgávu 2.6.0)
gridzySkinMagnifier zoom-funktiónin fylgir ikki við beinleiðis forsýning	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(ÚTØKT síðani útgávu 2.6.0)

Øll omanfyristandandi skins hava bara brúk fyri einari CSS fílu, men tað eru fleiri skins sum eisini hava brúk fyri einari JavaScript fílu:

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

	Tøkur flokkar
gridzySkinBlur riggar ikki í IE beinleiðis forsýning	`gridzySkinBlur` `gridzySkinBlurLight`(ÚTØKT síðani útgávu 2.6.0)
gridzySkinCard beinleiðis forsýning	`gridzySkinCard` `gridzySkinCardLight`(ÚTØKT síðani útgávu 2.6.0)

Húðmøguleikar

Síðani útgávu 2.6.0 eru Møguleikar at uppseta innbygdu skinnini. Alt eftir ávísari húð kanst tú seta bakgrundslitin, tekstlitin og tekstskuggan. Tú mást bara brúka CSS tilrættalagdar eginleikar sum tú sært her:

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

Hygg eftir stuðlaðu breytunum og forsettum virðum fyri hvørt húð her:

gridzySkinClassic

Breytin	Forsett virði	Kunning
`--background`	`rgba(0, 0, 0, .7)`	loyvir øllum CSS bakgrundsvirði
`--color`	`rgb(255, 255, 255)`	loyvir øllum CSS litvirði
`--text-shadow`	`none`	loyvir øllum CSS tekst-skuggavirði

gridzySkinFullOverlay

Breytin	Forsett virði	Kunning
`--background`	`rgba(0, 0, 0, .7)`	loyvir øllum CSS bakgrundsvirði
`--color`	`rgb(255, 255, 255)`	loyvir øllum CSS litvirði
`--text-shadow`	`none`	loyvir øllum CSS tekst-skuggavirði

gridzySkinLift

Breytin	Forsett virði	Kunning
`--background`	`rgba(0, 0, 0, .7)`	loyvir øllum CSS bakgrundsvirði
`--color`	`rgb(255, 255, 255)`	loyvir øllum CSS litvirði
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	loyvir øllum CSS tekst-skuggavirði

gridzySkinMagnifier

Breytin	Forsett virði	Kunning
`--background`	`rgba(0, 0, 0, .7)`	loyvir øllum CSS bakgrundsvirði
`--color`	`rgb(255, 255, 255)`	loyvir øllum CSS litvirði

Hendan húðin stuðlar ikki --text-shadow

gridzySkinBlur

Breytin	Forsett virði	Kunning
`--background`	`rgba(0, 0, 0, .7)`	loyvir øllum CSS bakgrundsvirði
`--color`	`rgb(255, 255, 255)`	loyvir øllum CSS litvirði
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	loyvir øllum CSS tekst-skuggavirði

gridzySkinCard

Breytin	Forsett virði	Kunning
`--background`	`rgba(0, 0, 0, 1)`	loyvir øllum CSS bakgrundsvirði
`--color`	`rgb(255, 255, 255)`	loyvir øllum CSS litvirði
`--text-shadow`	`none`	loyvir øllum CSS tekst-skuggavirði

Øll fordefinerað skins stuðla bert einføldum tekstyvirskriftum. Tú kanst skapa tíni heilt egnu og meira kompleksu skins. Vinarliga hygg eftir Stíli Gridzy .

Stílur Gridzy

Um eingin fordefinerað húð passar til tín tørv, kanst tú stíla tína egnu.

Lættasti mátin er fyrst at kopiera eina verandi húð og laga hana til tín egna tørv. Fordefineraða gridzySkinBlank vildi vanliga givið eitt gott grundarlag eins og eina góða dokumentatión í CSS fíluni:

/** 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 fíluni finnur tú flokkarnar gridzySkinBlank , gridzyImage og gridzyCaption . Gridzy sjálvur hevur ikki brúk fyri hesum flokkum. Teir eru bara brúktir til stíling og so kanst tú strika ella umdoypa teir um tú vilt.

Harumframt finnur tú CSS flokkin gridzyItem . Gridzy setur hendan flokkin sjálvvirkandi til øll beinleiðis børn av høvuðsílatinum. So, tú kanst brúka hendan flokkin til at stíla lutir í tínum myndasavni.

Hugsa um týðandi ting

Lutinnihaldið skal vera fult svarandi. Hav í huga, at elementstøddin avgjørt fer at broytast. Brúka prosentvirði ístaðin fyri pixelvirði. Og hygg eftir Gridzy uppsetingarmøguleikanum autoFontSize , sum bindur skriftstøddina á lutakassastøddina.
Hvør lutur skal hava eitt væl avmarkað støddlutfall. Støddlutfallið á lutunum broytist ongantíð og er neyðugt fyri at rokna netið út. So um ein lutur ikki sjálvvirkandi hevur eitt væl avmarkað støddlutfall, so fordefinera hann manuelt (t.d. umvegis css).

Í summum førum kann tað vera lættari at stíla innihaldið í lutunum, áðrenn Gridzy er initialiserandi. Strika bara flokkin gridzy ella Gridzy javascript fíluna fyribils fyri hetta.

Tað er tað! Tað er alt, tú skalt hava fyri at byggja tína heilt egnu húð. Flestu av teimum fordefineraðu skinnunum brúka ikki meira enn hetta.

Men tað kundi verið meira um tú vilt ...

Framkomin skins

Gridzy brúkar fleiri CSS flokkar enn bert gridzyItem . Tey flestu verða sett sjálvvirkandi og tú kanst brúka tey til stíling eisini.

Høvuðsíløtflokkar

Floksnavn	Lýsing
`gridzy` at seta manuelt	Gridzy finnur sjálvvirkandi elementir við hesum flokkinum og initialiserar teir.
`gridzyAnimated`	Verður sett sjálvvirkandi um valmøguleikin `animate` er `true` . Um hesin flokkurin verður settur manuelt, so verður valmøguleikin `animate` sjálvvirkandi `true` eisini (undantikið um hann er beinleiðis settur til `false` ).

Lutaflokkar

Floksnavn	Lýsing
`gridzyItem`	Verður sett so skjótt sum luturin byrjar initialiseringstilgongdina. Verður ongantíð burturbeind.
`gridzyItemInitializing`	Verður sett so skjótt sum luturin byrjar initialiseringstilgongdina. Verður skift út við `gridzyItemReady` so skjótt sum luturin er fult initialiseraður. Merkir ikki at myndir eru fullheintaðar (sí `gridzyItemLoading` ), men luturin er klárur at fáa sjónligan.
`gridzyItemReady`	Vil avloysa `gridzyItemInitializing` so skjótt sum luturin er fult initialiseraður. Verður ongantíð burturbeind. Merkir ikki at myndir eru fullheintaðar (sí `gridzyItemComplete` ), men luturin er klárur at fáa sjónligan.
`gridzyItemLoading`	Verður sett so skjótt sum luturin byrjar initialiseringstilgongdina. Verður skift út við `gridzyItemComplete` so skjótt sum innihaldsligu myndirnar (vanliga bert ein) eru fullheintaðar.
`gridzyItemComplete`	Vil avloysa `gridzyItemLoading` so skjótt sum innihaldsligu myndirnar (vanliga bert ein) eru fullheintaðar. Verður ongantíð burturbeind.
`gridzyItemInitialToVisible`	Verður sett so skjótt sum luturin byrjar at koma fram fyrstu ferð. Verður tikin burtur so skjótt sum luturin er heilt sjónligur.
`gridzyItemVisible`	Verður sett so skjótt sum luturin er fult sjónligur. Verður tikin burtur so skjótt sum luturin byrjar at hvørva.
`gridzyItemVisibleToHidden`	Verður sett so skjótt sum luturin byrjar at hvørva. Verður tikin burtur so skjótt sum luturin er heilt fjaldur.
`gridzyItemHidden`	Verður sett so skjótt sum luturin er heilt fjaldur. Verður tikin burtur so skjótt sum luturin byrjar at koma fram.
`gridzyItemHiddenToVisible`	Verður sett so skjótt sum luturin byrjar at síggjast (undantikið at hann kemur fram fyrstu ferð – sí flokkin `gridzyItemInitialToVisible` ). Verður tikin burtur so skjótt sum luturin er heilt sjónligur.
`gridzyItemVisibleToVisible`	Verður sett so skjótt okkurt í grindini broyttist, men sjálvur luturin var og halda seg sjónligan. Verður strikað so skjótt sum broytingar-animatiónin er liðug.

Standard er prosessvísarin og animatiónirnar til myndir, sum koma fram og hvørva, fordefineraðar av Gridzy høvuðs CSS fíluni.

Við hesum omanfyri nevndu CSS-flokkum kanst tú stíla tín egna prosess-indikator og animatiónir. Tor at hyggja inn í Gridzy høvuðs CSS fíluna, fyri at skilja hvat tú hevði havt at yvirhálað. Eingin ótti, alt er væl skjalprógvað har.

Optimera innlesing

Um tú brúkar nógvar myndir, so kundi tað verið eitt gott hugskot at hjálpt Gridzy at bygt netið skjótari.

Forða fyri at hoppa myndir

Gridzy hevur absolutt brúk fyri støddlutfallinum á øllum myndum fyri at rokna grindina út. Hesi fakta hava við sær hoppandi elementir, um nakrar myndir eru klárar og aðrar ikki. Jú fleiri myndir eru, jú meira irriterandi kann henda effektin vera.

Fyri at forða fyri hesi atferð, skalt tú bara seta width og height eginleikar fyri allar img elementir. Tað er umráðandi at seta røttu virðini fyri hvørja einstaka mynd, annars vóru myndirnar skeivar. Rættu virðini eru upprunaliga breiddin og hæddin á ávikavist myndini:

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

Síðani kann Gridzy rokna grindina beinanvegin uttan at neyðugt er at vita faktisku støddirnar á myndunum.

Latur innlesing

Fyri at heinta bert myndir sum eru í sjónliga vísingarrúminum, skalt tú bara fylgja hesum stigum:

Set width og height -eginleikar inn sum lýst omanfyri (syrg fyri at brúka røttu virðini)
Skift allar src eginleikar út við data-gridzylazysrc sum víst niðanfyri (um tú eisini hevur srcset eginleikar, skift teir út við 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>

Eftir hesi trin verða myndirnar heintaðar so skjótt tær eru nærhendis ella inni í sýnisrúminum.

Tilgongdarvísari

Prosessvísarin er lítla lívgaða ikonið, sum kemur fram, meðan myndin verður heintað. Um tú brúkar yvirskriftir & skins , verður tilgongdarvísarin vístur sjálvvirkandi. Annars skalt tú hava nakrar tillagingar:

Set hvørt img element í eitt div -element
(ella inn í okkurt annað element – sí semantiskt HTML fyri meira)
Legg flokkin gridzyImage til hvønn 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>

Eftir tað skalt tú síggja prosessvísararnar um myndirnar taka tíð at heinta.

Filtur

Filtur í Gridzy eru nokkso einføld men kraftmikil. Sama hvat slag av filtri tú hevur brúk fyri, so er tað sera sannlíkt, at tað er realiserandi. Tað einasta tú skalt hava er eitt sindur av CSS og nøkur fá HTML oyðublað ...

Her er eitt funktionelt dømi:

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

Latið okkum byggja tað upp stig fyri stig

1. Fyrst hava vit brúk fyri vanliga HTML bygnaðinum hjá Gridzy og seta floksnøvn til allar gallerilutir so vit kunnu filtra teir aftaná

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

Í hesum døminum brúka vit bert ein flokk fyri hvønn element. Men tú kanst eisini seta fleiri flokkar til eitt element, um tað elementið skal finnast umvegis fleiri filtur.

2. Síðani leggja vit nakrar knappar afturat, sum vit kunnu broyta filtrini ígjøgnum tá

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

Ístaðin fyri knøttarnar kundi tú eisini brúkt aðrar oyðublaðselementir sum avmerkingarboksir, útvarpsknappar, val teigar o.s.fr.

Sum tú sært, so eru virðini á knøttunum vanligir CSS valmenn. So skjótt vit eru liðug, so vísir eitt klikk á ein slíkan knøtt myndirnar, sum passa til tann CSS veljaran. Tekniskt setur tað heilt einfalt filter til hetta virðið.

Tú kanst eisini brúka nógv fløktari valmenn. Til dømis vildi :not(.animals) eisini virkað, eins og .animals.people og .animals, .people .

3. Seinast innhýsa vit knøttarnar í einum div ílati og binda teir til Gridzy-galleriið, við at seta filterControls valmøguleikan:

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

Sum tú sært, so brúka vit eisini ein CSS val til filterControls valmøguleikan. div ílatið við id eginleikanum tænir bert til at gera knøttarnar lættari at velja umvegis tann CSS veljaran.

Tað er tað!

Um tú heldur vilt hava eina JavaScript loysn, kanna so API .

API

Hóast Gridzy hevur sítt egna API, so kann tað mesta gerast uttan tað, einfalt við at manipulera DOM. Gridzy fer at leggja til merkis tað og stilla grindina. Men har er eisini eitt sera kraftmikið API ...

At handfara DOM

Til allar skjalobjektmodell (DOM) manipulatiónir hava vit fyrst brúk fyri ílatinum:

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

Legg myndir til

Tað er umráðandi at byggja upp og fylla nýggja barnaelementið til fulnar, áðrenn tú leggur tað til ílatið. Annars kann Gridzy ikki uppdaga røttu víddirnar.

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

Strika myndir

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

Broyt valmøguleikar

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

Meira um at manipulera DOM kanst tú finna á MDN vevskjølum . Eisini er ein Inngangur til DOM tøkur.

Eigara API

Fyri at brúka API, hava vit fyrst brúk fyri Gridzy instansini, sum er bundin til Gridzy ílatið:

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

Fá valmøguleika

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

Fá allar møguleikar

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

Set valmøguleikar

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

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

Brúka filtur

At brúka eitt filtur er bara at seta filter , sum kann vera ein og hvør gyldugur CSS-veljari:

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

Legg afturringingsfunktiónir til

ÚTBÚGVING síðani útgávu 2.4.0.
Brúka tey nútímans og meira smidligu Tiltøkini ístaðin. Sí næsta partin fyri nærri upplýsingar.

~~Gridzy.js 2 stuðlar nøkrum møguleikum fyri afturkallingarfunktiónum. Tey kunnu bert setast umvegis egna API, men eins og aðrir møguleikar:~~

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

	~~Lýsing~~
~~`onBeforeOptionsChanged`~~	~~Afturkallingarfunktión, sum verður kallað beint áðrenn valmøguleikar verða settir.~~
~~`onOptionsChanged`~~	~~Afturkallingarfunktión, sum verður kallað beint eftir at hava sett valmøguleikar.~~
~~`onBeforeRender`~~	~~Afturkallingarfunktión, sum verður kallað beint áðrenn endurgeving.~~
~~`onRender`~~	~~Afturkallingarfunktión, sum verður kallað beint eftir rendering.~~

Brúka hendingar

síðani útgávu 2.4.0.

Tú kanst brúka Gridzy hendingar júst sum vanligar JavaScript hendingar:

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

Summar hendingar verða skotnar á Gridzy ílatið og aðrar hendingar verða skotnar á einstøku lutelementini innan ílatið.

Hendingar, sum vórðu skotnar á Gridzy ílati-elementinum:

	Lýsing
`gridzyBeforeInit`	Eldur áðrenn galleri initialisering.
`gridzyInit`	Eldur eftir galleri initialisering.
`gridzyBeforeOptionsChanged`	Eldur áðrenn tú setur valmøguleikar.
`gridzyOptionsChanged`	Eldur eftir at hava sett valmøguleikar.
`gridzyBeforeRender`	Eldur áðrenn rendering.
`gridzyRender`	Eldur eftir rendering.

Um tú sleppur undan nøkrum tiltøkum her, so send eina stuðulsfyrispurning .

event.target veitir Gridzy ílatið.
event.detail.instance veitir Gridzy tilburðin.

Hendingar skotnar á lutelementum:

	Lýsing
`gridzyItemBeforeInit`	Eldur áðrenn lutinitialisering.
`gridzyItemInit`	Eldur eftir lutinitialisering.
`gridzyItemLoading`	Eldur tá luturin byrjar at heinta.
`gridzyItemReady`	Eldur tá luturin er klárur til netrokning. So er støddlutfallið kent, men myndin kann framvegis vera loading.
`gridzyItemComplete`	Eldur tá lutumyndin er fullheintað.

Um tú sleppur undan nøkrum tiltøkum her, so send eina stuðulsfyrispurning .

event.target gevur ávísa lutelementið.
event.detail.instance veitir Gridzy tilburðin.

API – Alheims

Tað eru nakrar funkur, sum eru óheftar av Gridzy instansum. So okkum nýtist ikki at fáa instans áðrenn.

Fá forsetta møguleikan

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

Fá allar forsettar møguleikar

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

Set forsettar valmøguleikar

Hetta setur ikki valmøguleikarnar hjá øllum longu initialiseraðum Gridzy-tilburðum, men definerar grundarlagið undir nýggjum tilburðum. Men um ein valmøguleiki av einum verandi instansi skuldi nullstillast umvegis virðið null , so skuldi hann brúkt nýggja forsetta virðið.

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

Tú kanst brúka hetta til at seta valmøguleikar globalt, um tú ringir til tað áðrenn DOM er klárt. So hevði tú ikki havt brúk fyri at sett valmøguleikar sum eginleikar longur.

Sjálvvirkandi

So leingi allar automatismur í Gridzy.js 2 eru virknar, er ikki neyðugt við niðanfyristandandi háttum. Men automatismurnar kunnu sløkkjast fyri at brúka Gridzy á ein meira siðbundnan hátt:

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

Summir av hesum møguleikum kunnu ikki setast umvegis data-gridzy- eginleikar ella umvegis setOptions() , av logiskum orsøkum:

	Forsett virði	Lýsing
`autoInitOnDomReady`	`true`	Uppdagar elementir við flokki `gridzy` við síðuinnlesing og initialiserar teir. Stillast kann umvegis `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Mutatiónseygleiðari	`true`	Uppdagar nýggjar elementir við klassa `gridzy` so skjótt teir koma fram í DOM og initialiserar teir. (t.d. um at brúka síðuskifti) Stillast kann umvegis `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Mutatiónseygleiðari	`true`	Uppdagar um barnelementir (myndir) verða lagdar afturat ella strikaðar, og dagførir netið sjálvvirkandi. Stillast kann umvegis `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definerar um `data-gridzy-` eginleikarnir verða alment brúktir ella ikki. Um hetta er `false` kunnu valmøguleikar bert setast umvegis egna API. Stillast kann umvegis `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Eygleiðari av mutatión	`true`	Uppdagar broytingar í `data-gridzy-` eginleikum, og dagførir netið sjálvvirkandi. Uppdagar eisini um `gridzyAnimated` flokkurin er lagdur afturat ella strikaður og um `style` eginleikabroytingar henda. Um `useOptionAttributes` er `false` , so uppdagar tað bert `style` . Stillast kann umvegis `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Mutatiónseygleiðari	`true`	Uppdagar broytingar í `class` hjá øllum barnelementum (myndum). Viðkomandi viðvíkjandi filtrum. Stillast kann umvegis `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Mutatiónseygleiðari síðani útgávu 2.5.0.	`true`	Uppdagar broytingar í `src` eginleikum hjá øllum myndum. Viðkomandi tá ið tað verður brúkt saman við React ella líknandi bókasøvnum. Stillast kann umvegis `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Broyt stødd eygleiðari síðani útgávu 2.6.0.	`true`	Uppdagar broytingar í elementbreiddini. Viðkomandi viðvíkjandi svarandi sniðgeving. (Áðrenn útgávu 2.6.0 varð ein vindeyga broytandi hendingar lurtari brúktur) Stillast kann umvegis `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Initialisera manuelt

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

Oyðilegg instansina

Groft sagt, tað øvugta av at initialisera Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Samskipa barnalistan manuelt

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

Synkronisera eitt barnaelement manuelt

Vanliga ikki brúk fyri, uttan í sera sjáldsomum førum.

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

Samskipa eginleikar manuelt

Legg til merkis, at useOptionAttributes valmøguleikin skal vera true fyri hetta.

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

Tvingsilsframleiðsla

Vanliga ikki neyðugt, sjálvt um allar automatisur eru sløktar

gridzyInstance.render();

WordPress tilskot

Javaskriftsbókasavn

Tænasta