WordPress návody

Jak zobrazovat obrázky pomocí Lightboxu

Autor příspěvku Tomáš Cirkl

Obrázky tvoří základní kámen stránek. Pomáhají upoutat čtenáře a udržet ho tak na stránkách.

Většinou se do těla stránky velké obrázky nevejdou a tak k jejich zvětšení dochází až po kliknutí na ně.

V základním nastavení umožňuje WordPress zobrazit větší obrázek jako samostatný soubor, ale to není příliš dobré, protože si tím odvádíte čtenáře z článku pryč a ti se musí vracet kliknutím na tlačítko zpět v prohlížeči.

Dobrým řešením je zobrazením větší obrázku pomocí Lightboxu, který se upraví velikosti čtenářově monitoru.

Lightbox je javascriptová aplikace k zobrazování fotografií nebo obrázků.
Funguje tak, že po kliknutí na obrázek se otevře fotografie ve větším rozlišení.
Používá se především ve web galeriích a dalších stránkách zaměřených na prezentaci fotografií nebo obrázků.

Jak nastavit Lightbox pro WordPress stránku si ukážeme v následujícím návodu.

Lightbox a WordPress

Nejprve si nainstalujte plugin Responsive Lightbox by dFactory. Pluginů, které zajišťují tuto funkci je celá řada, takže pokud vám tento nebude vyhovovat, zkuste jiný. Já však budu v návodu pokračovat s tímto.

Po jeho aktivaci běžte do Nastavení -> Responsive Lightbox, kde najdete jeho nastavení. Pokud chcete můžete tento krok přeskočit a plugin rovnou používat.

Nastavení Responsive Lightbox

Nastavení Responsive Lightbox

Jak můžete vidět na obrázku, nastavení pluginu je v češtině. Upravte si jej tedy tak, aby vám to vyhovovalo a nezapomeňte přepnout na záložku Nastavení lightboxu, kde můžete nastavit velikost zvětšených obrázků.

Pokud poté kliknete na obrázek co máte v příspěvku.

Obrázek v těle příspěvku

Obrázek v těle příspěvku

Tak se zobrazí lightbox.

Zobrazený obrázek v lightboxu

Zobrazený obrázek v lightboxu

Plugin funguje jak u samostatných obrázků tak u WordPress galerií.

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

5 komentářů

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!