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. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  2. JavaScript

    JavaScriptの配列操作をメモがてら整理してまとめてみる

    自分用のメモです。JavaScriptの配列操作に関するメソッドなんか…

  3. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  4. Image Gallery Threejs
  5. autoscroll.js

    JavaScript

    コンテンツを自動でスクロールしてくれるjQueryプラグイン「autoscroll.js」

    autoscroll.jsはwebページ内のコンテンツを自動でスクロー…

  6. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

コメント

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP