既存のブログにLightBox系プラグインを設置したい〜
jQuery版ならば簡単に設置できるけど、画像へリンクしている<a>タグの属性を設定しなくてはならないことがある。
例えば、
LightBoxの場合：
<a href=”http://XXXXX.com/img/hogehoge.jpg” rel=”lightbox”>
ThickBoxの場合：
<a href=”http://XXXXX.com/img/hogehoge.jpg” class=”thickbox”>
これをブログの過去記事に遡ってすべて書き換えるなんてイヤだ！無理！！
今後記事を書く時にも、いちいち属性指定するのを忘れてしまいそうだし。
するとWebのエラい人がこんなスクリプトを教えてくれた。
[codesyntax lang=”javascript” title=”jQuery”]
$(function(){
$('#entry a[href$=".jpg"],#entry a[href$=".jpeg"],#entry a[href$=".JPG"],#entry a[href$=".JPEG"],#entry a[href$=".png"],#entry a[href$=".PNG"],#entry a[href$=".gif"],#entry a[href$=".GIF"]').attr({ rel: "lightbox" });
});
[/codesyntax]
これをLightBox本体か、ブログのHTMLテンプレートへ記述すればOK♪
上記スクリプトの場合、「id=”entry”」内の画像リンクすべてに、「rel=”lightbox”」属性が自動的に付与され、LightBoxが適用されます。