Versjon 2.x – Gridzy.Gallery

Nettstedet er automatisk oversatt. Hvis noe ikke er klart, vennligst ta en titt på den engelske dokumentasjonen.

Grunnleggende bruk

Last opp Gridzy-filene til serveren din og legg dem til nettstedet ditt (vanligvis i hoveddelen):

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

Legg til HTML-koden (hvor som helst i brødtekstdelen):

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

Det er det! Det er et fullt funksjonelt eksempel. Ingen ekstra initialisering er nødvendig.

Konfigurasjon

Den enkleste måten å konfigurere Gridzy på er å bare bruke HTML-attributter. Du trenger bare å prefikse alternativnavnene med data-gridzy- . Så for å angi spaceBetween alternativet, legg til attributtet 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>

Hovedalternativer

	Standardverdi	Beskrivelse
`animate`	`true`	Bestemmer om animasjoner skal brukes når rutenettet endres (for eksempel når du endrer størrelse på nettleservinduet eller når du angir et filter).
`layout`	`justified`	Definerer brukt layout. Gridzy.js 2 støtter de to forskjellige layoutene `justified` og `waterfall` . Hver av dem har sine egne ekstra alternativparametere, som du finner under denne tabellen.
`filter`	`*`	Bestemmer hvilke bilder som skal vises. Enhver CSS-velger kan brukes som verdi her. Settes vanligvis automatisk via `filterControls` (se neste alternativ). Sjekk ut filtre
`filterControls`		Bestemmer hvilke skjemaelementer som kan brukes til å filtrere bildene. Enhver CSS-velger som velger HTML-skjemaelementer, kan brukes som verdi her. Sjekk ut filtre
`autoConsiderScrollBars`	`true`	For å forutsi tilgjengelig bredde hvis rullefelt vises eller forsvinner. Det anbefales alltid å la det være `true` med mindre denne automatikken forårsaker problemer.

Justified Layoutalternativer

	Standardverdi	Beskrivelse
`autoFontSize`	`false`	Oppdaterer font-size-egenskapen for hver boks automatisk basert på den opprinnelige boksstørrelsen. Som standard er font-size-egenskapen ikke angitt eksplisitt.
`desiredHeight`	`190`	Definerer ønsket høyde på elementrader. Den faktiske høyden vil bli beregnet avhengig av tilgjengelig bredde og elementene i raden.
`hideOnMissingImage`	`true`	Skjuler bokser som inneholder bilder som ikke kunne lastes.
`spaceBetween`	`4`	Definerer avstanden mellom elementer i piksler.
`lastRowAlign` siden versjon 2.3.0	`justified`	Definerer oppførselen til den siste raden. Tillatte verdier er `left` , `center` , `right` og `justified` .
`singleRowAlign` siden versjon 2.3.0	`justified`	Definerer virkemåten hvis det bare er én enkelt rad. Tillatte verdier er `left` , `center` , `right` og `justified` .
~~`fillLastRow`~~ ~~siden versjon 2.1.0~~	~~`true`~~	FJERNET siden versjon 2.4.0 (AVFALDET siden versjon 2.3.0 ) Ordner bildene slik at den siste raden alltid er helt fylt. Hvis du planlegger å legge til bilder dynamisk, kan det være en god idé å deaktivere dette. Har ingen effekt på enkeltrader (se `fillSingleRow` ).
`fillSingleRow` siden versjon 2.1.0	~~`true`~~	FJERNET siden versjon 2.4.0 (AVFALDET siden versjon 2.3.0 ) ~~Hvis det bare er én rad, ordner den bildene slik at raden alltid er helt fylt. Hvis det kan skje at du kun har ett eller to bilder i galleriet, kan det være lurt å deaktivere dette.~~

Waterfall Layoutalternativer

	Standardverdi	Beskrivelse
`autoFontSize`	`false`	Oppdaterer font-size-egenskapen for hver boks automatisk basert på den opprinnelige boksstørrelsen. Som standard er font-size-egenskapen ikke angitt eksplisitt.
`desiredWidth`	`250`	Definerer ønsket bredde på kolonner. Den faktiske bredden vil bli beregnet avhengig av tilgjengelig bredde og antall kolonner.
`hideOnMissingImage`	`true`	Skjuler bokser som inneholder bilder som ikke kunne lastes.
`horizontalOrder`	`false`	Definerer at elementene er plassert strengt tatt ett element i hver kolonne fra venstre til høyre, og starter deretter på nytt i kolonnen lengst til venstre uavhengig av hvilken kolonne som er mest plass. Som standard vil elementene alltid være plassert i kolonnen med den minste høyden.
`spaceBetween`	`4`	Definerer avstanden mellom elementer i piksler.
`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`.

Flere avanserte alternativer

For mer avanserte alternativer, sjekk ut API .

Semantisk HTML

Den enkleste HTML-strukturen til Gridzy er denne:

<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 imidlertid veldig fleksibel og du kan bruke nesten hvilken som helst annen HTML-struktur. Det er bare noen få punkter å vurdere:

Hvert underordnede element til beholderelementet representerer ett element i rutenettet.
Både containerelementet og dets underordnede element kan være en hvilken som helst tagtype, for eksempel ul og li (bare vurder å tilbakestille nettleserens standardinnstillinger).
Hvis et img -element ikke er et direkte underordnet i seg selv, trenger det klassen gridzyImage .

Så dette er også en fungerende HTML-struktur:

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

Spesielt hvis du vil legge til bildetekster, trenger du en avansert HTML-struktur. For å lære mer om det, ta en titt på Captions & Skins .

Bildetekster og skinn

Hvis du vil legge til bildetekster i galleriet ditt, må du definere utseendet. Derfor er noen forhåndsdefinerte skins tilgjengelige. Hver hud består av en CSS-fil. Du må legge til denne filen i tillegg til de viktigste Gridzy-filene (vanligvis i head-delen):

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

I tillegg trenger du en avansert HTML-struktur:

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

Hvis du lurer på HTML-strukturen, ta en titt på Semantisk HTML .

For bildeteksten kan du bruke hvilken som helst type tag, bare sørg for at den har klassen gridzyCaption . img elementet trenger klassen gridzyImage .

Eksempelet ovenfor viser deg huden gridzySkinClassic . For å bruke et annet, erstatt bare hudnavnet med ett av disse:

Inkludert skinn

	Tilgjengelige klasser
gridzySkinBlank et godt utgangspunkt for å skape et eget skinn live forhåndsvisning	`gridzySkinBlank`
gridzySkinClassic live forhåndsvisning	`gridzySkinClassic` `gridzySkinClassicLight`(AVFALDET siden versjon 2.6.0)
gridzySkinFullOverlay live forhåndsvisning	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(AVFALDET siden versjon 2.6.0)
gridzySkinLift live forhåndsvisning	`gridzySkinLift` `gridzySkinLiftLight`(AVFALDET siden versjon 2.6.0)
gridzySkinMagnifier zoomfunksjonalitet er ikke inkludert live forhåndsvisning	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(AVFALDET siden versjon 2.6.0)

Alle de ovennevnte skallene trenger bare en CSS-fil, men det er flere skall som også krever en JavaScript-fil:

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

	Tilgjengelige klasser
gridzySkinBlur fungerer ikke i IE live forhåndsvisning	`gridzySkinBlur` `gridzySkinBlurLight`(AVFALDET siden versjon 2.6.0)
gridzySkinCard live forhåndsvisning	`gridzySkinCard` `gridzySkinCardLight`(AVFALDET siden versjon 2.6.0)

Hudalternativer

Siden versjon 2.6.0 er det alternativer for å konfigurere de innebygde skinnene. Avhengig av den spesifikke huden kan du angi bakgrunnsfarge, tekstfarge og tekstskygge. Du trenger bare å bruke egendefinerte CSS-egenskaper som du kan se 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>

Sjekk ut de støttede variablene og standardverdiene for hver hud her:

gridzySkinClassic

Variabel	Standardverdi	Informasjon
`--background`	`rgba(0, 0, 0, .7)`	tillater hvilken som helst CSS-bakgrunnsverdi
`--color`	`rgb(255, 255, 255)`	tillater hvilken som helst CSS-fargeverdi
`--text-shadow`	`none`	tillater hvilken som helst CSS-tekstskyggeverdi

gridzySkinFullOverlay

Variabel	Standardverdi	Informasjon
`--background`	`rgba(0, 0, 0, .7)`	tillater hvilken som helst CSS-bakgrunnsverdi
`--color`	`rgb(255, 255, 255)`	tillater hvilken som helst CSS-fargeverdi
`--text-shadow`	`none`	tillater hvilken som helst CSS-tekstskyggeverdi

gridzySkinLift

Variabel	Standardverdi	Informasjon
`--background`	`rgba(0, 0, 0, .7)`	tillater hvilken som helst CSS-bakgrunnsverdi
`--color`	`rgb(255, 255, 255)`	tillater hvilken som helst CSS-fargeverdi
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	tillater hvilken som helst CSS-tekstskyggeverdi

gridzySkinMagnifier

Variabel	Standardverdi	Informasjon
`--background`	`rgba(0, 0, 0, .7)`	tillater hvilken som helst CSS-bakgrunnsverdi
`--color`	`rgb(255, 255, 255)`	tillater hvilken som helst CSS-fargeverdi

Dette skallet støtter ikke --text-shadow

gridzySkinBlur

Variabel	Standardverdi	Informasjon
`--background`	`rgba(0, 0, 0, .7)`	tillater hvilken som helst CSS-bakgrunnsverdi
`--color`	`rgb(255, 255, 255)`	tillater hvilken som helst CSS-fargeverdi
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	tillater hvilken som helst CSS-tekstskyggeverdi

gridzySkinCard

Variabel	Standardverdi	Informasjon
`--background`	`rgba(0, 0, 0, 1)`	tillater hvilken som helst CSS-bakgrunnsverdi
`--color`	`rgb(255, 255, 255)`	tillater hvilken som helst CSS-fargeverdi
`--text-shadow`	`none`	tillater hvilken som helst CSS-tekstskyggeverdi

Alle forhåndsdefinerte skinn støtter bare enkle teksttekster. Du kan lage dine helt egne og mer komplekse skall. Ta en titt på Style Gridzy .

Stil Gridzy

Hvis ingen forhåndsdefinert hud passer til dine behov, kan du style din egen.

Den enkleste måten er først å kopiere en eksisterende hud og tilpasse den til dine egne behov. Den forhåndsdefinerte skin gridzySkinBlank vil vanligvis gi et godt grunnlag i tillegg til en god dokumentasjon i CSS-filen:

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

I CSS-filen finner du klassene gridzySkinBlank , gridzyImage og gridzyCaption . Gridzy selv trenger ikke disse timene. De brukes kun til styling, så du kan fjerne eller gi dem nytt navn hvis du vil.

I tillegg finner du CSS-klassen gridzyItem . Gridzy setter denne klassen automatisk til alle direkte barn av hovedbeholderelementet. Så du kan bruke denne klassen til å style elementene i galleriet ditt.

Husk viktige ting

Elementinnholdet skal være fullstendig responsivt. Tenk på at elementstørrelsen definitivt vil endre seg. Bruk prosentverdier i stedet for pikselverdier. Og ta en titt på Gridzy-layoutalternativet autoFontSize , som binder skriftstørrelsen til vareboksstørrelsen.
Hvert element bør ha et veldefinert sideforhold. Elementets sideforhold vil aldri endres og er nødvendig for å beregne rutenettet. Så hvis et element ikke automatisk har et veldefinert sideforhold, forhåndsdefiner det manuelt (f.eks. via css).

I noen tilfeller kan det være lettere å style innholdet i elementene før Gridzy initialiseres. Bare fjern klassen gridzy eller Gridzy javascript-filen midlertidig for dette.

Det er det! Det er alt du trenger for å bygge din egen hud. De fleste av de forhåndsdefinerte skinnene bruker ikke mer enn dette.

Men det kan være flere hvis du vil...

Avanserte skinn

Gridzy bruker flere CSS-klasser enn bare gridzyItem . De fleste av dem stilles inn automatisk, og du kan også bruke dem til styling.

Hovedbeholderklasser

Klassenavn	Beskrivelse
`gridzy` for å stille inn manuelt	Gridzy finner automatisk elementer med denne klassen og initialiserer dem.
`gridzyAnimated`	Stilles inn automatisk hvis alternativet `animate` er `true` . Hvis denne klassen er satt manuelt, vil alternativet `animate` automatisk bli `true` også (bortsett fra hvis det er eksplisitt satt til `false` ).

Vareklasser

Klassenavn	Beskrivelse
`gridzyItem`	Vil settes så snart elementet starter initialiseringsprosessen. Vil aldri bli fjernet.
`gridzyItemInitializing`	Vil settes så snart elementet starter initialiseringsprosessen. Vil bli erstattet av `gridzyItemReady` så snart varen er fullstendig initialisert. Betyr ikke at bildene er fulllastet (se `gridzyItemLoading` ), men elementet er klart til å bli synlig.
`gridzyItemReady`	Vil erstatte `gridzyItemInitializing` så snart elementet er fullstendig initialisert. Vil aldri bli fjernet. Betyr ikke at bildene er fulllastet (se `gridzyItemComplete` ), men elementet er klart til å bli synlig.
`gridzyItemLoading`	Vil settes så snart elementet starter initialiseringsprosessen. Vil bli erstattet av `gridzyItemComplete` så snart de inneholdte bildene (vanligvis bare ett) er fullastet.
`gridzyItemComplete`	Vil erstatte `gridzyItemLoading` så snart de inneholdte bildene (vanligvis bare ett) er fulllastet. Vil aldri bli fjernet.
`gridzyItemInitialToVisible`	Stilles inn så snart elementet begynner å vises første gang. Vil bli fjernet så snart varen er helt synlig.
`gridzyItemVisible`	Vil settes så snart varen er fullt synlig. Vil bli fjernet så snart varen begynner å forsvinne.
`gridzyItemVisibleToHidden`	Vil settes så snart varen begynner å forsvinne. Vil bli fjernet så snart varen er fullstendig skjult.
`gridzyItemHidden`	Vil settes så snart varen er fullstendig skjult. Vil bli fjernet så snart varen begynner å vises.
`gridzyItemHiddenToVisible`	Vil settes så snart elementet begynner å vises (bortsett fra første gang – se klasse `gridzyItemInitialToVisible` ). Vil bli fjernet så snart varen er helt synlig.
`gridzyItemVisibleToVisible`	Vil settes så snart noe i rutenettet endret seg, men selve varen var og forblir synlig. Vil bli fjernet så snart endringsanimasjonen er ferdig.

Som standard er prosessindikatoren og animasjonene for bilder som vises og forsvinner, forhåndsdefinert av Gridzy-hoved-CSS-filen.

Med disse ovennevnte CSS-klassene kan du style din egen prosessindikator og animasjoner. Våg en titt inn i Gridzys hoved-CSS-fil for å forstå hva du må overstyre. Ingen frykt, alt er godt dokumentert der.

Optimaliser lasting

Hvis du bruker mange bilder, kan det være en god idé å hjelpe Gridzy med å bygge rutenettet raskere.

Forhindre hoppende bilder

Gridzy trenger absolutt sideforholdet til alle bilder for å beregne rutenettet. Disse fakta resulterer i hoppende elementer hvis noen bilder er klare og andre ikke. Jo flere bilder det er, jo mer irriterende kan denne effekten være.

For å forhindre denne oppførselen, sett bare width og height for alle img elementer. Det er viktig å sette riktige verdier for hvert enkelt bilde, ellers ville bildene bli forvrengt. De riktige verdiene er den originale bredden og høyden på det respektive bildet:

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

Deretter kan Gridzy beregne rutenettet umiddelbart uten å måtte vite de faktiske størrelsene på bildene.

Lat lasting

For å laste bare bilder som er i den synlige visningsporten, følg disse trinnene:

Sett inn width og height som beskrevet ovenfor (sørg for å bruke de riktige verdiene)
Erstatt alle src attributter med data-gridzylazysrc som vist nedenfor (hvis du også har srcset attributter, erstatt dem med 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>

Etter disse trinnene vil bildene lastes så snart de er i nærheten av eller inne i visningsporten.

Prosessindikator

Prosessindikatoren er det lille animerte ikonet som vises mens bildet lastes inn. Hvis du bruker bildetekster og skall vil prosessindikatoren vises automatisk. Ellers trenger du noen justeringer:

Sett hvert img -element inn i et div -element
(eller inn i et hvilket som helst annet element – se semantisk HTML for mer)
Legg til klassen gridzyImage til hvert 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>

Etter det bør du se prosessindikatorene hvis bildene tar tid å laste.

Filtre

Filtre i Gridzy er ganske enkle, men kraftige. Uansett hva slags filter du trenger, er det svært sannsynlig at det er realiserbart. Alt du trenger er litt CSS og noen få HTML-skjemaelementer ...

Her er et funksjonelt eksempel:

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

La oss bygge det trinn for trinn

1. Først trenger vi den vanlige HTML-strukturen til Gridzy og angi klassenavn for alle gallerielementer slik at vi kan filtrere dem etterpå

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

I dette eksemplet bruker vi bare én klasse for hvert element. Men du kan også angi flere klasser for et enkelt element, hvis det elementet skal være tilgjengelig via flere filtre.

2. Så legger vi til noen knapper som vi kan endre filtrene gjennom da

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

I stedet for knappene kan du også bruke andre skjemaelementer som avmerkingsbokser, alternativknapper, velgfelt og så videre.

Som du kan se, er verdiene til knappene vanlige CSS-velgere. Så snart vi er ferdige, vil et klikk på en slik knapp vise bildene som samsvarer med den CSS-velgeren. Teknisk sett setter den ganske enkelt filter til denne verdien.

Du kan også bruke mye mer komplekse velgere. For eksempel vil :not(.animals) fungere også, så vel som .animals.people og .animals, .people .

3. Til slutt kapsler vi inn knappene i en div -beholder og binder dem til Gridzy-galleriet, ved å sette alternativet filterControls :

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Som du kan se, bruker vi også en CSS-velger for filterControls -alternativet. div beholderen med id -attributtet tjener bare til å gjøre knappene lettere å velge via den CSS-velgeren.

Det er det!

Hvis du foretrekker en JavaScript-løsning, sjekk ut API .

API

Selv om Gridzy har sitt eget API, kan det meste gjøres uten det, ganske enkelt ved å manipulere DOM. Gridzy vil legge merke til det og justere rutenettet. Men det er også et veldig kraftig API ...

Manipulere DOM

For alle DOM-manipulasjoner (Document Object Model) trenger vi først containerelementet:

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

Legg til bilder

Det er viktig å fullstendig bygge og fylle det nye underordnede elementet før du legger det til beholderelementet. Ellers kan ikke Gridzy oppdage de riktige dimensjonene.

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

Fjern bilder

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

Endre alternativer

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

Mer om manipulering av DOM finner du på MDN web docs . Det er også en introduksjon til DOM tilgjengelig.

Proprietær API

For å bruke API-en trenger vi først Gridzy-forekomsten, som bindes til Gridzy-beholderelementet:

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

Få alternativ

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

Få alle alternativer

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

Angi alternativer

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

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

Bruk filter

Å bruke et filter er bare å angi filter som kan være en hvilken som helst gyldig CSS-velger:

// 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 til tilbakeringingsfunksjoner

AVVIST siden versjon 2.4.0
Bruk de moderne og mer fleksible Events i stedet. Se neste avsnitt for detaljer.

~~Gridzy.js 2 støtter noen alternativer for tilbakeringingsfunksjoner. De kan bare stilles inn via det proprietære API, men akkurat som andre alternativer:~~

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

	~~Beskrivelse~~
~~`onBeforeOptionsChanged`~~	~~Tilbakeringingsfunksjon som påkalles rett før innstilling av alternativer.~~
~~`onOptionsChanged`~~	~~Tilbakeringingsfunksjon som aktiveres direkte etter innstilling av alternativer.~~
~~`onBeforeRender`~~	~~Tilbakeringingsfunksjon som påkalles rett før gjengivelse.~~
~~`onRender`~~	~~Tilbakeringingsfunksjon som påkalles direkte etter gjengivelse.~~

Bruk hendelser

siden versjon 2.4.0

Du kan bruke Gridzy-hendelser akkurat som vanlige JavaScript-hendelser:

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

Noen hendelser utløses på Gridzy-beholderelementet og andre hendelser utløses på de individuelle elementelementene i beholderelementet.

Hendelser utløst på Gridzy-beholderelementet:

	Beskrivelse
`gridzyBeforeInit`	Avfyres før galleriinitiering.
`gridzyInit`	Avfyres etter galleriinitiering.
`gridzyBeforeOptionsChanged`	Avfyres før du angir alternativer.
`gridzyOptionsChanged`	Avfyres etter innstillingsalternativer.
`gridzyBeforeRender`	Avfyres før gjengivelse.
`gridzyRender`	Brann etter gjengivelse.

Hvis du går glipp av noen arrangementer her, vennligst send en støtteforespørsel .

event.target gir Gridzy-beholderelementet.
event.detail.instance gir Gridzy-forekomsten.

Hendelser utløst på elementelementer:

	Beskrivelse
`gridzyItemBeforeInit`	Avfyres før elementinitialisering.
`gridzyItemInit`	Avfyres etter elementinitialisering.
`gridzyItemLoading`	Utløses når varen begynner å laste.
`gridzyItemReady`	Avfyres når varen er klar for rutenettberegning. Så sideforholdet er kjent, men bildet kan fortsatt lastes inn.
`gridzyItemComplete`	Utløses når elementbildet er fullastet.

Hvis du går glipp av noen arrangementer her, vennligst send en støtteforespørsel .

event.target gir det respektive elementet.
event.detail.instance gir Gridzy-forekomsten.

API – Global

Det er noen funksjoner som er uavhengige av Gridzy-forekomster. Så vi trenger ikke å få en instans før.

Få standardalternativ

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

Få alle standardalternativer

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

Angi standardalternativer

Dette angir ikke alternativene for alle allerede initialiserte Gridzy-forekomster, men definerer grunnlaget for nye forekomster. Imidlertid, hvis et alternativ for en eksisterende forekomst vil bli tilbakestilt via verdien null , vil den bruke den nye standardverdien.

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

Du kan bruke dette til å angi alternativer globalt, hvis du ringer det før DOM er klart. Så du trenger ikke å angi alternativer som attributter lenger.

Automatisme

Så lenge alle automatismene til Gridzy.js 2 er aktive, er det ikke behov for metodene nedenfor. Men automatikken kan slås av for å bruke Gridzy på en mer tradisjonell måte:

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

Noen av disse alternativene kan ikke angis via data-gridzy- attributter eller via setOptions() , på grunn av logiske årsaker:

	Standardverdi	Beskrivelse
`autoInitOnDomReady`	`true`	Oppdager elementer med klasse `gridzy` ved sidelasting og initialiserer dem. Kan stilles inn via `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Oppdager nye elementer med klasse `gridzy` så snart de vises i DOM og initialiserer dem. (f.eks. ved bruk av sideoverganger) Kan stilles inn via `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Oppdager om underordnede elementer (bilder) legges til eller fjernes, og oppdaterer rutenettet automatisk. Kan stilles inn via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definerer om `data-gridzy-` attributtene generelt brukes eller ikke. Hvis dette er `false` kan alternativene kun angis via den proprietære API-en. Kan stilles inn via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Oppdager endringer av `data-gridzy-` attributter, og oppdaterer rutenettet automatisk. Oppdager også om `gridzyAnimated` -klassen legges til eller fjernes og om `style` forekommer. Hvis `useOptionAttributes` er `false` , oppdager den bare endringer i `style` . Kan stilles inn via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Oppdager endringer i `class` for alle underordnede elementer (bilder). Relevant angående filtre. Kan stilles inn via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver siden versjon 2.5.0	`true`	Oppdager endringer av `src` attributter for alle bilder. Relevant når det brukes med React eller lignende biblioteker. Kan stilles inn via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver siden versjon 2.6.0	`true`	Registrerer endringer i elementbredden. Relevant angående responsivt design. (Før versjon 2.6.0 ble det brukt en hendelseslytter for endring av vinduet) Kan stilles inn via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Initialiser manuelt

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

Ødelegg forekomsten

Grovt sagt, det motsatte av initialisering av Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Synkroniser underordnede liste manuelt

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

Synkroniser et enkelt underordnet element manuelt

Vanligvis ikke nødvendig, bortsett fra i svært sjeldne tilfeller.

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

Synkroniser attributter manuelt

Merk at alternativet useOptionAttributes må være true for dette.

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

Kraftgjengivelse

Vanligvis ikke nødvendig, selv om alle automatikk er slått av

gridzyInstance.render();

WordPress-plugin

JavaScript-bibliotek

Service