Texy!, jQuery a Lightbox

Všichni to znáte – kliknete na náhled obrázku a zobrazí se vám na popředí obrázek v plné velikosti. Tento javascript je (asi podle názvu prvního takového skriptu – ovšem můžu se mýlit) obecně znám Lightbox. Pokud používáte Texy!, mohlo by vám jeho zprovonění dělat těžkosti…

Zde a na pdb jsem řešil tento styl zobrazování velkých obrázků z jejich náhledů. Ono je to celkem jednoduché – na stránky si natáhnete javascript nějakého Lighboxu (srovnávací tabulka Lightboxů, výčet 30+ lightboxů a např. pomocí css stylu lightbox u tagu A (který je okolo obrázku náhledu) je vše připraveno:

Cíl

příklad html kódu

<a href="velky-obrazek.png" class="lightbox">
  <img src="nahled-velkeho-obrazku.png">
</a>

živá ukázka

Postup

Zde (a obecně na lsblogu) však používám formátovač textu Texy!, kde sice můžu použít html kód, ale obrázky se definují prostě jinak:

Texy! – jednoduchý obrázek (osvěta)

[* nahled-velkeho-obrazku.png *]
nebo
[* velky-obrazek.png *]

Texy! – náhled ukazující na plný obrázek

[* nahled-velkeho-obrazku.png *]:[* velky-obrazek.png *] .<>

(tečka, menšítko a většítko vše uzavřou do tagu DIV s vycentrovaný obsahem)

což nám Texy! převede na tento html kód

<div style="text-align:center">
    <a href="./velky-obrazek.png" onclick="return !popupImage(this.href)">
         <img src="./nahled-velkeho-obrazku.png" alt="" />
     </a>
</div>

přidání css tříd pomocí jQuery a načtení Lightboxu

Do Texy! kódu by samožřejmě šlo doplnit třídu css lightbox ručně (ačkoli teď nevím jak). Abych tuto operaci nemusel podstupovat při každém novém obrázku/blogpostu, použiju na tento úkon javascript – knihovnu jQuery.

$(document).ready (function() {
    // projdu vsechny odkazy v urcenem tagu
    $(".clanek div a").each(function(){
        // zjistim na co ukazuji
        var targetUrl = $(this).attr("href");
        // pokud ukazuji a obrazky
        if (targetUrl.substr(-3) == "jpg"
            || targetUrl.substr(-3) == "png") {
            // pripadne dodat dalsi pripony
            // pridam tridu lightbox
            $(this).addClass("lightbox");
            // a pro retezeni jeste atribut rel=lightbox
            $(this).attr("rel","lightbox");
        }
    })

    // spustim lightbox
    $(".lightbox").lightbox();
});

Zkrácená verze (z komentářů: thx Kahi)

$(document).ready (function() {

    // pridam patricnym odkazum tridu lighbox a rel lightbox
    $('a[href$=.png], a[href$=.gif], a[href$=.jpg]', '.clanek div').addClass('lightbox').attr('rel', 'lightbox');

    // spustim lightbox
    $(".lightbox").lightbox();

});

(nezkoušeno)

V tomto případě se mi po načtění celé HTML články zkontrolují všechny odkazy (tag A) v elementu s css třídou .clanek. (Já zde mám ještě pod DIV.clanek jeden DIV, tak si to upřesňuji.)
A pokud odkaz vede na obrázek (poslední 3 znaky jsou JPG nebo PNG – možno upravit…), přidá se tomuto tagu A třída lightbox.

To, že přidávám i atribut rel s hodnotou lightbox pak umožní retězit tyto obrázky za sebe – a je tak možné se dostat na další/předchozí přes klik na okraj (pravý=další, levý=předchozí) obrázek v řadě.

dostaneme tento HTML výsledek:

<div style="text-align: center;">
    <a onclick="return !popupImage(this.href)" href="./velky-obrazek.png" class="lightbox" rel="lightbox">
        <img alt="" src="./nahled-velkeho-obrazku.png"/>
    </a>
</div>

použití v praxi

Jak to funguje můžete zkouknout např. na PDB ve článku o čtečce YBook nebo zde na článku o Battle for Wesnoth

Poznámka

Výše napsaný JS kód samozřejmě samostatný a nemá s Texy! nic společného, takže jej můžete použít na jakémkoli webu, kde odkazujete na obrázky a chcete je otevírat v Lighboxu.

Zdroje pro zprovoznění:

• Texy!
• jQuery
• Lightbox pro jQuery – já zde používám ten od Warrena Krewenkiho ale můžete si zkusit i jinou verzi – Leandra Vieiry Pinha