自前の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 というフォルダを作って配置する。
で、表示に使うテンプレートのほうで読み込みと設定をすればいい。読み込む部分はこう。

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

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

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

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

 cf. jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください