Blog v pavučině

Na webu najdeme několik služeb, které nám vytvoři náhledový obrázek (thumbnail) na základě URL dané stránky zadané jako parametr při volání určité URL „náhledovací“ služby. Zadat můžete obvykle jednu z několika velkostí thumbnailu.
Například služba SnapCasa zobrazí při volání

http://snapcasa.com/Get.aspx?code=1013&size=m&url=http://pavucina.webmark.cz

náhled úvodní stránky tohoto blogu (code=1013 je id registrovaného uživatele).

Snap.com

Pokud chcete zobrazovat náhled webu při najetí na odkaz a nechcete nic programovat, můžete využít Snap.com. Nevýhodou této služby je zobrazování reklam a minimální možnost nastavení bubliny s náhledem. Výhodou naopak může být možnost zobrazení obsahu RSS kanálu odkazované stránky.

Další „tvořiče náhledů“

• ShrinkTheWeb
• iWebtool Thumbnails
• Picoshot
• thumbalizr

Podrobnější popis těchto služeb najdete v článku 5 Easy Ways To Generate Thumbnails.

Jak udělat vlastní „bublinu“ s obrázkem?

Pokud chcete po najetí myší nad odkaz zobrazovat náhled webu, ale nelíbí se vám bublina, kterou standardně zobrazuje služba, kterou jste si vybrali (třeba iWebtool Thumbnails) nebo služba vůbec nenabízí žádný javascript skript pro zobrazení bubliny (třeba SnapCasa), můžete si bublinu vytvořit sami vcelku snadno s použitím nějakého jQuery tooltip pluginu (např.: clueTip, SimpleTooltip, jTip). Stačí jako obsah bubliny (zobrazované po najetí myší nad odkaz), resp. jako title atribut odkazu vložit <img src="" /> tag obrázku s náhledem odkazované stránky.
Pokud použijete plugin clueTip a službu SnapCasa, může být použití následující (výsledek si můžete prohlédnout na http://pecka.na­me):

$("a[@href^='http://']").each(
        function(i) {
                $(this).attr("title","<img src='http://SnapCasa.com/Get.aspx?code=1013&size=m&url="+$(this).attr("href")+"' />");
                $(this).cluetip({splitTitle: '|', width: '200px', showTitle: false, dropShadow: false, fx: { open: 'fadeIn', openSpeed: '1' } });
        }
);

Uvedený kód zobrazí clueTip bublinu u všech odkazů, které začínají na http:// a jako obsah bubliny zobrazí náhled odkazované stránky získaný ze SnapCasy. Vizuální vzhled bubliny pak můžete nastavovat libovolně pomocí CSS pro clueTip.