アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 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