自前のWebアプリにLightbox風のjQueryプラグイン、Colorboxを導入してみた

この間、といっても先月の頭のことだけど、昔作った CGI プログラムを手を入れた、という話とちょろっとだけした(そのときのエントリの話題は CGI プログラムそのものじゃなくて markdown と RDiscount)。
で、今日はその CGI プログラムに Colorbox という Lightbox 風の jQuery プラグインを導入してみたので、そのメモ。
Lightbox 風のプラグインて数え切れないほどあるけど、はっきり言ってどれがいいのやらよくわからない。なのでたまたま最初のほうに出てきた Colorbox が悪くなさそうだったので使ってみた、というわけ。
Colorbox のサイトはここ。

 cf. Colorbox – a jQuery lightbox

参考にしたのはこのページ。

 cf. Lightbox風のjQueryプラグインColorBoxの使い方 – bl6.jp

基本的には上に書いたページに沿ってやっただけで、特別なカスタマイズはしてない。

まずは、スクリプトとスタイルシートを CGI のフォルダの下に js というフォルダを作って配置する。
で、表示に使うテンプレートのほうで読み込みと設定をすればいい。読み込む部分はこう。

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel='colorbox']").colorbox();
    });
 </script>

これは <head> 要素の中に書いた。これで rel 属性が ‘colorbox’ の <a>要素が Colorbox の対象になる。なので表示したい画像のリンクに rel=”colorbox” を追加する。

<a href="<%= escape(File.join(@src_prefix, i['path'])) %>" rel="colorbox">

href 属性の中身が escape(File.join.... となってるのは動的に変化する部分だから。

これで設定は終わり。これだけで、モーダルな画像表示ができてスライドショウもできる。なんだかちょっとだけかっこよくなったかも。

最後に jQuery のサイトへのリンクも張っておこう。

cf. jQuery