Körhinta és Képgaléria elem

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.

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.

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.