mooRevolverを作ってみた。
今回は、mooRevolverです。
mooRevolverは、mootoolsを使用した回転式の画像ギャラリーです。これを使用すると、アップルのiTunesのようなギャラリーやメニューを作成するする事ができます。
では、いつも通り、簡単な説明とサンプルですが、どうぞ！
* 準備 *
まず、mootoolsのファイルをこちらからダウンロードします。
項目には全てチェックを入れました。スマートじゃないですが、それが一番無難っぽいです。
次に、mooRevolverのMooRevolver.jsとMooRevolver.cssのファイルをこちらからダウンロードしてください。
これで、準備は完了です。
* mooRevolverの設置 *
ここから、実際にmooRevolverを設置する作業に入ります。
フォルダの構成は、
index.html
css
- MooRevolver.css
js
- MooRevolver.js
- mootools-release-1.11.js
img
- picture01.jpg
- picture02.jpg
- picture03.jpg
- picture04.jpg
- picture05.jpg
- picture06.jpg
となっています。
次に、<head>～</head>タグ内に、
<script src="js/mootools-release-1.11.js" type="text/javascript"></script>
<script src="js/MooRevolver.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/MooRevolver.css" type="text/css">
<script type="text/javascript"><!--
window.onload = function(){
var mrObj = new MooRevolver("album" ,{
arrowLeft:"prev",
arrowRight:"next"
});
}
// --></script>
を追記します。
ここで、最後のjavascriptのソースで、"album"と指定されてる部分と、同じ名前をこの後<body>タグ無いに書いていく、id名に指定します。
もしid名を変更する場合は、javascriptのソースも一緒に変更してください。
最後に、<body>タグ内に次のソースを書き加えてください。
<div id="album" class="revolver">
<div><a href="#"><img src="img/picture01.jpg" alt="写真01" width="250" height="250" /></a></div>
<div><a href="#"><img src="img/picture02.jpg" alt="写真02" width="250" height="250" /></a></div>
<div><a href="#"><img src="img/picture03.jpg" alt="写真03" width="250" height="250" /></a></div>
<div><a href="#"><img src="img/picture04.jpg" alt="写真04" width="250" height="250" /></a></div>
<div><a href="#"><img src="img/picture05.jpg" alt="写真05" width="250" height="250" /></a></div>
</div>
<a href="#" id="prev">previous</a> | <a href="#" id="next">next</a>
これで、完成です。
サンプルでは、ボタンをクリックすると左右に回転する作りとなっていますが、javascriptのコードを変える事で、時間で指定したりする事も可能です。
* 参考サイト *
最後のサイトでは、筆者さんのサンプルもダウンロードできるので、理解しやすいと思います。
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)