はじめに
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.
ページの最初に以下の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は動作しました。
Single Image
<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
<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