# Galéria horgonyalapú navigáció

> A Galéria horgonyalapú navigáció elem és blokk görgethető képsora lapozóval: forrás, képméret, navigáció, lightbox és videó beállításai.

A **Galéria horgonyalapú navigáció** elem görgethető képsort készít. A képek egymás alatt jelennek meg, mellettük (vagy alattuk) horgonyos lapozó van, amellyel a látogató az adott képre ugrik. Termékekből, bejegyzéstípus-mezőből vagy kézzel választott képekből dolgozik, megadható hozzá kiemelt videó, és minden részéhez van stílusbeállítás. Termékoldal-sablonban jól használható függőleges, oldalsó lapozós termékgalériának.

Az elem Elementorban és blokkszerkesztőben is elérhető. Az Elementoros változathoz az Elementor ingyenes változata elég.

## Az elem beszúrása Elementorban

1. Nyisd meg az oldalt vagy sablont (például a termékoldal-sablont) az Elementorban.
2. Húzd be a **Galéria horgonyalapú navigáció** elemet a kívánt szekcióba.
3. A **Tartalom** fülön állítsd be az alábbi szekciókat.

### Általános

Itt választod ki, honnan jönnek a képek.

![Az elem Általános szekciója: forrás, képek hozzáadása és a kapcsolók](./kepek/horgony-altalanos.webp)

*Az elem Általános szekciója: forrás, képek hozzáadása és a kapcsolók* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A képen a **Forrás** legördülő és a lenti kapcsolók látszanak. A forrás átváltásakor a hozzá tartozó mezők cserélődnek.

| Beállítás | Mit csinál |
|---|---|
| **Forrás** | A képek forrása. Három érték közül választhatsz, lásd lent. |
| **Termék ID** | WooCommerce-termék forrásnál a termék azonosítója. Termékoldal-sablonban üresen is hagyhatod, ilyenkor az aktuális termékét használja. |
| **Galériakulcs** | Bejegyzéstípus forrásnál a galériamező kulcsa. Egyedi bejegyzés-sablonban vagy listaelem-sablonban használható. |
| **Képek hozzáadása** | Kézi választásnál a Médiatárból választott vagy feltöltött képek. |
| **Videó bekapcsolása** | Kiemelt videó a galériában, lásd a [Videó](https://hub.hellowp.io/hu/plugins/jet-woo-product-gallery/video/) fejezetet. |
| **Nagyítás bekapcsolása** | Nagyítás képre mutatáskor, lásd a [Nagyítás és lightbox](https://hub.hellowp.io/hu/plugins/jet-woo-product-gallery/nagyitas-es-lightbox/) fejezetet. |
| **Galéria bekapcsolása** | A lightbox bekapcsolása. Bekapcsolva megjelenik a **Galéria** szekció, és a kép kattintásra vagy gombbal nagyban nyílik meg, lapozható. |

A **Forrás** három értéke:

- **Bejegyzéstípusok:** a bejegyzéstípus megadott egyedi mezőjében tárolt képeket jeleníti meg;
- **Kézi kiválasztás:** a képeket te töltöd fel vagy választod ki a Médiatárból;
- **WooCommerce-termékek:** a termék galériaképei jelennek meg (a termék kiemelt képe és galériaképei). A **Kiemelt kép letiltása** kapcsolóval a kiemelt kép kihagyható.

### Képek

Itt két mezőt találsz: a **Képméret** a főképek, a **Bélyegképek mérete** a bélyegképes lapozó képeinek méretét adja meg. Válassz a WordPress által generált méretek közül.

### Navigáció

![A Navigáció szekció: a lapozó típusa és helye](./kepek/horgony-navigacio.webp)

*A Navigáció szekció: a lapozó típusa és helye* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A képen a **Navigáció típusa** két ikonja látszik (pontok vagy bélyegképek), alatta a **Navigáció pozíciója** legördülő.

- **Navigáció típusa:** pontok vagy bélyegképek.
- **Navigáció pozíciója:** a lapozó a képeken **Kívül** (ez az alapérték) vagy belül van.

### Galéria (lightbox)

A szekció a **Galéria bekapcsolása** kapcsoló után jelenik meg.

![A Galéria szekció: indítási típus, ikon, pozíció és vezérlők](./kepek/horgony-galeria.webp)

*A Galéria szekció: indítási típus, ikon, pozíció és vezérlők* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=elementor)

A képen az **Indítási típus** „Gomb” értéke látszik, alatta a gomb ikonja, pozíciója és a vezérlők kapcsolói.

- **Indítási típus:** mi nyitja meg a lightboxot. „Kép” esetén a képre kattintás, „Gomb” esetén egy külön gomb. Gomb esetén további beállítások jelennek meg: a **Gomb ikonja** (az Ikonkönyvtárból választva vagy SVG-ként feltöltve), a **Pozíció** (például jobb felső) és a **Megjelenítés rámutatáskor** kapcsoló, amellyel a gomb csak az egér ráhúzásakor látszik.
- **Vezérlők:** mindkét indítási típusnál elérhetők. Kapcsolhatók: **Felirat megjelenítése**, **Teljes képernyős mód mutatása**, **Nagyítás megjelenítése**, **Megosztás megjelenítése**, **Számláló megjelenítése**, **Nyilak megjelenítése**.

### Videó

Ha a termékhez videót adtál, a megjelenítését a **Videó** szekcióban állíthatod (a **Videó bekapcsolása** kapcsoló után jelenik meg). A mezőkről a [Videó](https://hub.hellowp.io/hu/plugins/jet-woo-product-gallery/video/) fejezet szól.

### Stílus

A **Stílus** fülön formázhatod a képeket és a lapozót. Több rész beállítható: a képek közti térköz, a szegély, a háttérszín és a lapozó. A háttérszín csak átlátszó hátterű PNG-képeknél vagy belső margó megadása esetén látszik.

Ha kész vagy, kattints a **Közzététel** gombra, és nézd meg az eredményt az oldalon.

![Galéria horgonyalapú navigációval: egymás alatti képek és oldalt pontok](./kepek/galeria-horgony-front.webp)

*Galéria horgonyalapú navigációval: egymás alatti képek és oldalt pontok* (https://minta-bolt.hu/galeria-horgony/)

A képen a képek egymás alatt görgethetők, bal oldalon pontok jelzik az egyes képeket.

## A blokk használata a blokkszerkesztőben

A **Gallery Anchor Nav** blokk ugyanezt tudja blokkszerkesztőben.

1. Szerkeszd meg az oldalt vagy bejegyzést.
2. Kattints a blokkbeszúró gombra, és húzd be a blokkot, vagy írj be egy „/” jelet és a blokk nevét.
3. A **General** beállításoknál válaszd ki a forrást: „Post Types”, „Manual Select” vagy „WooCommerce Products”. Itt kapcsolható be a videó, a nagyítás és a Photoswipe-galéria (a lightbox) is.
4. A Photoswipe-galéria **Trigger Type** mezőjében „Image” esetén a képre kattintás nyitja a lightboxot. „Button” esetén megjelenik a **Trigger Button Position** (jobb felső, jobb alsó, bal alsó, bal felső vagy közép), a gomb ikonja (Médiatárból választva vagy feltöltve) és a **Show on Hover** kapcsoló, amellyel a gomb csak egérrel való rámutatáskor látszik. A Photoswipe-galériának külön beállítási szekciója is van.
5. Az **Images** fülön a képméretet és a **Navigation Position** mezővel a lapozó helyét (a képek előtt vagy után) adhatod meg.
6. A stílus a JetStyleManager bővítménnyel állítható: itt módosítható a képek közti térköz (**Space Between Images**), a szegély és a háttérszín. A háttérszín csak átlátszó PNG-nél vagy belső margó megadása esetén látszik.
7. Kattints a **Közzététel** gombra, és nézd meg az eredményt.

A blokkszerkesztő általános tudnivalóit a [Blokkszerkesztő](https://hub.hellowp.io/hu/plugins/jet-woo-product-gallery/blokkszerkeszto/) fejezetben találod.