Képek megjelenítése

A sablonban a Téma beállítása --> FancyBox támogatás bekapcsolásával betöltődik a szükséges függvénykönyvtár, mely a tartalmak popup megjelenítését szolgáltatja.

A tartalomban a popup ablakban történő megjelenítést a link számára a class="fancybox" osztály megadásával lehet előírni, azaz:

<a class="fancybox" href="<big-image-source>" data-caption="<image-title>">
     <img src="<image-source>" />
</a>

Felugró ablakban fogja megjeleníteni a képet. Ezen túlmenően a class="popup" osztály automatikusan ilyenné alakítja a képeket az alábbiak szerint:

Ez egy minta kép

Forráskódban:
<img class="popup thumbnail" style="..." src="<image-source>" alt="<image-title>" />

Átalakítva:
<a class="fancybox" href="<image-source>" data-caption="<image-title>" >
     <img class="thumbnail" style="..." src="<image-source>" alt="<image-title>" />
</a>

Fontos észrevenni, hogy ugyanazt a képet jeleníti meg, de a kép eredeti osztályai nélkül!


Fentieken túlmenően a téma támogatja, hogy a képeket galériába szervezve jelenítse meg az oldal. Ebben az esetben a data-fancybox="gallery" attributumot kell megkapniuk a linkeknek. Így a képek között lapozgatni tud a felhasználó.

Például:
<a data-fancybox="gallery" href="<big-image1-source>" data-caption="<image1-title>">
     <img src="<image1-source>" />
</a>
<a data-fancybox="gallery" href="<big-image2-source>" data-caption="<image2-title>">
     <img src="<image2-source>" />
</a>