# Galéria-diavetítés

> Termékképek vízszintes vagy függőleges csúszkában, nyilakkal és bélyegképes lapozóval.

A **Galéria-diavetítés** elem a képeket csúszkában mutatja. Sok kép esetén helyet takarít meg, mert a látogató lapozva nézi végig őket. A képek forrása a termékazonosító alapján a WooCommerce-termék; a nagyítás, a lightbox, a videó és a bélyegképes lapozó is használható.

## Az elem elhelyezése

1. Nyisd meg az oldalt vagy a termékoldal-sablont az Elementorban.
2. Keresd meg a **Galéria-diavetítés** elemet a keresőben, és húzd a kívánt helyre.
3. Az **Általános** szekcióban válaszd ki a forrást (lásd [Általános beállítások](https://hub.hellowp.io/hu/plugins/jet-woo-product-gallery/altalanos-beallitasok/)).
4. Állítsd be a **Képek** és a **Diavetítés** szekciót.
5. Kattints a **Közzététel** vagy **Frissítés** gombra, és nézd meg a weboldalon.

## Képek szekció

![A Képek szekció: képméret és bélyegképek mérete](./kepek/szerkeszto-csuszka-kepek.webp)

*A Képek szekció: képméret és bélyegképek mérete* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Képméret** | A nagy kép felbontása. | Large |
| **Bélyegképek mérete** | A bélyegképek felbontása. | Thumbnail |

Ezek a megjelenített kép minőségét szabják meg, az elem méretét a befoglaló konténer adja.

## Diavetítés szekció

![A Diavetítés szekció beállításai](./kepek/szerkeszto-csuszka-diavetites.webp)

*A Diavetítés szekció beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Irány** | A csúszka iránya: vízszintes vagy függőleges. Eszközönként (asztali, tábla, mobil) külön is megadható. | Vízszintes |
| **Végtelenítés bekapcsolása** | Az utolsó kép után újra az első jön. | Nem |
| **Egységes diamagasság bekapcsolása** | Minden dia egyforma magas lesz. | Nem |
| **Húzás érzékenysége** | Mennyire érzékeny a csúszka a húzásra. | 0,8 |
| **Diák középre igazításának bekapcsolása** | A diák középre igazítva jelennek meg; ilyenkor megadható az egyszerre látható diák száma és a köztük lévő távolság. | Nem |
| **Átmeneti effektus** | A lapozás animációja. | Csúsztatás |

### Navigáció

A **Navigáció** alatt a **Bekapcsolás** kapcsolóval a nyilakat lehet ki- és bekapcsolni (alapból be van kapcsolva). Bekapcsolva az **Előző nyíl** és a **Következő nyíl** ikonját Médiatárból vagy feltöltéssel választhatod ki:

1. Kattints az **Előző nyíl** (vagy a **Következő nyíl**) gombra. Megnyílik a Médiatár.
2. Válassz egy már feltöltött ikont, vagy töltsd fel a sajátodat a **Fájlok feltöltése** fülön.
3. Kattints a **Kiválasztás** gombra, hogy az ikon a nyílhoz kerüljön.

### Lapozó (pagination)

A lapozó alapból be van kapcsolva. Ha a lapozó típusát bélyegképekre állítod, az elem a nagy kép mellett a többi képet bélyegképként mutatja. Itt állítható:

- a lapozó típusa: pontok vagy bélyegképek;
- a bélyegképes lapozó pozíciója: elejére vagy végére;
- eszközönként az egyszerre látható bélyegképek száma és a köztük lévő távolság;
- a bélyegképek saját nyilai.

## Vízszintes csúszka bélyegképekkel

1. Az **Irány** legyen „Vízszintes”.
2. Kapcsold be a lapozót, és válaszd a bélyegképes típust.
3. Frissítsd az oldalt. A bélyegképek a nagy kép alatt jelennek meg.

![Vízszintes csúszka bélyegképekkel](./kepek/galeria-csuszka-front.webp)

*Vízszintes csúszka bélyegképekkel* (https://minta-bolt.hu/galeria-csuszka/)

A képen a nagy kép alatt négy bélyegkép látszik, az aktuális kép kiemelt.

## Függőleges csúszka bélyegképekkel

1. Az **Irány** legyen függőleges.
2. A lapozót hagyd bekapcsolva, a típusa legyen bélyegkép.
3. Válaszd ki, hogy a bélyegképek a csúszka elején (bal oldalon) vagy a végén jelenjenek meg.

![Függőleges bélyegképes csúszka](./kepek/galeria-fuggoleges-front.webp)

*Függőleges bélyegképes csúszka* (https://minta-bolt.hu/galeria-fuggoleges/)

A képen a bélyegképek bal oldalon, egymás alatt állnak, jobbra a nagy kép látszik.

## Csúszka a blokkszerkesztőben

A **Gallery Slider** blokk ugyanígy működik, a beállítások megegyeznek az Elementor-elemével.

1. Nyisd meg az oldalt vagy bejegyzést, kattints a blokkbeszúró gombra, vagy írj be egy „/” jelet az üres területen, és kezdd el gépelni a blokk nevét.
2. Tedd a blokkot a kívánt helyre. Ha a csúszka mellé más tartalom is kell (például űrlap), előbb használj Oszlopok blokkot, és abba helyezd a csúszkát.
3. Az **Általános** beállításoknál három forrás közül választhatsz: bejegyzéstípusok, kézi kiválasztás vagy WooCommerce-termékek. Termékeknél add meg a termékazonosítót is. Az azonosítót a **Termékek** listában látod, ha az egérrel a termék fölé állsz.
4. Szükség esetén kapcsold ki a kiemelt képet, és kapcsold be a nagyítást és a galériát. A **Galéria bekapcsolása** kapcsoló a lightboxot kapcsolja be: kattintásra a kép nagyban nyílik meg.
5. Állítsd be a **Képek** és a **Diavetítés** fület, majd kattints a **Mentés** gombra.

Ha termékoldal-sablont szerkesztesz, és a termékazonosító mezőt üresen hagyod, a csúszka az éppen megnyitott termék képeit mutatja. Ezért a sablonban nem kell azonosítót megadni.

A blokkok stílusát a JetStyleManager bővítménnyel állíthatod.

## Csúszka beállítása termékoldal-sablonban

A vízszintes és a függőleges csúszka is elkészíthető egy Elementorban szerkesztett egy-termékes sablonban (a blokkszerkesztőben ugyanígy megy). Előfeltétel az ingyenes Elementor vagy a blokkszerkesztő.

1. Nyisd meg a sablont, keresd meg a **Galéria-diavetítés** elemet a keresőben, és húzd a helyére.
2. Az **Általános** résznél válaszd a WooCommerce-termékek forrást.
3. A **Diavetítés** résznél állítsd be az **Irányt**: vízszintes vagy függőleges.
4. A lapozónál kapcsold be a **Bekapcsolás** kapcsolót, és a típus legyen bélyegképek. Vízszintes csúszkánál a bélyegképek a nagy kép alatt jelennek meg. Függőlegesnél a bélyegképek **Pozícióját** is megadhatod: elöl vagy hátul.
5. Kattints a **Közzététel** vagy **Frissítés** gombra, majd nyiss meg egy tetszőleges terméket a weboldalon. A csúszkával az adott termék képei között lapozhatsz.