Mojezáliby.cz
Kategorie: Tvorba Webu

Díl 4. přidáváme Lightbox

Jak se náš ukázkový web postupně mění a rozrůstá, jistě jste si všimli, že přibývá i obrázků a od minulého dílu jsou i na samostatné stránce galerie. Stále se však po rozkliknutí otevírají v novém okně, což není příjemné a nepůsobí dobře. Proto si dnes ukážeme jak přidat do stránek javascript a konkrétně tedy Lightbox, který slouží pro zobrazování obrázků.

Na záčátku se podíváme na minule vytvořenou stránku galerie. Hned na první pohled jsou fotky neuspořádané a po kliknutí se otvírají v novém okně což nevypadá hezky. S tím nám může pomoci v úvodu zmíněný Lightbox (odkaz). Ten slouží pro pěkné zobrazování fotek v okně nad stránkou. Nejlépe to uvidíte již na dnešní výsledné ukázce zde. Existuje i spousta různých modifikací tohoto skriptu, postup pro přidání je obvykle velmi podobný.

Budeme postupovat podle návodu přímo na stránkách Lightboxu. Stáhneme si balíček s lightboxem, rozbalíme a nakopírujeme do adresáře webu. Poté přidáme do hlavičky (head) následující řádky:

img

Jak vidíme, první tři načítají skripty umístěné ve složce "js", poslední načítá css styl pro vzhled lightboxu.

 

Nyní již stačí jen k odkazu (a href) který obaluje miniatury obrázků připsat do vlastností rel="lightbox" a neuvádět vlastnost target, kterou jsem měl v předcházejících příkladech použitou. Nyní se miniatura obrázku po kliknutí otevře právě v Lightboxu. Pokud chceme dát fotky do série, aby šlo mezi nimi přímo v lightboxu přepínat a přecházet kurzorem stačí uvést název série do hranatých závorek u parametru např. rel="lightbox[serie]", na stejné stránce lze mít různé série. U obrázků jsou zobrazovat i popisky, zvolený text stačí uvést u odkazu v parametru "title".

Poslední provedenou změnou je obalení všech obrázků css identifikátorem #galerie a přidání definice tagu #galerie img {height: 150px;} díky tomu mají všechny obrázky uvnitř identifikátoru stejnou velikost 150px, což vypadá lépe (v předchozích příkladech jsem měl u obrázků přímo atribut width=200px ten je již nyní zbytečný a lepší se jevilo mít obrázky ve stejné výšce).

Udate 19.7.2013: V současné verzi (v2.6) došlo k drobným změnám - do hlavičky se zapisuje

<script src='js/jquery-1.10.2.min.js'></script>
<script src='js/lightbox-2.6.min.js'></script>
<link href='css/lightbox.css' rel='stylesheet' />

A ve vlastnostech odkazu má nyní být

data-lightbox="roadtrip"

Starší "rel=" sice také funguje, ale v HTML5 není validní.

Vydáno: 21.3.2012 8:15 | 
Přečteno: 3415x

Hodnocení:

Komentáře rss


Nebyly přidány žádné komentáře.



© 2018 Mojezáliby.cz

SunLight CMS | Admin