綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹介です。とても人気のあるjQueryのプラグインなのでご存知の方も多いかと思います。画像をクリックするとポップアップ表示されるので、じっくりと見ることができます。パリエーションも色々あるので自分のサイトに合うようにカスタマイズしてみてもおもしろいですね。以下、使い方です。
[ads_center]
使い方
ダウンロードしたフォルダの中にはexample1〜example5というフォルダがありますが、それぞれのバリエーションが異なるのでその中にある自分の使いたいCSSファイルとimagesフォルダをサーバーにアップロードします。
colorboxの中にはjquery.colorbox-min.jsとjquery.colorbox.jsが入っていますのでどちらか好きな方をアップロードします。ちなみにminの方が軽いです。
あとは<head>内に以下のコードを追加します。今回はjsというフォルダを作ったのでパスは任意で変更して下さい。
<link media="screen" rel="stylesheet" href="js/colorbox.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1')</script>
<script src="js/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='example1']").colorbox();
$(".example").colorbox();
});
</script>
以下はHTMLの例です。
<a href="グループ画像1" rel='example1' title="タイトル1"><img src="サムネイル画像1" /></a> <a href="グループ画像2" rel='example1' title="タイトル2"><img src="サムネイル画像2" /></a> <a href="グループ画像3" rel='example1' title="タイトル3"><img src="サムネイル画像3" /></a> <a href="単独画像" class="example"><img src="サムネイル画像" /></a>
ポップアップする画像のaタグにはrel=’example1’を記述します。これは上記のスクリプトの中の$(“a[rel=’example1′]”)に指定してありますので任意で変更して下さい。
これを指定した画像はグループ化されます。逆に単独で画像をポップアップしたい場合はrel属性をつけずにclass=”example”を指定します。これも上記スクリプトに$(“.example”)と指定してあるので任意で変更して下さい。
title=”好きなタイトル”をつけるとこんな感じに画像にタイトルをつけることができます。
カスタマイズしてみる
ColorBoxにはいくつかのオプションがあるのでその値を変更すれば色々カスタマイズできます。例えば以下のようにオプションを指定します。
$("a[rel='example1']").colorbox({
transition: "fade",
speed: 500,
opacity: 0.5,
});
transitionはデフォルトでは”elastic”に設定されています。その他に”fade”,”none”があります。
speedは数字を下げる程モーションが早くなり上げると遅くなります。デフォルトは350です。
opacityは画面の不透明度を表す数値です。下げると透明に近づき上げると不透明に近づきます。デフォルトでは0.85です。他にも色々オプションがありますが今回はこのくらいしか試してないので気になる人は公式サイトでチェックしてみて下さい。
以下のサイトからダウンロードできます。デモもたくさんあってバリエーションも複数あります。
いろいろと見ているだけでもおもしろいですね。
そういえば、ここ最近はjQueryも色々と新しいバージョンが出てきたりしているので、そろそろまた一から体系的に学んだ方がよさそうですね。
