# Körhinta és Képgaléria elem

> A Körhinta elem (képek vagy bejegyzések húzható csúszkán, nyilak, pontok, átfedés) és a Képgaléria elem (rács, masonry, metro elrendezés, lightbox).

## Körhinta elem

A **Körhinta** elem képeket vagy bejegyzéseket jelenít meg húzással lapozható körhintában, testreszabható navigációval és hatásokkal. A Swiper könyvtárat használja.

![A Körhinta elem beállításai a szerkesztőben](./kepek/elemek-5-carousel.webp)

*A Körhinta elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Típus** (**Média**), a **Képek** kiválasztása, a **Dinamikus adatok** mező, alatta a **Beállítások**, **Kép**, **Nyilak** és **Pontok** csoport látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Típus** | A tartalom típusa: **Média** (képek) vagy **Bejegyzések**. | Média |
| **Képek** | A körhintába kerülő képek. Csak a Média típusnál jelenik meg. | |
| **Lekérdezés** | Melyik bejegyzések jelenjenek meg. Csak a Bejegyzések típusnál jelenik meg. | |

### Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Adaptív magasság** | A magasságot a tartalomhoz igazítja. | Ki |
| **Magasság** | A körhinta fix magassága. Adaptív magasságnál nem érhető el. | 300px |
| **Térközök** | A diák közti távolság képpontban. | 0 |
| **Kezdő dia** | A kezdő dia sorszáma. | 0 |
| **Megjelenítendő elemek száma** | Hány dia látszik egyszerre. Töréspontonként állítható. | 2 |
| **Görgetendő elemek száma** | Hány diát lépjen egy lapozás. Töréspontonként állítható. | 1 |
| **Hatás** | Az átmenet hatása: `slide`, `fade`, `cube`, `coverflow`, `flip`. | `slide` |
| **Elemek igazítása** | A diák függőleges igazítása. Csak adaptív magasságnál jelenik meg. | |
| **Ismétlés** | Végtelen ciklus. | Be |
| **Középre igazított mód** | Az aktív diát középre igazítja. | Ki |
| **Késleltetett betöltés kikapcsolása** | Az összes képet azonnal betölti. | Ki |
| **Automatikus lejátszás** | Automatikus lapozás. | Ki |
| **Szüneteltetés rámutatáskor** | Rámutatáskor megállítja az automatikus lapozást. | |
| **Leállítás az utolsó dián** | Az utolsó diánál leállítja az automatikus lapozást. | |
| **Automatikus lejátszás késleltetése ms-ben** | A diák közti várakozás ezredmásodpercben. | 3000 |
| **Animáció sebessége ms-ben** | Az átmenet sebessége ezredmásodpercben. | 300 |

### Kép

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Kép elrejtése** | Elrejti a képeket a bejegyzés-körhintákban. | |
| **Képméret** | A képek mérete. | |
| **Link a lightboxhoz** | A képeket lightboxban nyitja meg. Csak a Média típusnál. | |
| **Képméret** (lightbox) | A lightboxban látható képek mérete. | |
| **Képre kattintás művelete** | Mi történjen kattintáskor: `zoom`, `zoom-or-close`, `toggle-controls`, `next`, `close`. | `zoom` |
| **Animáció** | A lightbox animációja. | `zoom` |
| **Felirat** | Képfeliratok a lightboxban. | |
| **Bélyegkép-navigáció** | Bélyegképes navigáció a lightboxban. | |
| **Bélyegkép mérete** | A bélyegképek mérete. | 60px |
| **Kitöltés** | A lightbox belső távolsága képpontban. | |

### Mezők (bejegyzés-körhintához)

A **Mezők** ismétlődő mezőben azt állítod be, hogy a bejegyzések mely mezői jelenjenek meg. Minden mezőnek ezek a beállításai vannak:

| Mező | Mit csinál |
| --- | --- |
| **Dinamikus adatok** | Dinamikus adatcímke, például `{post_title:link}` vagy `{post_excerpt:20}`. |
| **HTML-címke** | A mező HTML-címkéje: `div`, `p`, `h1` és `h6` között. Alapérték: `div`. |
| **Szélesség** | A mező szélessége. |
| **Margó**, **Kitöltés** | A mező külső és belső távolsága. |
| **Háttérszín** | A mező háttérszíne. |
| **Szegély** | A mező szegélye. |
| **Tipográfia** | A mező szövegstílusa. |
| **Átfedés** | A mező átfedésként jelenik meg a képen. |

### Tartalom

| Beállítás | Mit csinál |
| --- | --- |
| **Igazítás** | A tartalom igazítása kilenc pozíció egyikébe (fent, középen, lent × balra, középre, jobbra). |
| **Min. magasság** | A tartalom legkisebb magassága. |
| **Margó**, **Kitöltés** | A tartalomburok külső és belső távolsága. |
| **Háttérszín** | A tartalomburok háttérszíne. |

### Átfedés

| Beállítás | Mit csinál |
| --- | --- |
| **Megjelenítés rámutatáskor** | Az átfedés csak rámutatáskor látszik. |
| **Előtűnési animáció** | Az átfedés animációja: `fade-in-up`, `fade-in-right`, `fade-in-down`, `fade-in-left`, `zoom-in`, `zoom-out`. |
| **Igazítás** | Az átfedés igazítása kilenc pozíció egyikébe. |
| **Margó**, **Kitöltés** | Az átfedés külső és belső távolsága. |
| **Háttérszín**, **Belső háttérszín** | Az átfedés és a belső rész háttérszíne. |

### Nyilak

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Nyilak megjelenítése** | Megjeleníti a lapozónyilakat. | Be |
| **Magasság**, **Szélesség** | A nyílgombok mérete. | 50px |
| **Háttér** | A nyílgombok háttérszíne. | |
| **Szegély** | A nyílgombok szegélye. | |
| **Tipográfia** | A nyílgombok szövegstílusa. | |

Az **Előző nyíl** és a **Következő nyíl** külön csoportban állítható: mindkettőnél van **Ikon** (alapból `ion-ios-arrow-back`, illetve `ion-ios-arrow-forward`), valamint a pozíciót megadó **Fent**, **Jobbra**, **Lent** és **Balra** mező. Az előző nyíl alapból 50% fent és 50px balra áll.

### Pontok

| Beállítás | Mit csinál |
| --- | --- |
| **Pontok megjelenítése** | Megjeleníti a lapozópontokat. |
| **Dinamikus pontok** | Dinamikus jelölőpontos lapozás. |
| **Függőleges** | A pontokat függőlegesen jeleníti meg. |
| **Magasság**, **Szélesség** | A pontok mérete. |
| **Fent**, **Jobbra**, **Lent**, **Balra** | A pontok tárolójának pozíciója. |
| **Szegély** | A pontok szegélye. |
| **Szín** | Az inaktív pontok színe. |
| **Aktív szín** | Az aktív pont színe. |
| **Margó** | Az egyes pontok körüli térköz. Alapérték: 0px fent, 5px jobbra, 0px lent, 0px balra. |

## Képgaléria elem

A **Képgaléria** elem képek gyűjteményét jeleníti meg különféle elrendezésekben, opcionális lightboxszal.

![A Képgaléria elem beállításai a szerkesztőben](./kepek/elemek-5-image-gallery.webp)

*A Képgaléria elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a **Képek** kiválasztása, a **Dinamikus adatok** mező, a képméret, majd az **Elrendezés**, az **Oszlopok**, a **Térközök**, a **Kép magassága**, a **Képarány**, a **Képaláírás** és a **Link célja** mező látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Képek** | A galéria képeinek kiválasztása és feltöltése. | |
| **Elrendezés** | A galéria elrendezése: **Rács** (`grid`), `masonry` vagy `metro`. | Rács |
| **Oszlopok** | Az oszlopok száma a rácsban, legalább 2. Metro elrendezésnél nem érhető el. | 3 |
| **Térközök** | A képek közti távolság. | 0 |
| **Kép magassága** | A képek fix magassága. Masonry és metro elrendezésnél nem érhető el. | |
| **Képarány** | A képek képaránya, például `4/3`, `16/9`, `1/1`. Masonry és metro elrendezésnél nem érhető el. | |
| **Képaláírás** | Megjeleníti a képaláírásokat. | |
| **Link célja** | A képek linkje: lightbox, csatolmányoldal, médiafájl vagy egyéni URL. | Nincs |
| **Egyéni linkek** | Képenként egyéni URL. Csak „egyéni URL" választásnál jelenik meg. | |

### Lightbox

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Képméret** | A lightboxban látható képek mérete. | Teljes |
| **Képre kattintás művelete** | Mi történjen kattintáskor: `zoom`, `zoom or close`, `toggle controls`, `next`, `close`. | `zoom` |
| **Animáció** | A lightbox átmeneti animációja. | |
| **Felirat** | Képfeliratok a lightboxban. | |
| **Bélyegkép-navigáció** | Bélyegképes navigáció. | |
| **Bélyegkép mérete** | A bélyegképek mérete. | 60px |
| **Kitöltés (px)** | A lightbox körüli belső távolság. | |
| **Lightbox: ID** | Az azonos azonosítójú képek ugyanabba a lightboxba kerülnek. | |
| **Lekérési prioritás** | A képbetöltés prioritása: `high`, `low`, `auto`. | |