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も色々と新しいバージョンが出てきたりしているので、そろそろまた一から体系的に学んだ方がよさそうですね。

Vimの基本的なコマンドの使い方を試してみた前のページ

PHPで日付を取得したり加減算する関数を使ってみる次のページ

関連記事

  1. no-image

    JavaScript

    軽量なスティッキー要素を実装できるjQueryプラグイン「Zebra Pin」

    Zebra Pinは軽量なスティッキー要素を実装できるjQueryプラ…

  2. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  3. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  4. anchor.js

    JavaScript

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

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

  5. stickyNavbar.js
  6. Material ScrollTop Button

コメント

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

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP