872 Style
  1. TOP
  2. MEMO
  3. WEB
  4. MultiBox - for MooTools 1.2 の設置方法
  5. その2

MultiBox - for MooTools 1.2 の設置方法(MultiBox2) その2

MultiBox 2 を設置する

MultiBoxは本体以外にMooToolsライブラリが必要になりますが、MultiBoxをダウンロードすると一式入っているので、それを使いましょう。
必要なファイルは<head>内で読み込ませる必要があります。
読み込ませた後に、Javascript を貼り付けます。


<!-- multibox -->
	<link type="text/css" rel="stylesheet" href="multibox/Styles/multiBox.css" />
<!--[if lte IE 6]>
	<link type="text/css" rel="stylesheet" href="multibox/Styles/multiBoxIE6.css" />
	<![endif]-->
<script type="text/javascript" src="multibox/mootools-1.2.3-core-yc.js"></script>
	<script type="text/javascript" src="multibox/mootools-1.2.3.1-more-yc.js"></script>
	<script type="text/javascript" src="multibox/Scripts/overlay.js"></script>
	<script type="text/javascript" src="multibox/Scripts/multiBox.js"></script>

	<script type="text/javascript">
	window.addEvent('domready', function(){
	//call multiBox
	var initMultiBox = new multiBox({
	mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)
	container: $(document.body),//where to inject multiBox
	descClassName: 'multiBoxDesc',//the class name of the description divs
	path: 'multibox/Files/',//path to mp3 and flv players
	useOverlay: true,//use a semi-transparent background. default: false;
	maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing
	addDownload: true,//do you want the files to be downloadable?
	pathToDownloadScript: './Scripts/ForceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)
	addRollover: true,//add rollover fade to each multibox link
	addOverlayIcon: true,//adds overlay icons to images within multibox links
	addChain: true,//cycle through all images fading them out then in
	recalcTop: true,//subtract the height of controls panel from top position
	addTips: true//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)
	});
	});
	</script>
	<!-- END MultiBox -->

上記のパスの設定は、自分の環境に合わせて変更してください。
path: './Files/' とありますが、この設定は、flvplayer.swfmp3player.swf が入っているフォルダを指定してあげましょう。
pathToDownloadScript: './Scripts/forceDownload.asp' ここでは、Downloadするときに必要な forceDownload.asp の場所を指定します。 階層が変わるたびに書き直すのが面倒な方は、フルパスで記入した方がよいでしょう。
forceDownload.asp を使用する場合には、サーバが ASP に対応していないと使えないので、使わない場合は addDownload の項目を false にしておきましょう。
コードの中で <!--[if lte IE 6]> とあるのは、Internet Explorer 6.x でのみ読み込むものです。
IE6ではCSSのバグがあるので、専用のCSSを読み込ませるようにしてあります。
このタグを<head>内に記入してあげれば一応設置完了です。

MultiBox 2 の使いかた

Sample A
ここに、文章を入力することができます。
Sample B
rel="[Image]" のように[...]で囲んだ文字が同じであればグループ化されます。
Sample C
カーソルキーの左右でもグループ間の移動ができます。
ESC KEY を押すと画像は消えます。
<a href="multibox/Images/large1.jpg" id="mb1" class="mb" title="Picture Name" rel="[GROUP NAME]">
<img src="multibox/Images/small1.jpg" alt="Picture Name" />
</a>
<div class="multiBoxDesc mb1 mbHidden">
ここに、文章を入力することができます。
</div>

サムネイルの上にカーソルを持っていくと、<a>のtitleで入力した Sample A がポップアップ表示されます。
MultiBox 2 を設定した画像には自動的に虫眼鏡がつきます。
画像をクリックすると、Lightboxのように画像が出てきます。
この時に、title に書かれたものも表示されますが、その下の<div class=... </div> も表示することができます。

使用方法は、設定したい画像を<a>で囲み、id、class、title、relを記入します。
id には、mb に続けて 数字を入力。この数字は他にもMultiBox設定する場合には重ならないようにしましょう。
classには必ず mb を入力
グループ化する場合は、rel 内に [...] で囲んで任意の文字を入力します。この文字が同じものだけがグループ化されます。

枠内に表示する文字は、<div> で囲んで、class に multiBoxDesc mb1 mbHidden と入力します。
ここでもmbが出てきますが、ここで使用する数字は、表示させたいものの id と同じものを使用します。
この、表示用の<div>は表示したいものの直後ではなくても表示させることはできます。
グループ設定している場合は表示する内容が無くても、必ず表示用の<div>は作っておきましょう。これがないと、ナビゲーションのボタンが出なくなってしまいます。