2.x verzió – Gridzy.Gallery

A webhely automatikusan le lett fordítva. Ha valami nem világos, kérjük, tekintse meg az angol nyelvű dokumentációt.

Alapvető használat

Töltse fel a Gridzy fájlokat a szerverére, és adja hozzá webhelyéhez (általában a fejrészben):

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

Adja hozzá a HTML-kódot (bárhol a törzsrészben):

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

Ennyi! Ez egy teljesen működőképes példa. Nincs szükség extra inicializálásra.

Konfiguráció

A Gridzy konfigurálásának legegyszerűbb módja a HTML attribútumok használata. Csak az opciónevek elé kell írnia a data-gridzy- karaktert. Tehát a spaceBetween beállítás beállításához adja hozzá a data-gridzy-spaceBetween attribútumot.

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

Fő opciók

	Alapértelmezett érték	Leírás
`animate`	`true`	Meghatározza, hogy használjon-e animációkat a rács megváltozásakor (például a böngészőablak átméretezésekor vagy szűrő beállításakor).
`layout`	`justified`	Meghatározza a használt elrendezést. A Gridzy.js 2 a két különböző elrendezést támogatja `justified` és `waterfall` . Mindegyiknek megvannak a saját kiegészítő paraméterei, amelyeket a táblázat alatt talál.
`filter`	`*`	Meghatározza, hogy mely képeket kell megjeleníteni. Itt bármely CSS-választó használható értékként. Általában automatikusan beállítható `filterControls` segítségével (lásd a következő opciót). Nézze meg a szűrőket
`filterControls`		Meghatározza, hogy mely űrlapelemek használhatók a képek szűrésére. Itt értékként használható bármely CSS-szelektor, amely HTML űrlapelemeket jelöl ki. Nézze meg a szűrőket
`autoConsiderScrollBars`	`true`	Az elérhető szélesség előrejelzése, ha görgetősávok jelennek meg vagy eltűnnek. Mindig ajánlatos a `true` értéket hagyni, hacsak ez az automatizmus nem okoz problémákat.

Justified Elrendezési beállítások

	Alapértelmezett érték	Leírás
`autoFontSize`	`false`	Automatikusan frissíti az egyes dobozok font-size tulajdonságát az eredeti dobozméret alapján. Alapértelmezés szerint a font-size tulajdonság nincs kifejezetten beállítva.
`desiredHeight`	`190`	Meghatározza az elemsorok kívánt magasságát. A tényleges magasság a rendelkezésre álló szélesség és a sorban lévő elemek függvényében kerül kiszámításra.
`hideOnMissingImage`	`true`	Elrejti a nem betölthető képeket tartalmazó dobozokat.
`spaceBetween`	`4`	Meghatározza az elemek közötti távolságot pixelben.
`lastRowAlign` 2.3.0 verzió óta	`justified`	Meghatározza az utolsó sor viselkedését. A megengedett értékek: `left` , `center` , `right` és `justified` .
`singleRowAlign` 2.3.0 verzió óta	`justified`	Meghatározza a viselkedést, ha csak egyetlen sor van. A megengedett értékek: `left` , `center` , `right` és `justified` .
~~`fillLastRow`~~ ~~2.1.0 verzió óta~~	~~`true`~~	ELTÁVOLÍTVA a 2.4.0 verzió óta ( A 2.3.0-s verzió óta ELVÉGZETT) A képeket úgy rendezi el, hogy az utolsó sor mindig teljesen kitöltve legyen. Ha azt tervezi, hogy dinamikusan hozzáfűzi a képeket, jó ötlet lehet ezt deaktiválni. Egyetlen sorokra nincs hatással (lásd `fillSingleRow` ).
`fillSingleRow` 2.1.0 verzió óta	~~`true`~~	ELTÁVOLÍTVA a 2.4.0 verzió óta ( A 2.3.0-s verzió óta ELVÉGZETT) Ha csak egy sor van, akkor a képeket úgy rendezi el, hogy a sor mindig teljesen kitöltve legyen. Ha megtörténhet, hogy csak egy vagy két kép van a galériában, jó ötlet lehet ezt kikapcsolni.

Waterfall Elrendezési beállítások

	Alapértelmezett érték	Leírás
`autoFontSize`	`false`	Automatikusan frissíti az egyes dobozok font-size tulajdonságát az eredeti dobozméret alapján. Alapértelmezés szerint a font-size tulajdonság nincs kifejezetten beállítva.
`desiredWidth`	`250`	Meghatározza az oszlopok kívánt szélességét. A tényleges szélesség a rendelkezésre álló szélességtől és az oszlopok számától függően kerül kiszámításra.
`hideOnMissingImage`	`true`	Elrejti a nem betölthető képeket tartalmazó dobozokat.
`horizontalOrder`	`false`	Meghatározza, hogy az elemek szigorúan egy-egy elemet helyezzenek el minden oszlopban balról jobbra, majd a legbaloldalibb oszlopban kezdődik, függetlenül attól, hogy melyik oszlopban van több hely. Alapértelmezés szerint az elemek mindig a legkisebb magasságú oszlopba kerülnek.
`spaceBetween`	`4`	Meghatározza az elemek közötti távolságot pixelben.
`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`.

További speciális beállítások

A speciális beállításokért tekintse meg az API-t .

Szemantikus HTML

A Gridzy legegyszerűbb HTML-struktúrája a következő:

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

A Gridzy azonban nagyon rugalmas, és szinte bármilyen más HTML-struktúrát használhat. Csak néhány szempontot kell figyelembe venni:

A tárolóelem minden gyermeke egy elemet képvisel a rácsban.
Mind a tárolóelem, mind a gyermekei bármilyen típusú címke lehet, például ul és li (csak fontolja meg a böngésző alapbeállításainak visszaállítását).
Ha egy img elem maga nem közvetlen gyermek, akkor szüksége van a gridzyImage osztályra.

Tehát ez is egy működő HTML-struktúra:

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

Különösen, ha feliratokat szeretne hozzáadni, fejlett HTML-struktúrára van szüksége. Ha többet szeretne megtudni róla, tekintse meg a Captions & Skins webhelyet.

Feliratok és felszínek

Ha feliratokat szeretne hozzáadni a galériához, meg kell határoznia a megjelenést. Ezért néhány előre meghatározott skin elérhető. Minden skin egy CSS-fájlból áll. Ezt a fájlt hozzá kell adnia a fő Gridzy-fájlok mellett (általában a fejrészben):

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

Ezenkívül fejlett HTML-struktúrára van szüksége:

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

Ha kíváncsi a HTML felépítésére, vessen egy pillantást a Szemantikus HTML- re.

A felirathoz bármilyen típusú címkét használhat, csak győződjön meg róla, hogy a gridzyCaption osztály szerepel. Az img elemnek szüksége van a gridzyImage osztályra.

A fenti példa a gridzySkinClassic felületet mutatja. Másik használatához cserélje ki a bőrnevet az alábbiak valamelyikére:

Tartalmazott Skinek

	Elérhető osztályok
gridzySkinBlank jó kiindulópont a saját bőr létrehozásához élő előnézet	`gridzySkinBlank`
gridzySkinClassic élő előnézet	`gridzySkinClassic` `gridzySkinClassicLight`(EGYEZTETVE a 2.6.0-s verzió óta)
gridzySkinFullOverlay élő előnézet	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(EGYEZTETVE a 2.6.0-s verzió óta)
gridzySkinLift élő előnézet	`gridzySkinLift` `gridzySkinLiftLight`(EGYEZTETVE a 2.6.0-s verzió óta)
gridzySkinMagnifier a zoom funkciót nem tartalmazza élő előnézet	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(EGYEZTETVE a 2.6.0-s verzió óta)

Az összes fenti skinhez csak CSS-fájl szükséges, de vannak további skinek, amelyekhez JavaScript-fájl is szükséges:

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

	Elérhető osztályok
gridzySkinBlur nem működik IE-ben élő előnézet	`gridzySkinBlur` `gridzySkinBlurLight`(EGYEZTETVE a 2.6.0-s verzió óta)
gridzySkinCard élő előnézet	`gridzySkinCard` `gridzySkinCardLight`(EGYEZTETVE a 2.6.0-s verzió óta)

Bőrbeállítások

A 2.6.0-s verzió óta lehetőség van a beépített felszínek konfigurálására. Az adott felülettől függően beállíthatja a háttérszínt, a szöveg színét és a szöveg árnyékát. Csak egyéni CSS-tulajdonságokat kell használnia, amint az itt látható:

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

Nézze meg az egyes felületekhez támogatott változókat és alapértelmezett értékeket itt:

gridzySkinClassic

Változó	Alapértelmezett érték	Információ
`--background`	`rgba(0, 0, 0, .7)`	bármilyen CSS háttérértéket engedélyez
`--color`	`rgb(255, 255, 255)`	bármilyen CSS színértéket engedélyez
`--text-shadow`	`none`	bármilyen CSS szöveg-árnyék értéket engedélyez

gridzySkinFullOverlay

Változó	Alapértelmezett érték	Információ
`--background`	`rgba(0, 0, 0, .7)`	bármilyen CSS háttérértéket engedélyez
`--color`	`rgb(255, 255, 255)`	bármilyen CSS színértéket engedélyez
`--text-shadow`	`none`	bármilyen CSS szöveg-árnyék értéket engedélyez

gridzySkinLift

Változó	Alapértelmezett érték	Információ
`--background`	`rgba(0, 0, 0, .7)`	bármilyen CSS háttérértéket engedélyez
`--color`	`rgb(255, 255, 255)`	bármilyen CSS színértéket engedélyez
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	bármilyen CSS szöveg-árnyék értéket engedélyez

gridzySkinMagnifier

Változó	Alapértelmezett érték	Információ
`--background`	`rgba(0, 0, 0, .7)`	bármilyen CSS háttérértéket engedélyez
`--color`	`rgb(255, 255, 255)`	bármilyen CSS színértéket engedélyez

Ez a bőr nem támogatja --text-shadow

gridzySkinBlur

Változó	Alapértelmezett érték	Információ
`--background`	`rgba(0, 0, 0, .7)`	bármilyen CSS háttérértéket engedélyez
`--color`	`rgb(255, 255, 255)`	bármilyen CSS színértéket engedélyez
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	bármilyen CSS szöveg-árnyék értéket engedélyez

gridzySkinCard

Változó	Alapértelmezett érték	Információ
`--background`	`rgba(0, 0, 0, 1)`	bármilyen CSS háttérértéket engedélyez
`--color`	`rgb(255, 255, 255)`	bármilyen CSS színértéket engedélyez
`--text-shadow`	`none`	bármilyen CSS szöveg-árnyék értéket engedélyez

Minden előre meghatározott felület csak egyszerű szöveges feliratokat támogat. Létrehozhatja saját és összetettebb skinjeit. Kérjük, tekintse meg a Style Gridzy-t .

Gridzy stílus

Ha egyetlen előre definiált bőr sem felel meg az Ön igényeinek, formálhat saját bőrt.

A legegyszerűbb módja, ha először lemásol egy meglévő skint, és a saját igényeihez igazítja. Az előre definiált gridzySkinBlank felület általában jó alapot és jó dokumentációt biztosít a CSS-fájlban:

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

A CSS-fájlban megtalálja a gridzySkinBlank , gridzyImage és gridzyCaption osztályokat. Gridzynek magának nincs szüksége ezekre az osztályokra. Csak formázásra használják őket, így ha akarja, eltávolíthatja vagy átnevezheti őket.

Ezenkívül megtalálja a gridzyItem CSS osztályt. A Gridzy ezt az osztályt automatikusan beállítja a fő konténerelem összes közvetlen gyermekére. Tehát ezt az osztályt használhatja a galéria elemeinek stílusához.

Figyelj a fontos dolgokra

Az elem tartalmának teljes mértékben érzékenynek kell lennie. Vegye figyelembe, hogy az elem mérete biztosan megváltozik. Használjon százalékos értékeket pixelértékek helyett. És vessen egy pillantást az autoFontSize Gridzy elrendezési beállításra, amely a betűméretet az elemdoboz méretéhez köti.
Minden elemnek jól meghatározott képarányúnak kell lennie. Az elem képaránya soha nem változik, és a rács kiszámításához szükséges. Tehát ha egy elemnek nincs automatikusan jól meghatározott képaránya, akkor manuálisan adja meg előre (pl. css-en keresztül).

Egyes esetekben egyszerűbb lehet az elemek tartalmának stílusa a Gridzy inicializálása előtt. Ehhez egyszerűen távolítsa el ideiglenesen a gridzy osztályt vagy a Gridzy javascript fájlt.

Ennyi! Ez minden, amire szüksége van a saját bőrének felépítéséhez. A legtöbb előre meghatározott skin ennél többet nem használ.

De lehet több is, ha úgy tetszik…

Advanced Skins

A Gridzy több CSS osztályt használ, mint gridzyItem . Legtöbbjük automatikusan be lesz állítva, és a formázáshoz is használhatja őket.

Fő konténerosztályok

Osztály neve	Leírás
`gridzy` kézi beállításához	A Gridzy automatikusan megkeresi az osztály elemeit, és inicializálja azokat.
`gridzyAnimated`	A rendszer automatikusan beállítja, ha az `animate` opció `true` . Ha ezt az osztályt manuálisan állítjuk be, az `animate` opció is automatikusan `true` lesz (kivéve, ha kifejezetten `false` értékre van állítva).

Tétel osztályok

Osztály neve	Leírás
`gridzyItem`	Azonnal be lesz állítva, amint az elem megkezdi az inicializálási folyamatot. Soha nem távolítják el.
`gridzyItemInitializing`	Azonnal be lesz állítva, amint az elem megkezdi az inicializálási folyamatot. `gridzyItemReady` lecseréli, amint az elem teljesen inicializálva van. Ez nem azt jelenti, hogy a képek teljesen betöltődnek (lásd `gridzyItemLoading` ), de az elem készen áll a láthatóságra.
`gridzyItemReady`	`gridzyItemInitializing` helyébe lép, amint az elem teljesen inicializálva van. Soha nem távolítják el. Nem azt jelenti, hogy a képek teljesen betöltődnek (lásd `gridzyItemComplete` ), de az elem készen áll a láthatóságra.
`gridzyItemLoading`	Azonnal be lesz állítva, amint az elem megkezdi az inicializálási folyamatot. Felváltja `gridzyItemComplete` , amint a benne lévő képek (általában csak egy) teljesen betöltődnek.
`gridzyItemComplete`	`gridzyItemLoading` lecserélődik, amint a benne lévő képek (általában csak egy) teljesen betöltődnek. Soha nem távolítják el.
`gridzyItemInitialToVisible`	Beállításra kerül, amint az elem először megjelenik. Eltávolításra kerül, amint az elem teljesen láthatóvá válik.
`gridzyItemVisible`	Beállításra kerül, amint az elem teljesen láthatóvá válik. Eltávolításra kerül, amint az elem eltűnni kezd.
`gridzyItemVisibleToHidden`	Beállításra kerül, amint az elem eltűnni kezd. Eltávolításra kerül, amint az elem teljesen el van rejtve.
`gridzyItemHidden`	Beállításra kerül, amint az elem teljesen el van rejtve. Eltávolításra kerül, amint az elem megjelenni kezd.
`gridzyItemHiddenToVisible`	Azonnal be lesz állítva, amint az elem megjelenik (kivéve az első megjelenést – lásd `gridzyItemInitialToVisible` osztály). Eltávolításra kerül, amint az elem teljesen láthatóvá válik.
`gridzyItemVisibleToVisible`	Azonnal be lesz állítva, amint valami megváltozott a rácsban, de maga az elem látható volt és marad. Eltávolításra kerül, amint a változási animáció befejeződött.

Alapértelmezés szerint a folyamatjelzőt és a megjelenő és eltűnt képek animációit a Gridzy fő CSS-fájlja előre definiálja.

Ezekkel a fent említett CSS osztályokkal stílusozhatja saját folyamatjelzőjét és animációit. Vessen egy pillantást a Gridzy fő CSS-fájlba, hogy megértse, mit kell felülbírálnia. Nincs félelem, ott minden jól dokumentálva van.

Betöltés optimalizálása

Ha sok képet használ, jó ötlet lehet segíteni Gridzynek a rács gyorsabb felépítésében.

Akadályozza meg a képek átugrását

A Gridzynek feltétlenül szüksége van az összes kép képarányára a rács kiszámításához. Ez a tény ugró elemeket eredményez, ha egyes képek készen állnak, mások pedig nem. Minél több kép van, annál bosszantóbb lehet ez a hatás.

Ennek elkerülése érdekében állítsa be width és height attribútumot az összes img elemhez. Fontos, hogy minden egyes képhez a megfelelő értékeket állítsuk be, különben a képek torzulhatnak. A helyes értékek a megfelelő kép eredeti szélessége és magassága:

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

Ezt követően a Gridzy azonnal ki tudja számítani a rácsot anélkül, hogy ismernie kellene a képek tényleges méretét.

Lusta betöltés

Ha csak a látható nézetablakban lévő képeket szeretné betölteni, kövesse az alábbi lépéseket:

Szúrja be width és height attribútumokat a fent leírtak szerint (ügyeljen a helyes értékek használatára)
Cserélje le az összes src attribútumot data-gridzylazysrc re az alábbiak szerint (ha srcset attribútumai is vannak, cserélje ki őket data-gridzylazysrcset -re).

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

Ezen lépések után a képek betöltődnek, amint a nézetablak közelében vagy azon belül vannak.

Folyamatjelző

A folyamatjelző egy kis animált ikon, amely a kép betöltése közben jelenik meg. Ha feliratokat és skineket használ, a folyamatjelző automatikusan megjelenik. Ellenkező esetben néhány beállításra van szükség:

Helyezzen minden img elemet egy div elembe
(vagy bármely más elembe – további információért lásd a szemantikus HTML-t )
Adja hozzá a gridzyImage osztályt minden img elemhez

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

Ezt követően látnia kell a folyamatjelzőket, ha a képek betöltése időt vesz igénybe.

Szűrők

A Gridzy szűrői meglehetősen egyszerűek, de hatékonyak. Mindegy, hogy milyen szűrőre van szüksége, nagyon valószínű, hogy megvalósítható. Csak egy kis CSS-re és néhány HTML űrlapelemre van szüksége…

Íme egy funkcionális példa:

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

Építsük meg lépésről lépésre

1. Először is szükségünk van a Gridzy szokásos HTML-struktúrájára, és minden galériaelemhez be kell állítanunk az osztályneveket, hogy utána szűrhessük őket.

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

Ebben a példában minden elemhez csak egy osztályt használunk. De több osztályt is beállíthat egyetlen elemhez, ha az elem több szűrőn keresztül is megtalálható.

2. Ezután adunk hozzá néhány gombot, amelyeken keresztül a szűrőket módosíthatjuk

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

A gombok helyett más űrlapelemeket is használhat, például jelölőnégyzeteket, rádiógombokat, mezőket és így tovább.

Mint látható, a gombok értékei a szokásos CSS-választók. Amint befejeztük, egy ilyen gombra kattintva megjelennek a CSS-választónak megfelelő képek. Technikailag egyszerűen beállítja a filter opciót erre az értékre.

Sokkal bonyolultabb szelektorokat is használhat. Például :not(.animals) is működne, valamint .animals.people és .animals, .people .

3. Végül egy div konténerbe foglaljuk a gombokat, és a filterControls opció beállításával a Gridzy galériához kötjük:

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

Amint láthatja, a filterControls opcióhoz CSS-választót is használunk. Az id attribútummal rendelkező div konténer csak arra szolgál, hogy megkönnyítse a gombok kiválasztását a CSS-választón keresztül.

Ennyi!

Ha inkább JavaScript-megoldást szeretne, nézze meg az API-t .

API

Bár a Gridzynek saját API-ja van, a legtöbb dolgot meg lehet tenni nélküle, egyszerűen a DOM manipulálásával. Gridzy észreveszi, és beállítja a rácsot. De van egy nagyon erős API is…

A DOM manipulálása

Minden Document Object Model (DOM) manipulációhoz először a tárolóelemre van szükségünk:

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

Képek hozzáadása elemre

Fontos, hogy az új gyermekelemet teljesen felépítse és kitöltse, mielőtt hozzáadná a tárolóelemhez. Ellenkező esetben a Gridzy nem tudja felismerni a megfelelő méreteket.

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

Képek eltávolítása

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

Beállítások módosítása

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

A DOM kezeléséről az MDN webdokumentumában talál további információt. A DOM-hoz egy Bevezetés is elérhető.

Saját API

Az API használatához először szükségünk van a Gridzy példányra, amely a Gridzy tárolóelemhez van kötve:

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

Get Option

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

Get All Options

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

Beállítások megadása

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

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

Szűrő alkalmazása

A szűrő alkalmazása csak az filter beállítását jelenti, amely bármely érvényes CSS-választó lehet:

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

Visszahívási funkciók hozzáadása

ELVÉGZETT a 2.4.0 verzió óta
Használja helyette a modern és rugalmasabb eseményeket . A részletekért lásd a következő részt.

~~A Gridzy.js 2 támogat néhány lehetőséget a visszahívási funkciókhoz. Csak a szabadalmaztatott API-n keresztül állíthatók be, de ugyanúgy, mint a többi opció:~~

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

	~~Leírás~~
~~`onBeforeOptionsChanged`~~	~~Visszahívási funkció, amely közvetlenül az opciók beállítása előtt kerül meghívásra.~~
~~`onOptionsChanged`~~	~~Visszahívási funkció, amely közvetlenül az opciók beállítása után kerül meghívásra.~~
~~`onBeforeRender`~~	~~Visszahívási funkció, amely közvetlenül a renderelés előtt kerül meghívásra.~~
~~`onRender`~~	~~Visszahívási funkció, amely közvetlenül a renderelés után kerül meghívásra.~~

Használja az eseményeket

2.4.0 verzió óta

A Gridzy eseményeket pontosan úgy használhatja, mint a szokásos JavaScript eseményeket:

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

Egyes események a Gridzy tárolóelemen, más események pedig a tárolóelemen belüli egyes elemelemeken aktiválódnak.

A Gridzy tárolóelemen aktivált események:

	Leírás
`gridzyBeforeInit`	Tűzzel a galéria inicializálása előtt.
`gridzyInit`	A galéria inicializálása után tüzel.
`gridzyBeforeOptionsChanged`	Az opciók beállítása előtt tüzel.
`gridzyOptionsChanged`	Az opciók beállítása után kigyullad.
`gridzyBeforeRender`	Renderelés előtt kigyullad.
`gridzyRender`	Renderelés után kigyullad.

Ha lemaradt valamelyik eseményről, kérjük, küldjön támogatási kérelmet .

event.target a Gridzy tárolóelemet biztosítja.
Az event.detail.instance a Gridzy példányt biztosítja.

Elemelemeken aktivált események:

	Leírás
`gridzyItemBeforeInit`	Az elem inicializálása előtt aktiválódik.
`gridzyItemInit`	Az elem inicializálása után kigyullad.
`gridzyItemLoading`	Akkor indul, amikor az elem betöltődik.
`gridzyItemReady`	Akkor aktiválódik, amikor az elem készen áll a rácsszámításra. Tehát a képarány ismert, de lehet, hogy a kép még betöltődik.
`gridzyItemComplete`	Akkor aktiválódik, amikor az elem képe teljesen betöltődik.

Ha lemaradt valamelyik eseményről, kérjük, küldjön támogatási kérelmet .

event.target biztosítja a megfelelő elemelemet.
Az event.detail.instance a Gridzy példányt biztosítja.

API – Globális

Vannak olyan funkciók, amelyek függetlenek a Gridzy-példányoktól. Tehát nem kell korábban példányt szereznünk.

Get Default Option

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

Az összes alapértelmezett beállítás lekérése

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

Állítsa be az alapértelmezett beállításokat

Ez nem állítja be az összes már inicializált Gridzy-példány beállításait, hanem meghatározza az új példányok alapját. Ha azonban egy meglévő példány egy beállítását a null értékkel visszaállítják, akkor az új alapértelmezett értéket használja.

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

Használhatja ezt az opciók globális beállítására, ha meghívja, mielőtt a DOM készen állna. Így többé nem kell beállításokat attribútumként beállítani.

Automatizmusok

Amíg a Gridzy.js 2 összes automatizmusa aktív, nincs szükség az alábbi módszerekre. De az automatizmusok kikapcsolhatók a Gridzy hagyományosabb használatához:

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

Ezen opciók némelyike logikai okokból nem állítható be data-gridzy- attribútumokkal vagy setOptions() segítségével:

	Alapértelmezett érték	Leírás
`autoInitOnDomReady`	`true`	Az oldal betöltésekor észleli a `gridzy` osztályú elemeket, és inicializálja azokat. Beállítható `Gridzy.setDefaultOptions()` segítségével
`autoInitOnDomMutation` MutationObserver	`true`	Érzékeli az új elemeket osztály `gridzy` segítségével, amint azok megjelennek a DOM-ban, és inicializálja őket. (pl. oldalátmenetek használatáról) Beállítható `Gridzy.setDefaultOptions()` segítségével
`autoSyncChildListMutation` MutationObserver	`true`	Érzékeli, hogy a gyermekelemek (képek) hozzáadásra vagy eltávolításra kerültek-e, és automatikusan frissíti a rácsot. Beállítható: `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Meghatározza, hogy a `data-gridzy-` attribútumokat általában használják-e vagy sem. Ha ez `false` , a beállítások csak a védett API-n keresztül állíthatók be. Beállítható `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` segítségével
`autoSyncAttributesMutation` MutationObserver	`true`	Érzékeli `data-gridzy-` attribútumok változásait, és automatikusan frissíti a rácsot. Azt is észleli, hogy a `gridzyAnimated` osztály hozzáadásra vagy eltávolításra került-e, és ha módosulnak `style` . Ha `useOptionAttributes` értéke `false` , akkor csak `style` változásait észleli. Beállítható: `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Érzékeli az összes gyermekelem (kép) `class` változásait. A szűrők szempontjából lényeges. Beállítható: `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver 2.5.0 verzió óta	`true`	Érzékeli az összes kép `src` attribútumának változásait. Releváns, ha React vagy hasonló könyvtárakkal használják. Beállítható: `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver 2.6.0 verzió óta	`true`	Érzékeli az elem szélességének változásait. A reszponzív tervezés szempontjából lényeges. (A 2.6.0 verzió előtt ablakátméretezési eseményfigyelőt használtak) Beállítható: `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inicializálás manuálisan

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

Pusztítsd el a példányt

Durván mondva, Gridzy inicializálásának az ellenkezője.

gridzyInstance.destroy();
gridzyInstance = null;

Gyermeklista kézi szinkronizálása

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

Egyetlen gyermekelem manuális szinkronizálása

Általában nincs szükség, kivéve nagyon ritka eseteket.

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

Attribútumok manuális szinkronizálása

Vegye figyelembe, hogy ehhez a useOptionAttributes beállításnak true kell lennie.

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

Force Rendering

Általában nincs szükség, még akkor sem, ha minden automatizmus ki van kapcsolva

gridzyInstance.render();

WordPress beépülő modul

JavaScript könyvtár

Szolgáltatás