Fancybox na Blogger.com

Jak jsem se onehdy svěřil v příspěvku Lightbox pro jQuery, nadchl jsem se pro Fancybox. A nadchl jsem se také pro jQuery, kteroužto js knihovnu Fancybox používá. Rozhodl jsem se tedy použít Fancybox na tomto blogu běžícím na blogger.com, protože mi tu podobná funkce chybí. K mému překvapení jsem takový widget, modyl nebo i jen návod, jak na to, nenašel. Dohledal jsem "jen" návody pro (originální) Lightbox How to add Lightbox effect to Blogger, Light Box Image Viewer For Blogger a Lightbox v2.04 Integration with Blogger Template (to jsou ty funkční), ze kterých jsem ale inspiraci pochopitelně načerpal.

Jak tedy integrovat Fancybox na blogger.com? Nejdříve si někam na web uložte scripty a styly s obrázky Fancyboxu. Odtud si je budete do stránek blogu nasosávat.

Potom je potřeba do šablony do html hlavičky (před tag </head>) vložit nasosnutí scriptů a stylů potřebných pro Fancybox. Editace šablony se provádí v "Návrh" -> "Upravit HTML":

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>
<script src='http://VASE.ULOZISTE/fancybox/jquery.mousewheel-3.0.4.pack.js' type='text/javascript'/>
<script src='http://VASE.ULOZISTE/fancybox/jquery.easing-1.3.pack.js' type='text/javascript'/>
<script src='http://VASE.ULOZISTE/fancybox/jquery.fancybox-1.3.3.pack.js' type='text/javascript'/>
<link href='http://VASE.ULOZISTE/fancybox/jquery.fancybox-1.3.3.css' media='screen' rel='stylesheet' type='text/css'/>


Mně se moc líbí ty gumové efekty i přepínání obrázků galerie kolečkem myši, jinak by bylo scriptů o dva méně.

Nicméně ještě je třeba přidat do hlavičky, těsně za nasosnutí scriptů, vlastní spuštění Fancyboxu:

<script type='text/javascript'>
$(document).ready(function(){
   $("a[href$=.jpg],a[href$=.JPG],a[href$=.png],a[href$=.PNG],a[href$=.gif],a[href$=.GIF],a[href$=.bmp],a[href$=.BMP]").fancybox();
});
</script>


Fancybox by šlo zavěsit na odkazy i jinak, ale takto mi to přišlo optimální. Stále mi to ovšem bylo málo! Chtěl jsem, aby se z obrázků u jednoho příspěvku dělala "galerie", a chtěl jsem také, aby se u obrázků vypisoval titulek. Také jsem ošetřil odkaz na obrázky nahrané přímo "do blogu". K tomu jsem využil jQuery a místo předchozího vložil kód tento:

<script type='text/javascript'>
$(document).ready(function(){
   $("a[href$=.jpg],a[href$=.JPG],a[href$=.png],a[href$=.PNG],a[href$=.gif],a[href$=.GIF],a[href$=.bmp],a[href$=.BMP]").each(function(){
        var pu = $(this).parentsUntil('.post-outer');
        var pid = pu.find("a[name]").first().attr("name");
        $(this).attr("rel",pid);
        var pt = pu.find(".post-title a").text();
        var pat = $(this).attr("title");
        $(this).attr("title",pt+(pat?" - ":"")+pat);
        this.href = this.href.replace("\/s1600-h\/","\/s1600\/");
        $(this).fancybox();
   });
});
</script>


Pak jsem přidal ještě několik parametrů pro Fancybox, ale to už si upravte sami ;-)

V rámci výše zmíněného hledání jsem našel i návody Host Javascript File for Free a How to Host Javascript for Blogger, které ale tentokrát nebyly k využití.

P.S.: Zjistil jsem, že novější šablony nedělají odkaz na titulku při zobrazení postu - pak je třeba pro správnou funkci doplňování "title" k obrázkům vyhledávat místo ".post-title a" pouze ".post-title"