にっきダイアリー

はてなダイアリーからはてなblogに移動してみました。

Clearboxの設定とか

俺メモ Javascript

Clearboxのドキュメントはものすごく簡単な文章なのだけど、私の脳みそは時々どんな平易な内容でもそれがアルファベットであるというだけで「これは意味のないオサレ文字！」って認識でフリーズしてしまうことがある。
ので、脳みそが英語に対する理解力を示してくれている間にいろいろと直訳メモを書いて残しておくことにする。

使い方

HTMLソースのヘッダに

<script src="clearbox.js" type="text/javascript"></script>

と書く。
スクリプトを呼び出すときに、使いたい設定を指定できる。設定名のフォルダがclearbox/config以下にないとダメ。

<script src="clearbox.js?config=myconfig" type="text/javascript"></script>

clearbox.js には設定する項目が二つある。
CB_SrciptDir は、スクリプト一式の入ったフォルダ。clearbox.jsを読み込むhtmlファイルとの相対URL、もしくは絶対URLで指定。CB_Language は言語指定。フォルダと言語設定を指定する場合のURLはこんなかんじ。

<script src="clearbox.js?dir=scripts/clearbox&lng=ja" type="text/javascript"></script>

スクリプト内部で使っているスタイルシートなどはhtmlファイルで読み込む必要はない。

使い方

基本

lightboxなどと同様、relに「clearbox」を指定するだけ。

<a href="image.jpg" rel="clearbox" title="Caption"><img src="image_thumbnail.jpg" /></a>
ギャラリーを作成するときは以下のように［gallery=ギャラリー名］を付け加える
<a href="a.jpg" rel="clearbox[gallery=My Gallery]">sample image</a>
<a href="b.mp3" rel="clearbox[gallery=My Gallery]">sample music</a>
<a href="http://www.youtube.com/v/myrmovieid" rel="clearbox[gallery=My Gallery]">sample youtube</a>
リンク先を「inner#ほげほげ」ってやるとポップアップみたいなのも可能
<a href="inner#test" rel="clearbox">inner content</a>
HTMLタグを含めたポップアップを作りたいとき
<a href="htmlcontent" rel="clearbox[html=<strong>This is a bold text</strong>]">my webpage</a>
鍵カッコ内の書式

「パラメータ名=内容」を「,,」で区切って記述

<a href="mycontent"rel="clearbox[parameter1=value 1,,parameter2=value 2,,parameter3=value 3]">some content</a>
gallery
ギャラリー名。名称を変えれば同じページ内でいくらでも好きなだけギャラリーが作成できる。
href
You can set the url of the content with this parameter too. For example if you need to load other content than in the a tag specified.
type
メディアタイプの自動認識にまかせず、自分で指定する。指定できるのは、flash, html, iframe, image, inner, quicktime, winmedia 。
title
clearboxで表示するタイトルを指定する。指定しない場合はtitle属性を使用。
width
clearboxの表示幅指定
height
clearboxの高さ指定
tnhrf
ギャラリー専用。サムネールを指定する。作者曰く「前バージョンは tnhref だったけどeとっちゃった。ごめんね！」だそうで。
slideshowtime
これもギャラリー専用。スライドショーの時間を指定。
autoslideshow
イメージギャラリー専用。このパラメータを指定するとスライドショーが勝手に始まるよ。
comment
どのコンテンツにもコメントをつけることができる。文字数に制限はないけど、コメント表示エリアは設定ファイルで指定した高さまでしか表示されない。
closeonh
このパラメータをofにすると、背景をクリックしてもclearboxが自動的に閉じなくなる。設定ファイルにあるCB_CloseOnHの指定を上書きするよ。
dlhrf
デフォルトではダウンロードor最大表示ボタンのリンク先は表示しているコンテンツファイルだが、他のファイルをダウンロードさせたい場合はこのパラメータにURLを指定する。
dlinsame
このパラメータを指定すると、ダウンロードファイルを新しいウィンドウ(orタブ）で開く代わりに同じウィンドウで開くようになる。
html
HTMLで記述された文章を表示したいときに使う。aタグのhref要素に「htmlcontent」を指定し、このパラメータに表示したいhtmlを指定する。

他にもいろいろ使い方あるけど、省略。原文参照してください。

cb_config.js

/*
// 	ClearBox Config File (JavaScript)　
// 3.5用の設定ファイル
*/

var

// CB レイアウト:

	CB_WindowColor='#fff',				// CB window の色 (角丸用のPNG画像も変える必要があるよ!), 透明(transparent)指定もok
	CB_MinWidth=200,				// 画像の最小サイズとCB windowの初期幅
	CB_MinHeight=200,				// CB windowの初期高さ
	CB_WinPadd=15,					// CB window とブラウザ画面との隙間
	CB_RoundPix=12,					// ここを変えるなら角丸用のPNG画像も変えないとだめ。
	CB_ImgBorder=0,					// 画像のまわりに付ける枠線の幅（0で枠線なしかな）
	CB_ImgBorderColor='#ddd',			// 画像のまわりに付ける枠線の色
	CB_Padd=4,					// CB window の内側につける余白

	CB_BodyMarginLeft=0,				//
	CB_BodyMarginRight=0,				// body タグからの余白を指定する場合は
	CB_BodyMarginTop=0,				// この部分を変更すること
	CB_BodyMarginBottom=0,				//

	CB_ShowThumbnails='auto',			// サムネール表示方法 ('auto', 'always' or 'off') サムネは picture mode でしか使えないよ!
	CB_ThumbsBGColor='#000',			// サムネールの背景色
	CB_ThumbsBGOpacity=.35,				// サムネールレイヤの透明度
	CB_ActThumbOpacity=.65,				// 現在表示中画像のサムネール透明度

	CB_SlideShowBarColor='#fff',			// スライドショーバーの色
	CB_SlideShowBarOpacity=.5,			// スライドショーバーの透明度
	CB_SlideShowBarPadd=17,				// スライドショーバーの左右余白(左,右)
	CB_SlideShowBarTop=2,				// スライドショーバーの位置（画像の上辺から）

	CB_SimpleDesign='off',				// on にすると、外側の枠を表示しなくなる

	CB_CloseBtnTop=-10,				// picture mode での閉じるボタンの位置（高さ方向）
	CB_CloseBtnRight=-14,				// picture mode での閉じるボタンの位置（水平方向）
	CB_CloseBtn2Top=-20,				// content mode での閉じるボタンの位置（高さ方向）
	CB_CloseBtn2Right=-30,				// content mode での閉じるボタンの位置（水平方向）

	CB_OSD='on',					// OSD 表示
	CB_OSDShowReady='on',				// clearbox が読み込み終了になった時に OSD 表示するかどうか
							// OSDは動作テスト終わったらOFF推奨

// フォント設定:

  // タイトル文字
	CB_FontT='"ＭＳ Ｐゴシック" helvetica, arial, sans-serif',				//
	CB_FontSizeT=13,				// 
	CB_FontColorT='#777',				// 
	CB_FontWeightT='normal',			//

  // タイトルの下に表示されるコメント文字
	CB_FontC='"ＭＳ Ｐゴシック" helvetica, arial, sans-serif',				//
	CB_FontSizeC=11,				// 
	CB_FontColorC='#999',				// 
	CB_FontWeightC='normal',			//
	CB_TextAlignC='justify',			//
	CB_txtHCMax=120,				// コメント表示部分の最大高さ

  // ギャラリー名表示文字
	CB_FontG='"ＭＳ Ｐゴシック" helvetica, arial, sans-serif',				//
	CB_FontSizeG=11,				//
	CB_FontColorG='#aaa',				//
	CB_FontWeightG='normal',			//

	CB_PadT=10,					// 画像とタイトル表示との隙間

	CB_OuterNavigation='off',			// onにするとナビゲーションパネルが外側に表示される

	CB_ShowURL='off',				// タイトルが指定されなかった場合、タイトル部分にURLを表示する
	CB_ItemNum='on',				// ギャラリーの何番目かを表示する
	CB_ItemNumBracket='()',				// whatever you want ;)

	CB_ShowGalName='on',				// ギャラリー名を表示する
	CB_TextNav='on',				// 前の画像と次の画像へのナビゲーションを表示する
	CB_NavTextImgPrvNxt='on',			// ナビゲーションを画像で表示する
	CB_ShowDL='on',					// ダウンロードリンクを表示する
	CB_NavTextImgDL='on',				// ダウンロードリンクを画像で表示する

	CB_ImgRotation='on',				// 画像の回転メニューを表示する
	CB_NavTextImgRot='on',				// 画像の回転メニューを画像で表示する

// 元ページを覆い隠すレイヤの設定:

	CB_HideColor='#000',				// レイヤの色
	CB_HideOpacity=.9,				// 透明度 (0 で透明, 1 で完全に隠す)
	CB_HideOpacitySpeed=400,			// フェードのスピード
	CB_CloseOnH='on',				// 背景をクリックしたときにclearboxの表示を終了する

// アニメーション表示設定:

	CB_Animation='double',				// 'double', 'normal', 'off', 'grow', 'growinout' or 'warp' (CPU使います)
	CB_ImgOpacitySpeed=300,				// コンテンツのフェードスピード (ms)
	CB_TextOpacitySpeed=300,			// 文字のフェードスピード (in ms)
	CB_AnimSpeed=300,				// CB windowを変形するスピード (in ms)
	CB_ImgTextFade='on',				// 文字やコンテンツがフェードするかどうか
	CB_FlashHide='off',				// clearboxが動作する時は元ページにあるflash アニメを隠す
	CB_SelectsHide='on',				// clearboxが動作する時は元ページにある選択ボックスを隠す
	CB_SlShowTime=5,				// スライドショーで画像が切り替わる速さ (秒)
	CB_Preload='on',				// ギャラリーで表示している画像の前後の画像を先読みする
	CB_ShowLoading='off',				// NOT WORKING IN THIS VERSION (3.5beta)

// clearboxが使う画像ファイルの設定:
// (他の画像はスタイルシート内部で使ってる)
	CB_PictureStart='start.png',			//
	CB_PicturePause='pause.png',			//
	CB_PictureClose='close.png',			//
	CB_PictureNext='next.png',			// 
	CB_PicturePrev='prev.png',			//

// 上級者設定:

	CB_PicDir=CB_ScriptDir+'/config/'+CB_Config+'/pic',	// clearboxのフォルダ構成を変えた時はここも変更する

	CB_AllowedToRun='on',					// offにするとclearboxは起動しない（この設定はリロードしなくても有効）←ほかのスクリプトから操作可能ってことか
	CB_AllowExtFunctLoad='off',				// onにすると新しいコンテンツを読み込むたびにCB_ExternalFunctionLoad()という名前の関数を呼び出す。(useful for audit, etc)
	CB_AllowExtFunctPageLoad='off',				// onにするとページがすべて読み込まれた後に CB_ExternalFunctionPageLoad() という名前の関数を呼び出す。
	CB_AllowExtFunctCBClose='off	'				// onにするとclearboxが終了するときに CB_ExternalFunctionCBClose() という名前の関数を呼び出す。

;

cb_language.js

//                  
// 	ClearBox Language File (JavaScript)
//

var

	CB_NavTextPrv='前',				// text of previous image
	CB_NavTextNxt='次',					// text of next image
	CB_NavTextFull='フルサイズ',				// text of original size (only at pictures)
	CB_NavTextOpen='新しいウィンドウで開く',		// text of open in a new browser window
	CB_NavTextDL='ダウンロード',				// text of download picture or any other content
	CB_NavTextClose='clearboxを閉じる',			// text of close CB
	CB_NavTextStart='スライドショー',			// text of start slideshow
	CB_NavTextStop='停止',			// text of stop slideshow
	CB_NavTextRotR='90度右に回転',	// text of rotation right
	CB_NavTextRotL='90度左に回転',	// text of rotation left
	CB_NavTextReady='clearbox 準備完了'			// text of clearbox ready

;

くどいようですが、適当に直訳してるだけなので原文も一緒に読んでね。

lightboxの類いろいろ試したけどこれが一番簡単だった。