Pickupニュース

Colorbox
jQueryプラグイン

Colorbox

軽量Lightbox系jQueryプラグイン
ColorBoxは10kb(圧縮版)と、非常に軽量なlightbox系のjQueryプラグインです。
1 Colorboxの導入

Colorboxのリンク(ファイルをダウンロードして利用する場合)

リンク先のDownloadをクリックして、ファイルをダウンロードします。

Webサイト

Colorboxフォルダの作成

colorboxという名前のフォルダを新規作成し、そこにダウンロード・解凍後のcolorbox-masterフォルダの中からjquery.colorbox.js(またはjquery.colorbox-min.js)、example1~5のフォルダ内のいずれからのcolorbox.cssimagesフォルダを移動します。

HTMLマークアップ

サーバーに作成したcolorboxフォルダをアップロードし、<head>タグ内にjquery.colorbox.jsとjQueryまでのスクリプトパス、colorbox.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="path/colorbox/jquery.colorbox.js"></script> <link rel="stylesheet" href="path/colorbox/colorbox.css" />

Colorboxのリンク(CDNを利用する場合)

ColorboxはCDN配信サービスcdnjでも配信されていますので、リンクを貼るだけでプラグインを利用することが出来ます。

HTMLマークアップ

<head>タグ内にCDNで配信されているjquery.colorbox.jsとjQueryまでのパスへリンクする記述を追加します。CDNではcolorbox.cssが配信されていないので、前述のファイルをダウンロードして利用する方法で用意する必要があります。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script> <link rel="stylesheet" href="path/colorbox/colorbox.css" />

基本的な使い方

HTMLマークアップ

Colorboxでポップアップ表示したい<a>タグにクラス(ここではcolorbox)を付加します。
HTMLCopy
<a class="colorbox" href="images/photo01-m.jpg" title="机の上のキーボード"> <img src="../images/photo01-s.jpg"> </a>

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.colorbox').colorbox();

デモ

 
        <a class="colorbox" href="../images/photo01-m.jpg" title="机の上のキーボード">
            <img src="../images/photo01-s.jpg">
        </a>
    

        $(function () {
            $('.colorbox').colorbox();
        });
    
1 2 3

3 件のコメント

  • colorboxの設定出来ました、ありがとうございました。
    html初心者につき、質問です。
    ①クリック拡大画像が元の小画面の下に表示されます。拡大画像を前面に表示するには、どこにz-indexをどう入れればいいのでしょうか?
    ②クローズボタンをもっと大きく表示したいのですが、どうすればいいでしょうか?
    上記の点、よろしくお願いします。

  • ① #colorbox, #cboxOverlay, #cboxWrapperにz-index: 9999が設定されていますので、元のサムネイルがそれ以上の値が指定されている可能性があります。サムネイルのz-indexを9999以下に指定して下さい。

    ②クローズボタンはCSSで#cboxCloseのプロパティを変更することで大きく表示することが出来ます。

コメントを残す

記事ランキング