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. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

  2. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  3. Shave

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  4. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  5. Lightense Images
  6. jfMagnify

コメント

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP