Version 2.x – Gridzy.Gallery

Webbplatsen har översatts automatiskt. Om något inte är klart, vänligen ta en titt på den engelska dokumentationen.

Grundläggande användning

Ladda upp Gridzy-filerna till din server och lägg till dem på din webbplats (vanligtvis i rubriken):

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

Lägg till HTML-koden (var som helst i huvuddelen):

<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 är det! Det är ett fullt fungerande exempel. Ingen extra initiering krävs.

Konfiguration

Det enklaste sättet att konfigurera Gridzy är att bara använda HTML-attribut. Du behöver bara prefixa alternativnamnen med data-gridzy- . Så för att ställa in spaceBetween alternativet, lägg bara till attributet 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>

Huvudalternativ

	Standardvärde	Beskrivning
`animate`	`true`	Bestämmer om animationer ska användas när rutnätet ändras (till exempel när du ändrar storlek på webbläsarfönstret eller när du ställer in ett filter).
`layout`	`justified`	Definierar den använda layouten. Gridzy.js 2 stöder de två olika layouterna `justified` och `waterfall` . Var och en av dem har sina egna ytterligare alternativparametrar, som du kan hitta under den här tabellen.
`filter`	`*`	Bestämmer vilka bilder som ska visas. Valfri CSS-väljare kan användas som värde här. Ställs vanligtvis in automatiskt via `filterControls` (se nästa alternativ). Kolla in filter
`filterControls`		Bestämmer vilka formulärelement som kan användas för att filtrera bilderna. Alla CSS-väljare som väljer HTML-formulärelement kan användas som värde här. Kolla in filter
`autoConsiderScrollBars`	`true`	För att förutsäga den tillgängliga bredden om rullningslister visas eller försvinner. Det rekommenderas alltid att låta det vara `true` om inte denna automatism orsakar problem.

Justified Layoutalternativ

	Standardvärde	Beskrivning
`autoFontSize`	`false`	Uppdaterar automatiskt font-size-egenskapen för varje box baserat på originalboxens storlek. Som standard är font-size-egenskapen inte inställd explicit.
`desiredHeight`	`190`	Definierar önskad höjd på elementrader. Den faktiska höjden kommer att beräknas beroende på tillgänglig bredd och elementen i raden.
`hideOnMissingImage`	`true`	Döljer rutor som innehåller bilder som inte kunde laddas.
`spaceBetween`	`4`	Definierar avståndet mellan element i pixlar.
`lastRowAlign` sedan version 2.3.0	`justified`	Definierar beteendet för den sista raden. Tillåtna värden är `left` , `center` , `right` och `justified` .
`singleRowAlign` sedan version 2.3.0	`justified`	Definierar beteendet om det bara finns en enda rad. Tillåtna värden är `left` , `center` , `right` och `justified` .
~~`fillLastRow`~~ ~~sedan version 2.1.0~~	~~`true`~~	BORTTAGAD sedan version 2.4.0 (FÖRSAT sedan version 2.3.0 ) Ordnar bilderna så att den sista raden alltid är helt fylld. Om du planerar att lägga till bilder dynamiskt kan det vara en bra idé att avaktivera detta. Får ingen effekt på enstaka rader (se `fillSingleRow` ).
`fillSingleRow` sedan version 2.1.0	~~`true`~~	BORTTAGAD sedan version 2.4.0 (FÖRSAT sedan version 2.3.0 ) ~~Om det bara finns en rad ordnar den bilderna så att raden alltid är helt fylld. Om det kan hända att du bara har en eller två bilder i galleriet kan det vara en bra idé att avaktivera detta.~~

Waterfall Layoutalternativ

	Standardvärde	Beskrivning
`autoFontSize`	`false`	Uppdaterar automatiskt font-size-egenskapen för varje box baserat på originalboxens storlek. Som standard är font-size-egenskapen inte inställd explicit.
`desiredWidth`	`250`	Definierar önskad bredd på kolumner. Den faktiska bredden kommer att beräknas beroende på den tillgängliga bredden och antalet kolumner.
`hideOnMissingImage`	`true`	Döljer rutor som innehåller bilder som inte kunde laddas.
`horizontalOrder`	`false`	Definierar att elementen placeras strikt ett element i varje kolumn från vänster till höger, och börjar sedan igen i kolumnen längst till vänster oberoende av vilken kolumn som är mer plats. Som standard kommer elementen alltid att placeras i kolumnen med den minsta höjden.
`spaceBetween`	`4`	Definierar avståndet mellan element i pixlar.
`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`.

Fler avancerade alternativ

För mer avancerade alternativ, kolla in API:et .

Semantisk HTML

Den enklaste HTML-strukturen i Gridzy är denna:

<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 är dock väldigt flexibel och du kan använda nästan vilken annan HTML-struktur som helst. Det finns bara några punkter att tänka på:

Varje underordnad behållarelement representerar ett objekt i rutnätet.
Både containerelementet och dess underordnade kan vara vilken taggtyp som helst, som ul och li (överväg bara att återställa webbläsarens standardinställningar).
Om ett img -element inte är ett direkt underordnat själv, behöver det klassen gridzyImage .

Så detta är också en fungerande 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>

Speciellt om du vill lägga till bildtexter behöver du en avancerad HTML-struktur. För att lära dig mer om det, ta en titt på Captions & Skins .

Bildtexter och skinn

Om du vill lägga till bildtexter till ditt galleri måste du definiera utseendet. Därför finns några fördefinierade skal tillgängliga. Varje skal består av en CSS-fil. Du måste lägga till den här filen förutom de viktigaste Gridzy-filerna (vanligtvis i huvudsektionen):

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

Dessutom behöver du en avancerad 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>

Om du undrar över HTML-strukturen, ta en titt på Semantisk HTML .

För bildtexten kan du använda vilken typ av tagg som helst, se bara till att den har klassen gridzyCaption . img elementet behöver klassen gridzyImage .

Exemplet ovan visar huden gridzySkinClassic . För att använda en annan, byt bara ut skalnamnet med ett av dessa:

Inkluderade skinn

	Tillgängliga klasser
gridzySkinBlank en bra utgångspunkt för att skapa ett eget skinn live förhandsvisning	`gridzySkinBlank`
gridzySkinClassic live förhandsvisning	`gridzySkinClassic` `gridzySkinClassicLight`(FÖRSAT sedan version 2.6.0)
gridzySkinFullOverlay live förhandsvisning	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(FÖRSAT sedan version 2.6.0)
gridzySkinLift live förhandsvisning	`gridzySkinLift` `gridzySkinLiftLight`(FÖRSAT sedan version 2.6.0)
gridzySkinMagnifier zoomfunktion ingår ej live förhandsvisning	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(FÖRSAT sedan version 2.6.0)

Alla ovanstående skal behöver bara en CSS-fil, men det finns ytterligare skal som också kräver en JavaScript-fil:

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

	Tillgängliga klasser
gridzySkinBlur fungerar inte i IE live förhandsvisning	`gridzySkinBlur` `gridzySkinBlurLight`(FÖRSAT sedan version 2.6.0)
gridzySkinCard live förhandsvisning	`gridzySkinCard` `gridzySkinCardLight`(FÖRSAT sedan version 2.6.0)

Hudalternativ

Sedan version 2.6.0 finns det alternativ för att konfigurera de inbyggda skalen. Beroende på det specifika skalet kan du ställa in bakgrundsfärg, textfärg och textskugga. Du behöver bara använda anpassade CSS-egenskaper som du kan se här:

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

Kolla in de variabler och standardvärden som stöds för varje skal här:

gridzySkinClassic

Variabel	Standardvärde	Information
`--background`	`rgba(0, 0, 0, .7)`	tillåter alla CSS-bakgrundsvärden
`--color`	`rgb(255, 255, 255)`	tillåter alla CSS-färgvärden
`--text-shadow`	`none`	tillåter alla CSS-text-skuggvärden

gridzySkinFullOverlay

Variabel	Standardvärde	Information
`--background`	`rgba(0, 0, 0, .7)`	tillåter alla CSS-bakgrundsvärden
`--color`	`rgb(255, 255, 255)`	tillåter alla CSS-färgvärden
`--text-shadow`	`none`	tillåter alla CSS-text-skuggvärden

gridzySkinLift

Variabel	Standardvärde	Information
`--background`	`rgba(0, 0, 0, .7)`	tillåter alla CSS-bakgrundsvärden
`--color`	`rgb(255, 255, 255)`	tillåter alla CSS-färgvärden
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	tillåter alla CSS-text-skuggvärden

gridzySkinMagnifier

Variabel	Standardvärde	Information
`--background`	`rgba(0, 0, 0, .7)`	tillåter alla CSS-bakgrundsvärden
`--color`	`rgb(255, 255, 255)`	tillåter alla CSS-färgvärden

Det här skalet stöder inte --text-shadow

gridzySkinBlur

Variabel	Standardvärde	Information
`--background`	`rgba(0, 0, 0, .7)`	tillåter alla CSS-bakgrundsvärden
`--color`	`rgb(255, 255, 255)`	tillåter alla CSS-färgvärden
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	tillåter alla CSS-text-skuggvärden

gridzySkinCard

Variabel	Standardvärde	Information
`--background`	`rgba(0, 0, 0, 1)`	tillåter alla CSS-bakgrundsvärden
`--color`	`rgb(255, 255, 255)`	tillåter alla CSS-färgvärden
`--text-shadow`	`none`	tillåter alla CSS-text-skuggvärden

Alla fördefinierade skal stöder endast enkla texttexter. Du kan skapa dina alldeles egna och mer komplexa skal. Ta en titt på Style Gridzy .

Stil Gridzy

Om inget fördefinierat skal passar dina behov kan du styla ditt eget.

Det enklaste sättet är att först kopiera ett befintligt skal och anpassa det efter dina egna behov. Den fördefinierade skin gridzySkinBlank skulle vanligtvis ge en bra grund såväl som en bra dokumentation 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 hittar du klasserna gridzySkinBlank , gridzyImage och gridzyCaption . Gridzy själv behöver inte dessa klasser. De används bara för styling och så du kan ta bort eller byta namn på dem om du vill.

Dessutom hittar du CSS-klassen gridzyItem . Gridzy ställer in den här klassen automatiskt till alla direkta underordnade av huvudbehållarelementet. Så du kan använda den här klassen för att styla föremålen i ditt galleri.

Tänk på viktiga saker

Objektets innehåll bör vara fullt responsivt. Tänk på att elementstorleken definitivt kommer att ändras. Använd procentvärden istället för pixelvärden. Och ta en titt på Gridzy-layoutalternativet autoFontSize , som binder teckensnittsstorleken till objektlådans storlek.
Varje objekt bör ha ett väldefinierat bildförhållande. Objektets bildförhållande kommer aldrig att ändras och behövs för att beräkna rutnätet. Så om ett objekt inte automatiskt har ett väldefinierat bildförhållande, fördefiniera det manuellt (t.ex. via css).

I vissa fall kan det vara lättare att styla innehållet i objekten innan Gridzy initieras. Ta helt enkelt bort klassen gridzy eller Gridzys javascript-fil tillfälligt för detta.

Det är det! Det är allt du behöver för att bygga din egen hud. De flesta av de fördefinierade skinnen använder inte mer än detta.

Men det kan finnas fler om du vill...

Avancerade skinn

Gridzy använder fler CSS-klasser än bara gridzyItem . De flesta av dem kommer att ställas in automatiskt och du kan använda dem för styling också.

Huvudbehållarklasser

Klassens namn	Beskrivning
`gridzy` för att ställa in manuellt	Gridzy hittar automatiskt element med den här klassen och initierar dem.
`gridzyAnimated`	Ställs in automatiskt om alternativet `animate` är `true` . Om den här klassen ställs in manuellt kommer alternativet `animate` automatiskt att bli `true` också (förutom om det uttryckligen är inställt på `false` ).

Objektklasser

Klassens namn	Beskrivning
`gridzyItem`	Kommer att ställas in så snart objektet startar initieringsprocessen. Kommer aldrig att tas bort.
`gridzyItemInitializing`	Kommer att ställas in så snart objektet startar initieringsprocessen. Kommer att ersättas av `gridzyItemReady` så snart objektet är helt initialiserat. Betyder inte att bilder är helt laddade (se `gridzyItemLoading` ), men objektet är redo att bli synligt.
`gridzyItemReady`	Kommer att ersätta `gridzyItemInitializing` så snart objektet är helt initialiserat. Kommer aldrig att tas bort. Betyder inte att bilder är helt laddade (se `gridzyItemComplete` ), men objektet är redo att bli synligt.
`gridzyItemLoading`	Kommer att ställas in så snart objektet startar initieringsprocessen. Kommer att ersättas av `gridzyItemComplete` så snart de inneslutna bilderna (vanligtvis bara en) är helt laddade.
`gridzyItemComplete`	Kommer att ersätta `gridzyItemLoading` så snart de inneslutna bilderna (vanligtvis bara en) är helt laddade. Kommer aldrig att tas bort.
`gridzyItemInitialToVisible`	Kommer att ställas in så snart objektet börjar dyka upp första gången. Kommer att tas bort så snart varan är helt synlig.
`gridzyItemVisible`	Kommer att ställas in så snart objektet är fullt synligt. Kommer att tas bort så snart varan börjar försvinna.
`gridzyItemVisibleToHidden`	Kommer att ställas in så snart objektet börjar försvinna. Kommer att tas bort så snart föremålet är helt dolt.
`gridzyItemHidden`	Kommer att ställas in så snart objektet är helt dolt. Kommer att tas bort så snart varan börjar dyka upp.
`gridzyItemHiddenToVisible`	Kommer att ställas in så snart objektet börjar dyka upp (förutom när det visas första gången – se klass `gridzyItemInitialToVisible` ). Kommer att tas bort så snart varan är helt synlig.
`gridzyItemVisibleToVisible`	Kommer att ställas in så snart något i rutnätet ändrats, men själva objektet var och förblir synligt. Kommer att tas bort så snart ändringsanimeringen är klar.

Som standard är processindikatorn och animationerna för bilder som visas och försvinner fördefinierade av Gridzys huvud-CSS-fil.

Med dessa ovan nämnda CSS-klasser kan du utforma din egen processindikator och animationer. Våga titta in i Gridzys huvud-CSS-fil för att förstå vad du skulle behöva åsidosätta. Ingen rädsla, allt är väldokumenterat där.

Optimera laddning

Om du använder många bilder kan det vara en bra idé att hjälpa Gridzy att bygga rutnätet snabbare.

Förhindra hoppande bilder

Gridzy behöver absolut bildförhållandet för alla bilder för att beräkna rutnätet. Detta faktum resulterar i hoppande element om vissa bilder är klara och andra inte är det. Ju fler bilder det finns, desto mer irriterande kan denna effekt vara.

För att förhindra detta beteende, ställ bara in width och height för alla img -element. Det är viktigt att ställa in rätt värden för varje enskild bild, annars skulle bilderna bli förvrängda. De korrekta värdena är den ursprungliga bredden och höjden på respektive bild:

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

Därefter kan Gridzy beräkna rutnätet omedelbart utan att behöva veta de faktiska storlekarna på bilderna.

Lat laddning

För att bara ladda bilder som finns i den synliga visningsporten, följ bara dessa steg:

Infoga width och height enligt beskrivningen ovan (se till att använda rätt värden)
Ersätt alla src attribut med data-gridzylazysrc som visas nedan (om du också har srcset attribut, ersätt 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>

Efter dessa steg kommer bilderna att laddas så snart de är nära eller inne i visningsporten.

Processindikator

Processindikatorn är den lilla animerade ikonen som visas medan bilden laddas. Om du använder bildtexter och skal visas processindikatorn automatiskt. Annars behöver du några justeringar:

Lägg varje img -element i ett div element
(eller i något annat element – se semantisk HTML för mer)
Lägg till klassen gridzyImage till varje 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>

Efter det bör du se processindikatorerna om bilderna tar tid att ladda.

Filter

Filter i Gridzy är ganska enkla men kraftfulla. Oavsett vilken typ av filter du behöver är det mycket troligt att det går att genomföra. Allt du behöver är lite CSS och några HTML-formulärelement ...

Här är ett funktionellt exempel:

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

Låt oss bygga det steg för steg

1. Först behöver vi den vanliga HTML-strukturen för Gridzy och ange klassnamn för alla galleriobjekt så att vi kan filtrera dem efteråt

<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 det här exemplet använder vi bara en klass för varje element. Men du kan också ställa in flera klasser för ett enda element, om det elementet skulle kunna hittas via flera filter.

2. Sedan lägger vi till några knappar genom vilka vi kan byta filter sedan

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

Istället för knapparna kan du också använda andra formulärelement som kryssrutor, alternativknappar, välj fält och så vidare.

Som du kan se är knapparnas värden vanliga CSS-väljare. Så fort vi är klara kommer ett klick på en sådan knapp att visa bilderna som matchar den CSS-väljaren. Tekniskt sett ställer den helt enkelt filter till detta värde.

Du kan också använda mycket mer komplexa väljare. Till exempel :not(.animals) skulle också fungera, liksom .animals.people och .animals, .people .

3. Till sist kapslar vi in knapparna i en div -behållare och binder dem till Gridzy-galleriet, genom att ställa in 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 använder vi också en CSS-väljare för alternativet filterControls . div behållaren med id attributet tjänar bara till att göra knapparna lättare att välja via den CSS-väljaren.

Det är det!

Om du föredrar en JavaScript-lösning, kolla in API:et .

API

Även om Gridzy har sitt eget API kan det mesta göras utan det, helt enkelt genom att manipulera DOM. Gridzy kommer att märka det och justera rutnätet. Men det finns också ett mycket kraftfullt API ...

Manipulera DOM

För alla manipulationer av Document Object Model (DOM) behöver vi först containerelementet:

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

Lägg till bilder

Det är viktigt att helt bygga och fylla det nya underordnade elementet innan du lägger till det i behållarelementet. Annars kan inte Gridzy upptäcka de korrekta måtten.

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

Ta bort bilder

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

Ändra alternativ

// 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 att manipulera DOM hittar du på MDN web docs . Det finns också en introduktion till DOM tillgänglig.

Proprietärt API

För att använda API:t behöver vi först Gridzy-instansen, som binds till Gridzy-behållarelementet:

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

Skaffa alternativ

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

Få alla alternativ

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

Ställ in alternativ

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

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

Använd filter

Att använda ett filter är bara att ställa in filter som kan vara vilken giltig CSS-väljare som helst:

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

Lägg till återuppringningsfunktioner

UTGÅNGT sedan version 2.4.0
Använd de moderna och mer flexibla Events istället. Se nästa avsnitt för detaljer.

~~Gridzy.js 2 stöder vissa alternativ för återuppringningsfunktioner. De kan endast ställas in via det proprietära API:t, men precis som andra alternativ:~~

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

	~~Beskrivning~~
~~`onBeforeOptionsChanged`~~	~~Återuppringningsfunktion som anropas direkt innan alternativ ställs in.~~
~~`onOptionsChanged`~~	~~Återuppringningsfunktion som anropas direkt efter inställning av alternativ.~~
~~`onBeforeRender`~~	~~Återuppringningsfunktion som anropas direkt före rendering.~~
~~`onRender`~~	~~Återuppringningsfunktion som anropas direkt efter rendering.~~

Använd Events

sedan version 2.4.0

Du kan använda Gridzy-händelser precis som vanliga JavaScript-händelser:

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

Vissa händelser aktiveras på Gridzy-behållarelementet och andra händelser aktiveras på de enskilda objektelementen i behållarelementet.

Händelser som utlöstes på Gridzy-containerelementet:

	Beskrivning
`gridzyBeforeInit`	Avfyras innan galleriinitiering.
`gridzyInit`	Avfyras efter galleriinitiering.
`gridzyBeforeOptionsChanged`	Avfyras innan alternativ ställs in.
`gridzyOptionsChanged`	Avfyras efter inställningsalternativ.
`gridzyBeforeRender`	Avfyras före rendering.
`gridzyRender`	Bränder efter rendering.

Om du missar några evenemang här, skicka en supportförfrågan .

event.target tillhandahåller Gridzy-behållarelementet.
event.detail.instance tillhandahåller Gridzy-instansen.

Händelser som aktiverats på objektelement:

	Beskrivning
`gridzyItemBeforeInit`	Avfyras före objektinitiering.
`gridzyItemInit`	Avfyras efter objektinitiering.
`gridzyItemLoading`	Avfyras när objektet börjar laddas.
`gridzyItemReady`	Avfyras när objektet är klart för rutnätsberäkning. Så bildförhållandet är känt, men bilden kan fortfarande laddas.
`gridzyItemComplete`	Utlöses när objektbilden är fulladdad.

Om du missar några evenemang här, skicka en supportförfrågan .

event.target tillhandahåller respektive artikelelement.
event.detail.instance tillhandahåller Gridzy-instansen.

API – Global

Det finns vissa funktioner som är oberoende av Gridzy-instanser. Så vi behöver inte skaffa en instans innan.

Få standardalternativ

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

Hämta alla standardalternativ

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

Ställ in standardalternativ

Detta ställer inte in alternativen för alla redan initierade Gridzy-instanser, utan definierar grunden för nya instanser. Men om ett alternativ för en befintlig instans skulle återställas via värdet null , skulle det använda det nya standardvärdet.

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

Du kan använda detta för att ställa in alternativ globalt, om du anropar det innan DOM är klart. Så du skulle inte behöva ställa in alternativ som attribut längre.

Automatismer

Så länge alla automatismer i Gridzy.js 2 är aktiva, finns det inget behov av nedanstående metoder. Men automatikerna kan stängas av för att använda Gridzy på ett mer traditionellt sä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
});

Vissa av dessa alternativ kan inte ställas in via data-gridzy- attribut eller via setOptions() , på grund av logiska skäl:

	Standardvärde	Beskrivning
`autoInitOnDomReady`	`true`	Upptäcker element med class `gridzy` vid sidladdning och initierar dem. Kan ställas in via `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Upptäcker nya element med class `gridzy` så snart de dyker upp i DOM och initierar dem. (t.ex. om att använda sidövergångar) Kan ställas in via `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Upptäcker om underordnade element (bilder) läggs till eller tas bort, och uppdaterar rutnätet automatiskt. Kan ställas in via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definierar om `data-gridzy-` attributen generellt används eller inte. Om detta är `false` kan alternativ endast ställas in via det proprietära API:et. Kan ställas in via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Upptäcker ändringar av `data-gridzy-` attribut och uppdaterar rutnätet automatiskt. Upptäcker också om klassen `gridzyAnimated` läggs till eller tas bort och om `style` inträffar. Om `useOptionAttributes` är `false` , upptäcker det endast ändringar av `style` . Kan ställas in via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Upptäcker ändringar av `class` för alla underordnade element (bilder). Relevant angående filter. Kan ställas in via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver sedan version 2.5.0	`true`	Upptäcker ändringar av `src` -attribut för alla bilder. Relevant vid användning med React eller liknande bibliotek. Kan ställas in via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Ändra storlekObserver sedan version 2.6.0	`true`	Upptäcker förändringar av elementets bredd. Relevant vad gäller responsiv design. (Före version 2.6.0 användes en händelseavlyssnare för fönsterstorlek) Kan ställas in via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Initiera manuellt

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

Förstör instansen

Grovt sagt, motsatsen till att initiera Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Synkronisera barnlistan manuellt

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

Synkronisera ett enstaka underordnat element manuellt

Behövs vanligtvis inte, förutom i mycket sällsynta fall.

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

Synkronisera attribut manuellt

Observera att alternativet useOptionAttributes måste vara true för detta.

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

Force Rendering

Behövs vanligtvis inte, även om alla automater är avstängda

gridzyInstance.render();

WordPress plugin

JavaScript-bibliotek

Service