Texy!, jQuery a Lightbox … 3tecky.cz

Texy!, jQuery a Lightbox

Sdílet

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
===

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

Postup
***

Zde (a obecně na \"lsblogu\":http://blog.3tecky.cz/tag/lsblog) však používám formátovač textu \"Texy!\":http://texy.info/, 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();
});
\\---

Zkrcenverze (z komentthx \"Kahi\":http://kahi.cz/blog/)
$(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 ppadse mi po natncelHTML člnky zkontrolujvechny odkazy (tag A) v elementu s css tdou //.clanek//. (Já zde mám ještě pod //DIV.clanek// jeden //DIV//, tak si to upřesňuji.)
 A pokud odkaz vede na obrzek (posledn3 znaky jsou JPG nebo PNG - mono upravit...), pidse tomuto tagu A tda //lightbox//.

To, že pidvm 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 vsledek:
===
<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\":http://pdb.3tecky.cz/21-ybook nebo zde na článku o \"Battle for Wesnoth\":http://blog.3tecky.cz/34-tahova-strategie-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!\":http://texy.info/cs/download
* \"jQuery\":http://jquery.com/
* Lightbox pro jQuery - já zde používám ten od \"Warrena Krewenkiho\":http://warren.mesozen.com/jquery-lightbox/ ale můžete si zkusit i jinou verzi - \"Leandra Vieiry Pinha\":http://leandrovieira.com/projects/jquery/lightbox/
tagy: ,
Publikováno: 15.07.2009 00:32
Knedle

Související články

blog comments powered by Disqus
Počet komentářů k tématu: 2

Ten jQuery kód se dá myslím napsat poměrně jednodušeji. $(\'a[href$=.png], a[href$=.gif], a[href$=.jpg]\', \'.clanek div\').addClass(\'lightbox\').attr(\'rel\', \'lightbox\');

Reakce: #2 knedle
#2 knedle

#1 kahi: diky za tuto zkracenou verzi, $= jsem dosud neznal

pridam to do kodu jako zkracenou variantu