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でウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  2. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

  3. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  4. no-image

    JavaScript

    レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」

    Flashyはレスポンシブに対応したjQuery Lightbox &…

  5. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  6. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

コメント

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP