LightBox系スクリプトを過去記事にも自動的に適用

改造人ツクルダー

既存のブログに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のエラい人がこんなスクリプトを教えてくれた。

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"
});
});


これをLightBox本体か、ブログのHTMLテンプレートへ記述すればOK♪

上記スクリプトの場合、「id="entry"」内の画像リンクすべてに、「rel="lightbox"」属性が自動的に付与され、LightBoxが適用されます。

改造人ツクルダー