Versie 2.x – Gridzy.Gallery

De website is automatisch vertaald. Als er iets niet duidelijk is, kijk dan in de Engelse documentatie.

Basisgebruik

Upload de Gridzy-bestanden naar uw server en voeg ze toe aan uw website (meestal in de head-sectie):

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

Voeg de HTML-code toe (ergens in het body-gedeelte):

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Dat is het! Dat is een volledig functioneel voorbeeld. Er is geen extra initialisatie vereist.

Configuratie

De eenvoudigste manier om Gridzy te configureren is om gewoon HTML-attributen te gebruiken. U hoeft alleen de optienamen te laten voorafgaan door data-gridzy- . Om de optie spaceBetween in te stellen, voegt u dus gewoon het attribuut data-gridzy-spaceBetween toe.

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

Belangrijkste opties

	Standaardwaarde	Beschrijving
`animate`	`true`	Bepaalt of animaties moeten worden gebruikt wanneer het raster verandert (bijvoorbeeld bij het wijzigen van de grootte van het browservenster of bij het instellen van een filter).
`layout`	`justified`	Definieert de gebruikte lay-out. Gridzy.js 2 ondersteunt de twee verschillende lay-outs `justified` en `waterfall` . Elk van hen heeft zijn eigen aanvullende optieparameters, die u onder deze tabel kunt vinden.
`filter`	`*`	Bepaalt welke afbeeldingen getoond moeten worden. Elke CSS-selector kan hier als waarde gebruikt worden. Wordt meestal automatisch ingesteld via `filterControls` (zie volgende optie). Bekijk Filters
`filterControls`		Bepaalt welke formulierelementen kunnen worden gebruikt om de afbeeldingen te filteren. Elke CSS-selector die HTML-formulierelementen selecteert, kan hier als waarde worden gebruikt. Bekijk Filters
`autoConsiderScrollBars`	`true`	Om de beschikbare breedte te voorspellen als scrollbalken verschijnen of verdwijnen. Het is altijd aan te raden om het op `true` te laten staan, tenzij dit automatisme problemen veroorzaakt.

Justified Lay-outopties

	Standaardwaarde	Beschrijving
`autoFontSize`	`false`	Werkt automatisch de eigenschap font-size van elk vak bij op basis van de oorspronkelijke boxgrootte. Standaard is de eigenschap font-size niet expliciet ingesteld.
`desiredHeight`	`190`	Definieert de gewenste hoogte van elementrijen. De werkelijke hoogte wordt berekend op basis van de beschikbare breedte en de elementen in de rij.
`hideOnMissingImage`	`true`	Verbergt vakken met afbeeldingen die niet konden worden geladen.
`spaceBetween`	`4`	Definieert de afstand tussen elementen in pixels.
`lastRowAlign` sinds versie 2.3.0	`justified`	Definieert het gedrag van de laatste rij. Toegestane waarden zijn `left` , `center` , `right` en `justified` .
`singleRowAlign` sinds versie 2.3.0	`justified`	Definieert het gedrag als er maar één enkele rij is. Toegestane waarden zijn `left` , `center` , `right` en `justified` .
~~`fillLastRow`~~ ~~sinds versie 2.1.0~~	~~`true`~~	VERWIJDERD sinds versie 2.4.0 (VEROUDERD sinds versie 2.3.0 ) Rangschikt de afbeeldingen zodat de laatste rij altijd volledig is gevuld. Als u van plan bent om afbeeldingen dynamisch toe te voegen, kan het een goed idee zijn om dit uit te schakelen. Heeft geen effect op enkele rijen (zie `fillSingleRow` ).
`fillSingleRow` sinds versie 2.1.0	~~`true`~~	VERWIJDERD sinds versie 2.4.0 (VEROUDERD sinds versie 2.3.0 ) Als er maar één rij is, worden de afbeeldingen zo gerangschikt dat de rij altijd helemaal gevuld is. Als het kan gebeuren dat u maar één of twee afbeeldingen in de galerij hebt, kan het een goed idee zijn om dit uit te schakelen.

Waterfall Lay-outopties

	Standaardwaarde	Beschrijving
`autoFontSize`	`false`	Werkt automatisch de eigenschap font-size van elk vak bij op basis van de oorspronkelijke boxgrootte. Standaard is de eigenschap font-size niet expliciet ingesteld.
`desiredWidth`	`250`	Definieert de gewenste breedte van kolommen. De werkelijke breedte wordt berekend op basis van de beschikbare breedte en het aantal kolommen.
`hideOnMissingImage`	`true`	Verbergt vakken met afbeeldingen die niet konden worden geladen.
`horizontalOrder`	`false`	Definieert dat de elementen strikt één element in elke kolom van links naar rechts worden geplaatst, en dan opnieuw beginnen in de meest linkse kolom, onafhankelijk van in welke kolom de meeste plaats is. Standaard worden de elementen altijd in de kolom met de kleinste hoogte geplaatst.
`spaceBetween`	`4`	Definieert de afstand tussen elementen in pixels.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Meer geavanceerde opties

Voor meer geavanceerde opties, bekijk de API .

Semantische HTML

De eenvoudigste HTML-structuur van Gridzy is deze:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Gridzy is echter zeer flexibel en u kunt bijna elke andere HTML-structuur gebruiken. Er zijn slechts een paar punten om te overwegen:

Elk onderliggend element van het containerelement vertegenwoordigt één item in het raster.
Zowel het containerelement als de onderliggende elementen kunnen elk tagtype zijn, bijvoorbeeld ul en li (denk er maar eens over na om de standaardinstellingen van de browser te herstellen).
Als een img element zelf geen direct onderliggend element is, heeft het de klasse gridzyImage nodig.

Dit is dus ook een werkende HTML-structuur:

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

Vooral als je ondertitels wilt toevoegen, heb je een geavanceerde HTML-structuur nodig. Om er meer over te weten te komen, bekijk Captions & Skins .

Bijschriften en skins

Als u bijschriften aan uw galerij wilt toevoegen, moet u het uiterlijk definiëren. Daarom zijn er enkele vooraf gedefinieerde skins beschikbaar. Elke skin bestaat uit een CSS-bestand. U moet dit bestand toevoegen naast de belangrijkste Gridzy-bestanden (meestal in de head-sectie):

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

Verder heb je een geavanceerde HTML-structuur nodig:

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

Als u zich afvraagt wat de HTML-structuur is, kijk dan eens naar Semantic HTML .

Voor het bijschrift kunt u elk type tag gebruiken, zorg er alleen voor dat het de klasse gridzyCaption heeft. Het img element heeft de klasse gridzyImage nodig.

Het bovenstaande voorbeeld toont u de skin gridzySkinClassic . Om een andere te gebruiken, vervangt u de skinnaam door een van deze:

Inclusief skins

	Beschikbare klassen
rasterzySkinBlank een goed startpunt voor het creëren van een eigen huid live voorvertoning	`gridzySkinBlank`
gridzySkinClassic live voorvertoning	`gridzySkinClassic` `gridzySkinClassicLight`(VEROUDERD sinds versie 2.6.0)
gridzySkinFullOverlay live voorvertoning	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(VEROUDERD sinds versie 2.6.0)
gridzySkinLift live voorvertoning	`gridzySkinLift` `gridzySkinLiftLight`(VEROUDERD sinds versie 2.6.0)
gridzySkinMagnifier zoomfunctionaliteit niet inbegrepen live voorvertoning	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(VEROUDERD sinds versie 2.6.0)

Voor alle bovenstaande skins is alleen een CSS-bestand nodig, maar er zijn extra skins die ook een JavaScript-bestand nodig hebben:

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

	Beschikbare klassen
gridzySkinBlur werkt niet in IE live voorvertoning	`gridzySkinBlur` `gridzySkinBlurLight`(VEROUDERD sinds versie 2.6.0)
gridzySkinCard live voorvertoning	`gridzySkinCard` `gridzySkinCardLight`(VEROUDERD sinds versie 2.6.0)

Huidopties

Sinds versie 2.6.0 zijn er opties om de ingebouwde skins te configureren. Afhankelijk van de specifieke skin kunt u de achtergrondkleur, tekstkleur en tekstschaduw instellen. U hoeft alleen maar aangepaste CSS-eigenschappen te gebruiken, zoals u hier kunt zien:

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

Bekijk hier de ondersteunde variabelen en standaardwaarden voor elke skin:

gridzySkinClassic

Variabel	Standaardwaarde	Informatie
`--background`	`rgba(0, 0, 0, .7)`	staat elke CSS-achtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	staat elke CSS-kleurwaarde toe
`--text-shadow`	`none`	staat elke CSS-tekstschaduwwaarde toe

gridzySkinFullOverlay

Variabel	Standaardwaarde	Informatie
`--background`	`rgba(0, 0, 0, .7)`	staat elke CSS-achtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	staat elke CSS-kleurwaarde toe
`--text-shadow`	`none`	staat elke CSS-tekstschaduwwaarde toe

gridzySkinLift

Variabel	Standaardwaarde	Informatie
`--background`	`rgba(0, 0, 0, .7)`	staat elke CSS-achtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	staat elke CSS-kleurwaarde toe
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	staat elke CSS-tekstschaduwwaarde toe

gridzySkinMagnifier

Variabel	Standaardwaarde	Informatie
`--background`	`rgba(0, 0, 0, .7)`	staat elke CSS-achtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	staat elke CSS-kleurwaarde toe

Deze skin ondersteunt --text-shadow niet

gridzySkinBlur

Variabel	Standaardwaarde	Informatie
`--background`	`rgba(0, 0, 0, .7)`	staat elke CSS-achtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	staat elke CSS-kleurwaarde toe
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	staat elke CSS-tekstschaduwwaarde toe

gridzySkinCard

Variabel	Standaardwaarde	Informatie
`--background`	`rgba(0, 0, 0, 1)`	staat elke CSS-achtergrondwaarde toe
`--color`	`rgb(255, 255, 255)`	staat elke CSS-kleurwaarde toe
`--text-shadow`	`none`	staat elke CSS-tekstschaduwwaarde toe

Alle vooraf gedefinieerde skins ondersteunen alleen eenvoudige tekstbijschriften. U kunt uw eigen en complexere skins maken. Bekijk Style Gridzy eens.

Stijl Gridzy

Als er geen voorgedefinieerde skin is die aan uw wensen voldoet, kunt u uw eigen skin stylen.

De makkelijkste manier is om eerst een bestaande skin te kopiëren en deze aan te passen aan uw eigen behoeften. De vooraf gedefinieerde skin gridzySkinBlank zou normaal gesproken een goede basis bieden, evenals een goede documentatie in het CSS-bestand:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

In het CSS-bestand vindt u de klassen gridzySkinBlank , gridzyImage en gridzyCaption . Gridzy zelf heeft deze klassen niet nodig. Ze worden alleen gebruikt voor styling en u kunt ze dus verwijderen of hernoemen als u dat wilt.

Daarnaast vindt u de CSS-klasse gridzyItem . Gridzy stelt deze klasse automatisch in op alle directe kinderen van het hoofdcontainerelement. U kunt deze klasse dus gebruiken om de items van uw galerij te stylen.

Let op belangrijke dingen

De inhoud van het item moet volledig responsief zijn. Houd er rekening mee dat de elementgrootte zeker zal veranderen. Gebruik percentagewaarden in plaats van pixelwaarden. En bekijk de Gridzy-indelingsoptie autoFontSize , die de lettergrootte aan de grootte van het itemvak koppelt.
Elk item moet een goed gedefinieerde aspectverhouding hebben. De aspectverhouding van het item zal nooit veranderen en is nodig om het raster te berekenen. Dus als een item niet automatisch een goed gedefinieerde aspectverhouding heeft, definieer het dan handmatig (bijvoorbeeld via css).

In sommige gevallen kan het makkelijker zijn om de inhoud van de items te stylen voordat Gridzy wordt geïnitialiseerd. Verwijder hiervoor tijdelijk de klasse gridzy of het Gridzy javascript-bestand.

Dat is alles! Dat is alles wat je nodig hebt om je eigen skin te bouwen. De meeste vooraf gedefinieerde skins gebruiken niet meer dan dit.

Maar er kan nog meer zijn als je dat wilt …

Geavanceerde skins

Gridzy gebruikt meer CSS-klassen dan alleen gridzyItem . De meeste worden automatisch ingesteld en u kunt ze ook gebruiken voor styling.

Belangrijkste containerklassen

Klasse Naam	Beschrijving
`gridzy` handmatig instellen	Gridzy vindt automatisch elementen met deze klasse en initialiseert deze.
`gridzyAnimated`	Wordt automatisch ingesteld als de optie `animate` `true` is. Als deze klasse handmatig wordt ingesteld, wordt de optie `animate` automatisch ook `true` (behalve als deze expliciet op `false` is ingesteld).

Artikelklassen

Klasse Naam	Beschrijving
`gridzyItem`	Wordt ingesteld zodra het item het initialisatieproces start. Wordt nooit verwijderd.
`gridzyItemInitializing`	Wordt ingesteld zodra het item het initialisatieproces start. Wordt vervangen door `gridzyItemReady` zodra het item volledig is geïnitialiseerd. Betekent niet dat afbeeldingen volledig zijn geladen (zie `gridzyItemLoading` ), maar dat het item klaar is om zichtbaar te worden.
`gridzyItemReady`	Zal `gridzyItemInitializing` vervangen zodra het item volledig is geïnitialiseerd. Zal nooit worden verwijderd. Betekent niet dat afbeeldingen volledig zijn geladen (zie `gridzyItemComplete` ), maar dat het item klaar is om zichtbaar te worden.
`gridzyItemLoading`	Wordt ingesteld zodra het item het initialisatieproces start. Wordt vervangen door `gridzyItemComplete` zodra de opgenomen afbeeldingen (meestal slechts één) volledig zijn geladen.
`gridzyItemComplete`	Zal `gridzyItemLoading` vervangen zodra de opgenomen afbeeldingen (meestal maar één) volledig zijn geladen. Zal nooit worden verwijderd.
`gridzyItemInitialToVisible`	Wordt ingesteld zodra het item voor het eerst verschijnt. Wordt verwijderd zodra het item volledig zichtbaar is.
`gridzyItemVisible`	Wordt ingesteld zodra het item volledig zichtbaar is. Wordt verwijderd zodra het item begint te verdwijnen.
`gridzyItemVisibleToHidden`	Wordt ingesteld zodra het item begint te verdwijnen. Wordt verwijderd zodra het item volledig verborgen is.
`gridzyItemHidden`	Wordt ingesteld zodra het item volledig verborgen is. Wordt verwijderd zodra het item begint te verschijnen.
`gridzyItemHiddenToVisible`	Wordt ingesteld zodra het item begint te verschijnen (behalve de eerste keer verschijnen - zie klasse `gridzyItemInitialToVisible` ). Wordt verwijderd zodra het item volledig zichtbaar is.
`gridzyItemVisibleToVisible`	Wordt ingesteld zodra er iets in het raster verandert, maar het item zelf was en blijft zichtbaar. Wordt verwijderd zodra de veranderingsanimatie is voltooid.

Standaard worden de procesindicator en de animaties voor verschijnende en verdwijnende afbeeldingen vooraf gedefinieerd door het CSS-hoofdbestand van Gridzy.

Met de hierboven genoemde CSS-klassen kunt u uw eigen procesindicator en animaties stylen. Durf eens in het Gridzy-hoofd-CSS-bestand te kijken om te begrijpen wat u zou moeten overschrijven. Geen angst, alles is daar goed gedocumenteerd.

Optimaliseer laden

Als u veel afbeeldingen gebruikt, kan het een goed idee zijn om Gridzy te helpen het raster sneller te bouwen.

Voorkom springende afbeeldingen

Gridzy heeft absoluut de aspect ratio van alle afbeeldingen nodig om het raster te berekenen. Deze feiten resulteren in springende elementen als sommige afbeeldingen klaar zijn en andere niet. Hoe meer afbeeldingen er zijn, hoe vervelender dit effect kan zijn.

Om dit gedrag te voorkomen, stelt u gewoon width en height -attributen in voor alle img elementen. Het is belangrijk om de juiste waarden in te stellen voor elke afzonderlijke afbeelding, anders zouden de afbeeldingen vervormd raken. De juiste waarden zijn de oorspronkelijke breedte en hoogte van de betreffende afbeelding:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Daarna kan Gridzy het raster direct berekenen zonder dat het nodig is de werkelijke afmetingen van de afbeeldingen te weten.

Lazy laden

Om alleen afbeeldingen te laden die zich in het zichtbare venster bevinden, volgt u deze stappen:

Voeg width en height in zoals hierboven beschreven (zorg ervoor dat u de juiste waarden gebruikt)
Vervang alle src kenmerken door data-gridzylazysrc zoals hieronder weergegeven (als u ook srcset kenmerken hebt, vervang deze dan door data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Na deze stappen worden de afbeeldingen geladen zodra ze zich in de viewport bevinden of zich erin bevinden.

Procesindicator

De procesindicator is het kleine geanimeerde pictogram dat verschijnt terwijl de afbeelding wordt geladen. Als u captions & skins gebruikt, wordt de procesindicator automatisch weergegeven. Anders moet u enkele aanpassingen doen:

Plaats elk img element in een div element
(of in een ander element – zie semantische HTML voor meer)
Voeg de klasse gridzyImage toe aan elk img element

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Daarna zou u de procesindicatoren moeten zien als het laden van de afbeeldingen tijd kost.

Filteren

Filters in Gridzy zijn vrij eenvoudig maar krachtig. Het maakt niet uit wat voor filter je nodig hebt, de kans is groot dat het realiseerbaar is. Het enige wat je nodig hebt is een beetje CSS en een paar HTML-formulierelementen …

Hier is een functioneel voorbeeld:

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

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

Laten we het stap voor stap bouwen

1. Eerst hebben we de gebruikelijke HTML-structuur van Gridzy nodig en stellen we klassenamen in voor alle galerij-items, zodat we ze later kunnen filteren

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

In dit voorbeeld gebruiken we slechts één klasse voor elk element. Maar u kunt ook meerdere klassen instellen voor één element, als dat element via meerdere filters vindbaar moet zijn.

2. Vervolgens voegen we een aantal knoppen toe waarmee we de filters kunnen wijzigen.

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

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

In plaats van de knoppen kunt u ook andere formulierelementen gebruiken, zoals selectievakjes, keuzerondjes, selectievelden, enzovoort.

Zoals u kunt zien, zijn de waarden van de knoppen gebruikelijke CSS-selectors. Zodra we klaar zijn, zal een klik op zo'n knop de afbeeldingen weergeven die overeenkomen met die CSS-selector. Technisch gezien stelt het de filter gewoon in op deze waarde.

U kunt ook veel complexere selectors gebruiken. Bijvoorbeeld :not(.animals) zou ook werken, evenals .animals.people en .animals, .people .

3. Ten slotte kapselen we de knoppen in een div -container in en binden ze aan de Gridzy-galerij door de optie filterControls in te stellen:

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

Zoals u kunt zien, gebruiken we ook een CSS-selector voor de filterControls optie. De div container met het id -attribuut dient alleen om de knoppen gemakkelijker te kunnen selecteren via die CSS-selector.

Dat is alles!

Als u de voorkeur geeft aan een JavaScript-oplossing, bekijk dan de API .

API

Hoewel Gridzy zijn eigen API heeft, kunnen de meeste dingen ook zonder gedaan worden, gewoon door de DOM te manipuleren. Gridzy zal het opmerken en het raster aanpassen. Maar er is ook een zeer krachtige API …

Manipuleren van de DOM

Voor alle Document Object Model (DOM) -manipulaties hebben we eerst het containerelement nodig:

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

Afbeeldingen toevoegen

Het is belangrijk om het nieuwe child element volledig te bouwen en te vullen voordat u het toevoegt aan het container element. Anders kan Gridzy de juiste afmetingen niet detecteren.

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

Afbeeldingen verwijderen

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

Opties wijzigen

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

Meer over het manipuleren van de DOM vindt u op MDN web docs . Er is ook een Introduction to the DOM beschikbaar.

Eigen API

Om de API te kunnen gebruiken, hebben we eerst het Gridzy-exemplaar nodig, dat is gekoppeld aan het Gridzy-containerelement:

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

Optie verkrijgen

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

Krijg alle opties

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

Opties instellen

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

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

Filter toepassen

Het toepassen van een filter is gewoon het instellen van de optie filter , dat een geldige CSS-selector kan zijn:

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

Callbackfuncties toevoegen

VEROUDERD sinds versie 2.4.0
Gebruik in plaats daarvan de moderne en flexibelere Events . Zie de volgende sectie voor details.

~~Gridzy.js 2 ondersteunt enkele opties voor callback-functies. Deze kunnen alleen worden ingesteld via de propriëtaire API, maar net als andere opties:~~

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

	~~Beschrijving~~
~~`onBeforeOptionsChanged`~~	~~Callbackfunctie die direct vóór het instellen van opties wordt aangeroepen.~~
~~`onOptionsChanged`~~	~~Callbackfunctie die direct na het instellen van opties wordt aangeroepen.~~
~~`onBeforeRender`~~	~~Callbackfunctie die direct vóór het renderen wordt aangeroepen.~~
~~`onRender`~~	~~Callbackfunctie die direct na het renderen wordt aangeroepen.~~

Gebruik evenementen

sinds versie 2.4.0

U kunt Gridzy-gebeurtenissen op dezelfde manier gebruiken als normale JavaScript-gebeurtenissen:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

Sommige gebeurtenissen worden geactiveerd op het Gridzy-containerelement en andere gebeurtenissen worden geactiveerd op de afzonderlijke itemelementen binnen het containerelement.

Gebeurtenissen die op het Gridzy-containerelement worden geactiveerd:

	Beschrijving
`gridzyBeforeInit`	Wordt geactiveerd vóór de initialisatie van de galerij.
`gridzyInit`	Wordt geactiveerd na initialisatie van de galerij.
`gridzyBeforeOptionsChanged`	Er wordt gebrand voordat de opties zijn ingesteld.
`gridzyOptionsChanged`	Brandt na het instellen van de opties.
`gridzyBeforeRender`	Branden vóór het renderen.
`gridzyRender`	Branden na het renderen.

Als u hier evenementen mist, stuur dan een ondersteuningsverzoek .

event.target levert het Gridzy-containerelement.
event.detail.instance levert het Gridzy-exemplaar.

Gebeurtenissen die op itemelementen worden geactiveerd:

	Beschrijving
`gridzyItemBeforeInit`	Wordt geactiveerd vóór de initialisatie van het item.
`gridzyItemInit`	Wordt geactiveerd na initialisatie van het item.
`gridzyItemLoading`	Wordt geactiveerd wanneer het item begint met laden.
`gridzyItemReady`	Wordt geactiveerd wanneer het item klaar is voor rasterberekening. De beeldverhouding is dus bekend, maar de afbeelding wordt mogelijk nog geladen.
`gridzyItemComplete`	Wordt geactiveerd wanneer de afbeelding van het item volledig is geladen.

Als u hier evenementen mist, stuur dan een ondersteuningsverzoek .

event.target levert het betreffende item-element.
event.detail.instance levert het Gridzy-exemplaar.

API – Wereldwijd

Er zijn een aantal functies die onafhankelijk zijn van Gridzy-instanties. We hoeven dus niet eerst een instantie te krijgen.

Standaardoptie ophalen

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

Alle standaardopties ophalen

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

Standaardopties instellen

Hiermee worden niet de opties van alle reeds geïnitialiseerde Gridzy-instanties ingesteld, maar wordt de basis voor nieuwe instanties gedefinieerd. Als een optie van een bestaande instantie echter zou worden gereset via de waarde null , zou deze de nieuwe standaardwaarde gebruiken.

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

U kunt dit gebruiken om opties globaal in te stellen, als u het aanroept voordat de DOM gereed is. U hoeft opties dan niet meer als kenmerken in te stellen.

Automatismen

Zolang alle automatismen van Gridzy.js 2 actief zijn, is er geen behoefte aan de onderstaande methoden. Maar de automatismen kunnen worden uitgeschakeld om Gridzy op een meer traditionele manier te gebruiken:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

Sommige van deze opties kunnen niet worden ingesteld via data-gridzy- attributes of via setOptions() vanwege logische redenen:

	Standaardwaarde	Beschrijving
`autoInitOnDomReady`	`true`	Detecteert elementen met de klasse `gridzy` bij het laden van de pagina en initialiseert deze. Instelbaar via `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutatieObserver	`true`	Detecteert nieuwe elementen met de klasse `gridzy` zodra ze in de DOM verschijnen en initialiseert ze. (bijv. bij het gebruik van pagina-overgangen) Instelbaar via `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutatieObserver	`true`	Detecteert of onderliggende elementen (afbeeldingen) worden toegevoegd of verwijderd en werkt het raster automatisch bij. Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definieert of de `data-gridzy-` attributen over het algemeen worden gebruikt of niet. Als dit `false` is, kunnen opties alleen worden ingesteld via de propriëtaire API. Instelbaar via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutatieObserver	`true`	Detecteert wijzigingen van `data-gridzy-` attributen en werkt het raster automatisch bij. Detecteert ook of de `gridzyAnimated` -klasse wordt toegevoegd of verwijderd en of er wijzigingen `style` optreden. Als `useOptionAttributes` `false` is, detecteert het alleen wijzigingen `style` . Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutatieObserver	`true`	Detecteert wijzigingen van `class` van alle onderliggende elementen (afbeeldingen). Relevant met betrekking tot filters. Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutatieObserver sinds versie 2.5.0	`true`	Detecteert wijzigingen van `src` attributen van alle afbeeldingen. Relevant bij gebruik met React of vergelijkbare bibliotheken. Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver sinds versie 2.6.0	`true`	Detecteert wijzigingen van de elementbreedte. Relevant met betrekking tot responsief ontwerp. (Voor versie 2.6.0 werd een window resize event listener gebruikt) Instelbaar via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Handmatig initialiseren

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

Vernietig het exemplaar

Grofweg gezegd is dit het tegenovergestelde van het initialiseren van Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Synchroniseer de kinderlijst handmatig

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

Synchroniseer handmatig een enkel onderliggend element

Meestal niet nodig, behalve in zeer zeldzame gevallen.

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

Synchroniseer kenmerken handmatig

Houd er rekening mee dat de optie useOptionAttributes hiervoor true moet zijn.

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

Forceren van rendering

Meestal niet nodig, zelfs als alle automatismen zijn uitgeschakeld

gridzyInstance.render();

WordPress-plug-in

JavaScript-bibliotheek

Dienst