この間、といっても先月の頭のことだけど、昔作った 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