ColorBox  Prev. Page


ThickBoxは、メンテナンスすることを止めてしまいました。そのため、既に不具合も発生しています。そこで、ColorBox について検証してみます。
ColorBoxはAjax(非同期通信処理)を利用して画像を拡大表示するライブラリです。ThickBoxにはないスライドショウ表示機能もあります。
Colorboxの機能は、画像表示以外にも、Webページ、ビディオやインラインコンテンツの表示にも対応しています。

ColorBox Overlay

画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもでき、また、画像だけでなくHTMLファイルや動画なども表示させることができます。
同じようなライブラリとしては(Lightbox)が有名ですが、Lightboxはprototype.jsライブラリを利用しているのに対し、ColorBoxはjQueryライブラリを利用しています。 そのためLightboxと比べてColorBoxの方が使用しているライブラリのプログラムサイズが小さく、動作が軽快です。
ColorBoxの大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。 つまり、全くプログラムが分からない人でも気軽に使うことができます。
ColorBoxではHTMLのタグのclassやrel属性に定義した文字を記述するだけで画像の表示もHTMLページの表示もできてしまうという手軽さです。

■Download

はじめにColorBox

以下のファイルをダウンロードします。
  • colorbox.zip


  • ファイルをサーバーにアップロードします。unzipして展開します。展開したディレクトリーから、まずcolorbox.cssをexamplexのディレクトリーの なかからお好きな描画を選び(背景色、枠など異なります。)たとえばcssディレクトリーの配下にコピーします。
    同様にcolorbox.jsファイルもお好きなディレクトリーにコピーします。
    そして、画像ファイルのあるimagesディレクトリーを全て、動作ファイルのディレクトリー配下にコピーします。
      特徴
    • Supports photos, grouping, slideshow, ajax, inline, and iframed content.
    • Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
    • Appearance is controlled through CSS so it can be restyled.
    • Can be extended with callbacks & event-hooks without altering the source files.
    • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
    • Preloads upcoming images in a photo group.

    ■Implement

    ページの最初に以下のDTD対応の宣言をします。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <HEAD>と</HEAD>の間に以下の記述をします。一例です。
    <link media="screen" rel="stylesheet" href="css/colorbox.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="js/jquery.colorbox.js"></script>
    
    <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='single_image']").colorbox({opacity:0.7}); $("a[rel='slide_show']").colorbox({slideshow:true,opacity:0.7}); $(".Ajax_o").colorbox(); $(".iFrame_o").colorbox({iframe:true, innerWidth:480, innerHeight:385}); $(".Web_o").colorbox({width:"80%", height:"80%", iframe:true}); $(".in_line").colorbox({width:"50%", inline:true, href:"#colorbox_ex"}); }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; });
    </script>

    colorbox.cssはexample1~5まで、5つの種類があります。サンプルを見てお好きな表示のcss fileを選びます。
    example1のcssが動作にオーバーレイで基底のurlをマスクしてくれないという不具合がありました。チェックした結果、overlay.pngに原因であるようです。以下の部分を他のサンプルと同じように黒のバックグランドを表示するよにすると他のサンプルと同様の表示となります。
    バックグランドのカラーの設定は可能ですが、特定の画像のrepeat表示はできないよです。

    colorbox.css:
    
    #cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
    ↓
    #cboxOverlay{background:#000;}
    
    
    このbackground: の"#000"を他の色に変えることにより、背景色を好きな色に変更することができます。たとえば、"#f00"で赤色となります。勿論、#36deabのように自由に指定できます。
    他のcssは動作しました。

    ■Example

  • Single Image

  • idle
    <a href="images/narusawananami.jpg" rel='single_image' title='Idle' ><img src="img/narusawananami.jpg" width=50 hieght=100 alt="idle"></a>
    上述の機能に関連する部分は、ここになります。ページが呼び出されたときに、先ず、この関数が取り込まれます。透明度は、opacityの値を0~1.0まで変化させることにより、指定できます。0がマスクなし、1.0が完全マスクです。他にも設定はいろいろあるので、お好きな設定を試してみるといいでしょう。例えば、ここでは表示の遷移をelasticにしてスピードを500msにしています。
    <script>
                    $(document).ready(function(){
                            $("a[rel='single_image']").colorbox({transition:"elastic", speed:"500", opacity:0.7});
    		});
    </script>
    


    小さい画像をクリックするとColorBox機能により、画像を拡大して元のページをオーバーレイ表示します。通常の<a href="xxxxxxxx" >にrel='single_image'とtitle='xxxx'を追記しているだけですね。



  • Slide Show

  • idle

    <a href="images/todaerika01.jpg" rel='slide_show' title='Idle' ><img src="img/todaerika01.jpg" width=30 hieght=60 alt="idle"></a>
    <a href="images/todaerika02.jpg" rel='slide_show' title='Idle' ></a>
    <a href="images/todaerika03.jpg" rel='slide_show' title='Idle' ></a>
    <a href="images/todaerika04.jpg" rel='slide_show' title='Idle' ></a>
    <a href="images/todaerika05.jpg" rel='slide_show' title='Idle' ></a>
    <a href="images/todaerika06.jpg" rel='slide_show' title='Idle' ></a>



  • Outside HTML (Ajax)

  • Outside HTML (Ajax_0)
    <a class="Ajax_o" href="colorbox/content/ajax.html" title="Outside HTML">Outside HTML (Ajax_0)</a>


    YouTube がインフレームの表示を禁止したのは、非常に残念だ。どこか、対抗するサービスが出てきて欲しい。情報は、広く発信できるような開かれた社会であるべきだ。
    武田邦彦先生 講演会 Ustream動画
    <a class='iFrame_o' href="http://www.nicovideo.jp/watch/sm6245717" title="I will always love you." </a>



  • Outside WebPage (iFrame)

  • Mailform Free
    <a class="Web_o" href="http://server-tei.s8t.org" title="無料メールフォーム提供">Mailform Free</a>


  • Outside WebPage (iFrame) Fixed size

  • Juneire Outside WebPage(iFrame_o) Fixed size
    <a class="iFrame_o" href="http://juneire.s8t.org" title="Juneire">Juneire Outside WebPage(iFrame_o) Fixed sizei</a>


  • inline


  • <a class="inline_eample" href="#" title="What is ColorBox?">inline</a>
    inline

    This content comes from a hidden element on this page.

    The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.
    Click me, it will be preserved!

    If you try to open a new ColorBox while it is already open, it will update itself with the new content.

    Updating Content Example:
    Click here to load new content

    ColorBox 5 Star ☆印で評価


    ColorBoxからダウンロードした圧縮ファイル(zip)を解凍して、/rating/rating/xxxxx の2番目の階層(rating)をディレクトリーごと適用するHTMLのあるディレクトリーにアップロードします。なぜかcolorratingのダウンロードサイトが消滅していました。
    (但し、サーバーはSQLite database が使用可能でなければなりません。)

    ■簡単 設置

    設置要領:
    <head>と </head> の間に以下の記述をします。
    <link rel="stylesheet" type="text/css" href="rating/rating.css" media="screen"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
    <script type="text/javascript" src="rating/rating.js"></script>
    <?php include('rating/rating.php'); ?>

    次に body の表示したい場所に以下のScriptを記述し、unique_table_name の箇所を今回のデータを保存するお好きなファイル名に書き換えます。
    <?php rating_form("unique_table_name"); ?>
    databaseのパーミッション(707)、ratings.sqliteのパーミッション(606)として、書き込み可能になっていなければなりませんのでご注意ください。

    ■Example


    ■評価してください。
    ColorBoxの評価は?
    平均評価:
    3.19
    63.8
    68 件
    1 2 3 4 5


    上のratingは、日本語対応および平均値の数値表示の追加をしている修正版です。
    オリジナルのcolorboxは、英語版であり、平均値の数値表示がありません。
    英語から日本語に変更するのは、該当ファイルのなかの該当する英語の部分を検索し、日本語に置き換えればOKです。(この部分では緑色の箇所)
    後は、赤字の行を追加してください。

     	<div class="sp_rating">
                    <div class="rating">平均評価:</div>
    		<div class="rating"><?php echo round(($rating->average/20),2); ?></div>
    		<div class="base"><div class="average" style="width:<?php echo $rating->average; ?>%"><?php echo $rating->average; ?></div></div>
                    <div class="votes"><?php echo $rating->votes; ?></div>
                    <div class="status">
                            <?php echo $status; ?>
                    </div>
            </div>
    







    ■相互リンク

    サーバー亭
    高級補正下着
    囲碁ソフト開発

    ===============
    ジュンエール 54346: 1: 0: 0: 0: 0: 0