ゼロからはじめるMooRevolver - 商品写真に最適、回転式写真表示ライブラリ

ライブラリの読み込み

MooRevolverを使うにはMooToolsライブラリとMooRevolverライブラリを読み込ませます。これは<script>タグを使い以下のように記述します。

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

読み込ませる順番を間違えると動作しないので注意してください。また、ダウンロードしたスタイルシートファイルも以下のように読み込ませます。

<link rel="stylesheet" href="css/MooRevolver.css" type="text/css">

MooRevolverは(X)HTMLの<div>タグまたは<ul>タグで囲まれた<li>タグの項目を回転表示します。サンプル01では画像を表示していますが、以下のように<div>タグで指定しています。<img>タグのwidth, heightを指定しても自動的にMooRevolverで調整され表示されます。

 <div id="album" class="revolver">
    <div><img src="photo/001.jpg" width="96" height="54" alt="富士山"></div>
    <div><img src="photo/002.jpg" width="96" height="54" alt="夕焼け"></div>
    <div><img src="photo/003.jpg" width="96" height="54" alt="富山湾"></div>
    <div><img src="photo/004.jpg" width="96" height="54" alt="白糸の滝"></div>
    <div><img src="photo/005.jpg" width="96" height="54" alt="高原の朝"></div>
    <div><img src="photo/006.jpg" width="96" height="54" alt="苔"></div>
    <div><img src="photo/007.jpg" width="96" height="54" alt="ベイブリッジ"></div>
    <div><img src="photo/008.jpg" width="96" height="54" alt="たんぽぽ"></div>
 </div>

<div>タグでなく<ul><li>タグを使った場合は以下のように指定します。

 <ul id="album" class="revolver">
    <li><img src="photo/001.jpg" width="96" height="54" alt="富士山"></li>
    <li><img src="photo/002.jpg" width="96" height="54" alt="夕焼け"></li>
    <li><img src="photo/003.jpg" width="96" height="54" alt="富山湾"></li>
    <li><img src="photo/004.jpg" width="96" height="54" alt="白糸の滝"></li>
    <li><img src="photo/005.jpg" width="96" height="54" alt="高原の朝"></li>
    <li><img src="photo/006.jpg" width="96" height="54" alt="苔"></li>
    <li><img src="photo/007.jpg" width="96" height="54" alt="ベイブリッジ"></li>
    <li><img src="photo/008.jpg" width="96" height="54" alt="たんぽぽ"></li>
 </ul>

MooRevolverは指定されている<div>タグまたは<li>タグの数に応じて自動的に位置や角度を割り当てるためスクリプトで明示的に枚数を指定する必要はありません。ただし、回転させるための領域全体にはrevolverクラスを指定しておく必要があります。また、サンプルでは回転領域を示すために<div>タグにID名albumを割り当てています。