# Képgaléria widget

> Rács, mozaik, sorkizárt és körhinta elrendezés, feliratok, kattintási művelet, lightbox, egyéni link és képhatások a Képgaléria widgetben.

A **Képgaléria** widget látványos galériát készít a képeidből. A WordPress saját galériáját használja, ezért a képeket húzással tölthetsz fel, egyszerre többet is kijelölhetsz, és a sorrendjüket is átrendezheted. A widgetet használat előtt kapcsold be a UAE beállításai között (lásd [Widgetek ki- és bekapcsolása](https://hub.hellowp.io/hu/plugins/ultimate-elementor/altalanos-widgetek-ki-be/)).

A widget főbb képességei:

- szűrhető galéria kategóriákkal (lásd [Szűrhető képgaléria](https://hub.hellowp.io/hu/plugins/ultimate-elementor/media-kepgaleria-szurheto/));
- Instagram-szerű képhatások, normál és rámutatásos állapotban is;
- rács, mozaik, sorkizárt és körhinta elrendezés;
- méretezés rámutatáskor;
- feliratok a képen vagy rámutatáskor, és felirat a lightboxban a kép alatt;
- lightbox műveletekkel (nagyítás, megosztás, diavetítés, teljes képernyő, letöltés, galéria);
- egyéni link minden képhez;
- reszponzív oszlopszám.

![A Képgaléria widget szűrhető rácsos elrendezésben a weboldalon](./kepek/media-kepgaleria-szurheto-racs.webp)

*A Képgaléria widget szűrhető rácsos elrendezésben a weboldalon* (https://minta-bolt.hu/media-1-teszt/)

A képen a kategóriafülek és a rácsban megjelenő képek látszanak.

## Képek hozzáadása

1. Nyiss meg egy oldalt az Elementorral, és húzd a **Képgaléria** widgetet a kívánt helyre.
2. A **Tartalom** fül **Galéria** szakaszában kattints a galériamezőre, és válaszd ki a képeket a médiatárból. A képek sorrendjét húzással változtathatod meg.
3. Az **Elrendezés** listában válaszd ki a megjelenítés módját: **Rács**, **Masonry**, **Sorkizárt** vagy **Körhinta**.

## Elrendezések

| Elrendezés | Mit csinál |
|---|---|
| **Rács** | A képeket sorokba és oszlopokba rendezi. |
| **Masonry** | A képeket a méretük szerint oszlopokba illeszti, így nincs felesleges üres hely a képek között. |
| **Sorkizárt** | Egy sorban minden kép azonos magasságú, és a sorok kitöltik a rendelkezésre álló szélességet. |
| **Körhinta** | A képek csúsztatható sávban jelennek meg. |

![A Képgaléria rács, mozaik és sorkizárt beállításainak panelja](./kepek/media-kepgaleria-racs-panel.webp)

*A Képgaléria rács, mozaik és sorkizárt beállításainak panelja* (https://minta-bolt.hu/wp-admin/post.php?post=16&action=elementor)

A panelen az **Oszlopok** és a szűrhető galéria beállításai látszanak. Az oszlopszám külön megadható asztali gépre, tabletre és mobilra, így a galéria reszponzív.

A **Körhinta** elrendezésnél a **Körhinta** szakasz beállításaival a csúszka működését is szabályozhatod.

### Sorkizárt elrendezés

A **Galéria** szakaszban válaszd az **Elrendezés** listában a **Sorkizárt** értéket, majd add hozzá a képeket. A **Rács / mozaik / sorkizárt** szakaszban két további beállítás jelenik meg:

| Beállítás | Mit csinál |
|---|---|
| **Sormagasság** | A képek átméreteződnek és sorokba kerülnek, minden sor azonos magasságú. Itt állíthatod a sorok magasságát. |
| **Utolsó sor elrendezése** | Ha az utolsó sorba csak néhány kép jut, az rosszul mutathat. A **Sorkizárt** érték az egész sort kitölti, a **Nincs igazítás** (alapértelmezett) érték érintetlenül hagyja, az **Elrejtés** pedig eltünteti az utolsó sor képeit. |

![Sorkizárt képgaléria a weboldalon](./kepek/media-kepgaleria-sorkizart.webp)

*Sorkizárt képgaléria a weboldalon* (https://minta-bolt.hu/media-1-teszt/)

A képen az azonos magasságú sorok látszanak, az utolsó sor **Sorkizárt** értékkel kitöltve.

Ha a sorkizárt galériát szűrhetővé teszed, és a szűrőfülek alatt nem látsz képeket, ellenőrizd az **Utolsó sor elrendezése** értékét. Ha az **Elrejtés**, állítsd **Sorkizárt**ra.

## További lehetőségek

A **További lehetőségek** szakasz a galéria általános viselkedését szabályozza.

![A Képgaléria További lehetőségek szakasza](./kepek/media-kepgaleria-tovabbi-panel.webp)

*A Képgaléria További lehetőségek szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=16&action=elementor)

A képen a **Képfelbontás**, a **Kattintási művelet**, a **Rendezés** és a **Felirat megjelenítése** beállítás látszik.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Képfelbontás** | A galériában használt képméret. | Közepes |
| **Kattintási művelet** | Mi történjen, ha a látogató egy képre kattint: **Lightbox**, **Médiafájl**, **Csatolmányoldal**, **Egyéni link** vagy **Nincs**. | **Médiafájl** |
| **Hivatkozás célpontja** | **Ugyanabban az ablakban** vagy **Új ablakban** nyíljon meg a hivatkozás (csak médiafájl, csatolmányoldal és egyéni link esetén jelenik meg). | **Új ablakban** |
| **Rendezés** | A képek sorrendje: alapértelmezett vagy **Véletlen**. | Alapértelmezett |
| **Felirat megjelenítése** | **Soha**, **A képen** vagy **Rámutatáskor**. | **Soha** |
| **Kattintható felirat** | A feliratok is kattinthatók lesznek (ha van kattintási művelet és felirat is). | **Nem** |

## Feliratok

A képekhez felirat adható, amely a képen vagy rámutatáskor jelenik meg. A felirat lehet figyelemfelkeltő szöveg, tájékoztató leírás vagy navigációs szöveg is.

1. A **További lehetőségek** szakaszban válaszd a **Felirat megjelenítése** listában az **A képen** vagy a **Rámutatáskor** értéket.
2. Kattints a galériában egy képre a médiatár listájából (a galéria szerkesztése közben), vagy nyisd meg a kép szerkesztőoldalát a médiatárban.
3. A kép adatainál a felirat mezőt töltsd ki. Minden képnek külön felirata lehet.

![Feliratok a képeken a galériában](./kepek/media-kepgaleria-felirat.webp)

*Feliratok a képeken a galériában* (https://minta-bolt.hu/media-1-teszt/)

A képen minden kép alján megjelenik a hozzá megadott felirat.

A feliratot teljesen testre szabhatod a **Stílus** fül **Felirat** szakaszában: szöveg igazítása, függőleges illesztés, HTML-címke, tipográfia, szín, háttér és padding.

### Felirat a lightboxban

A lightboxban a felirat a kép alatt is megjeleníthető. Kapcsold be a **Tartalom** fül **Lightbox** szakaszában a **Felirat megjelenítése a kép alatt** kapcsolót. Itt a feliratnak tipográfiát, színt és a kép alatti térközt (**Felirat alsó térköze**) állíthatsz. A **Lightbox** szakasz csak akkor látszik, ha a **Kattintási művelet** értéke **Lightbox**.

## Lightbox

Ha a **Kattintási művelet** **Lightbox**, a látogató egy képre kattintva nagyobb nézetben látja a képet.

![A Képgaléria Lightbox szakasza](./kepek/media-kepgaleria-lightbox-panel.webp)

*A Képgaléria Lightbox szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=16&action=elementor)

A képen a **Lightbox műveletek** mező három kiválasztott művelettel, a **Felirat megjelenítése a kép alatt** és az **Ismétlés** kapcsoló látszik.

A **Lightbox műveletek** mezőben a következők közül választhatsz többet is:

- **Zoom**: a kép nagyítása;
- **Közösségi megosztás**: a kép megosztása;
- **Diavetítés**: a képek automatikus léptetése;
- **Teljes képernyő**: a kép teljes képernyős megnyitása;
- **Letöltés**: a kép letöltése;
- **Galéria**: az összes kép bélyegképes listája.

A kiválasztott műveletek a lightbox jobb felső sarkában jelennek meg. Az **Ismétlés** kapcsolóval végtelenné teheted a galériában a lapozást.

## Egyéni link a képhez

A galéria képei külön weboldalra is mutathatnak: a látogató a képre kattintva a megadott címre jut.

1. A **Tartalom** fül **További lehetőségek** szakaszában állítsd a **Kattintási művelet** értékét **Egyéni link**re.
2. Szükség esetén a **Hivatkozás célpontja** listában válaszd ki, hogy a link új ablakban vagy ugyanabban az ablakban nyíljon meg.
3. Nyisd meg a médiatárban a képet (a kép szerkesztőoldalát, vagy a galéria szerkesztése közben a médiatár ablakát), és töltsd ki az **UAE - egyéni link** mezőt a kívánt címmel.
4. Frissítsd vagy tedd közzé az oldalt.

![A médiatár képének szerkesztőoldala az UAE egyéni link és kategória mezőivel](./kepek/media-kepgaleria-melleklet-mezok.webp)

*A médiatár képének szerkesztőoldala az UAE egyéni link és kategória mezőivel* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=edit)

A kép adatai alatt az **UAE - egyéni link** és az **UAE - kategóriák (pl.: Cat1, Cat2)** mező látszik.

Minden képhez más-más link adható.

## Képek testreszabása: méretezés, átlátszatlanság, hatások

A **Stílus** fül **Bélyegkép** szakaszában a galéria képeinek megjelenését állíthatod. A beállítások a galériában látható bélyegképekre vonatkoznak, és külön fülön, **Normál** és **Rámutatás** állapotra is megadhatók.

![A Képgaléria Bélyegkép stílusszakasza](./kepek/media-kepgaleria-belyegkep-panel.webp)

*A Képgaléria Bélyegkép stílusszakasza* (https://minta-bolt.hu/wp-admin/post.php?post=16&action=elementor)

A képen a **Normál** és **Rámutatás** fül, valamint a **Méretezés**, az **Átlátszatlanság (%)**, a **Képhatás** és a **Fedvény színe** beállítás látszik.

| Beállítás | Mit csinál |
|---|---|
| **Méretezés** | A kép rámutatáskor nagyobbra nő, majd a kurzor elhagyásakor visszaáll. |
| **Átlátszatlanság (%)** | A galéria összes képének átlátszatlansága. |
| **Képhatás** | Instagram-szerű szűrők. A szűrő az eredeti képre és rámutatáskor is alkalmazható. |
| **Fedvény színe** | A képek fölé kerülő fedvény színe. |
| **Átfedő réteg lekerekítése** | A fedvény sarkainak lekerekítése. |
| **Keretsugár** | A bélyegképek sarkainak lekerekítése. |

### Ikon vagy kép rámutatáskor

A **Rámutatás** fülön a képre mutatva egy ikon vagy egy kép is megjelenhet a fedvényen:

1. A **Stílus** fül **Bélyegkép** szakaszában kattints a **Rámutatás** fülre.
2. Állítsd be a **Fedvény színe** értéket, hogy az ikon jól látsszon.
3. Az **Átfedés ikonja** mezőben válaszd a **Kép** vagy a **Betűalapú ikon** lehetőséget.
4. **Betűalapú ikon** esetén válaszd ki az ikont az **Átfedő ikon kiválasztása** mezőben, majd szükség szerint állítsd az **Az átfedés ikonjának színe** és az **Átfedés ikonjának mérete** értékét.
5. **Kép** esetén tölts fel egy képet az **Átfedő kép** mezőben, és állítsd be az **Átfedő kép szélessége** értékét.