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

改造人ツクルダーjQuery, web制作, WordPress, 備忘録

既存のブログに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が適用されます。