アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2010年6月

2010年6月24日

サイトに画像ギャラリーを簡単に実装するjQueryのプラグイン「colorbox」

成功者になるための必読ブログとは?

thickboxからcolorboxへ乗り換えしてみる。

いろんな便利機能が満載のjQueryのプラグイン「yuga.js」。

今までも様々なサイトでお世話になっていますが、その便利機能のなかでもよく使うのが、「画像直リンクの場合、thickbox」で表示する...というもの。

簡易的なギャラリー機能を実装するうえで、とくにhtmlを書き換えたり、クラス名を書いたりする必要がないので、重宝しています。

ついでにいろいろカスタマイズして、ちょっと動きをつけたりしてみたり...jQueryベースだからこそ、ノンプログラマーなボクにも使いこなせている感じですね。

んで、その大変便利な「thickbox」なんですが、以前も書いた通り、開発が終了しているので、今後どうなるか分からないという不安があるのも事実。

そこで、代替案として使えそうなのが「colorbox」というプラグインです。

colorboxの実装は超簡単!

デフォルトでelastic、fade、none、slideshowの4種類(noneは"なし"だから3種類かw)のトランジションが用意されていて、パラメーターを指定することで、簡単に実装できます。

ウィンドウのデザインサンプルも5種類ほど用意されていて、該当するCSSと画像をサーバに設置するだけで使えるのでチョー便利です。

また、画像だけでなくvideoや外部html、ページ内部のボックスなどの表示にも対応しているので、thickboxの代替案として十分です。

画像直リンクでcolorboxを起動して画像を表示させる。

んで、yuga.jsを実装した時と同じように、画像直リンクでcolorboxを起動させる方法です。

利用するhtmlに下記のコードを書くか、下記のコードを書いたJS(control_colorbox.jsとか)を作って読み込むだけです。

$(document).ready(function(){
$("a[href$=.jpg]").colorbox();
});

これにより、拡張子が.jpgの画像へのリンクがあった場合、colorboxが起動して、元画像を表示できるよになります。

んが、これだとjpgだけなので、他のファイル形式の画像にも対応させたり、他にもいろんなパラメーターを追加したコードがこちら↓。

$(document).ready(function(){
$('a[rel="gallery"],a[href$=".jpg"], a[href$=".gif"], a[href$=".png"],a[href$=".JPG"], a[href$=".GIF"], a[href$=".PNG"]').colorbox({maxHeight:"95%",maxWidth:"95%",current: "{current} of {total}",initialWidth: "50",initialHeight:"50"});
});

上記の設定は、モーダルウィンドウの表示初期値を50px、最大値をスクリーンの95%に制限、画像(.jpg、.gif、.pngと各大文字の拡張子)直リンクで元画像の表示、また「gallery」というrel属性があれば、グルーピングして「3 of 8」とナンバー&ディレクションボタンの表示...といった感じです。

まぁ、もしかしたらもっと効率的に書く方法もあるかもしれないけど、とりあえず動いているので...

ぜひご参考に。

※あ、yuga.jsを使ってる場合は、thickboxの部分はコメントアウトを忘れずに。

 

投稿者 kuro : 16:11 | 固定リンク | ID:829

ページトップ△