既存ブログに「後から」jQuery lightbox pluginを組み込む。

lightboxは、新規ブログの機能として組み込む機会よりも、既存ブログに後から組み込む機会の方が多いと思います。本日は「既存ブログに「後から」jQuery lightbox pluginを組み込む。」についてです。

こんにちは。猫ITソリューションズ広報の齊藤メイ（♀）です。
本日は、「既存ブログに「後から」jQuery lightbox pluginを組み込む。」についてです。

このjQuery lightbox pluginを既存ブログに導入するために、既存ブログの全ての記事に修正を加える必要はありません。以下のように記述すればOKです。

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.6.2");
  google.load("jqueryui", "1.8.9");
</script>
<script src="/jquery-lightbox/js/jquery.lightbox-0.5.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/jquery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
  $(function(){
    $('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]').addClass("lightbox");
    $('#n-base-entry a.lightbox').lightBox();
  });
</script>

google.load("jquery", "1.6.2");

google.load("jqueryui", "1.8.9");

</script>

$(function(){

$('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]').addClass("lightbox");

$('#n-base-entry a.lightbox').lightBox();

});

</script>

手法は他にもありますが、今回は、
既存ブログ記事のリンクにおいて拡張子をjpg/gif/pngに指定しているa要素に、jQueryのaddClassによりlightboxクラスを追加し、lightboxを実行させています。

これで楽にlightboxによる少しリッチなUIをユーザーに提供できますね。