JavaScript

Lightbox風のjQueryプラグインColorBoxの使い方

綺麗なイメージギャラリーを簡単に設置できる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-title

カスタマイズしてみる

ColorBoxにはいくつかのオプションがあるのでその値を変更すれば色々カスタマイズできます。例えば以下のようにオプションを指定します。

$("a[rel='example1']").colorbox({
    transition: "fade",
    speed: 500,
    opacity: 0.5,
});

transitionはデフォルトでは”elastic”に設定されています。その他に”fade”,”none”があります。

speedは数字を下げる程モーションが早くなり上げると遅くなります。デフォルトは350です。

opacityは画面の不透明度を表す数値です。下げると透明に近づき上げると不透明に近づきます。デフォルトでは0.85です。他にも色々オプションがありますが今回はこのくらいしか試してないので気になる人は公式サイトでチェックしてみて下さい。

以下のサイトからダウンロードできます。デモもたくさんあってバリエーションも複数あります。

いろいろと見ているだけでもおもしろいですね。

そういえば、ここ最近はjQueryも色々と新しいバージョンが出てきたりしているので、そろそろまた一から体系的に学んだ方がよさそうですね。

関連記事

  1. jQuery Glow
  2. Before and After image script
  3. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  4. elmenu

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  5. JavaScript

    jQueryでCSSを複数の値で設定するやり方やクラスの追加や削減など色々

    jQueryのCSS操作で複数の値を渡したい時はハッシュ形式にすると便…

  6. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

コメント

  1. この記事へのコメントはありません。

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP