MultiBox - for MooTools 1.2 の設置方法（MultiBox2） その２
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.swf と mp3player.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 の使いかた
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>は作っておきましょう。これがないと、ナビゲーションのボタンが出なくなってしまいます。