Smoothboxを作ってみた。

今回は、Smooth Boxを作ってみます。

Thickboxの、mootools版みたいな感じです。

自分のサイトworks部分でも使っていますが、こんなやつです。

では、どうぞ！

* 準備 *

まず、こちらからmootoolsのファイルをダウンロードします。

今回、参考にしたサイトの通りにチェックを入れてダウンロードしたのですが、上手く行かなかったので、全部にチェックを入れました。他のサイトでも、そうする方が無難と書いてる方もいました。

次に、こちらの"Download"の項目から、Smoothboxのjs、css、loading.gifファイルをダウンロードします。

これで準備はおしまいです。

* Smoothboxの設置*

これから、Smoothboxを設置していきます。

まず、フォルダの構成は、

index.html
css
- smoothbox.css
img
- picture01.jpg
js
- mootools-release-1.11.js
- smoothbox.js
loading.gif

となっています。

次に、<head>～</head>内に次のソースを追加します。

最後に、<body>タグ内に、次のソースを追加します。

<a href="img/picture01.jpg" title="写真01" class="smoothbox">写真が表示されます。</a>

これで完成です。

Slimboxの時も書きましたが、ここで紹介したのは、基本的な作りだけです。

例えば、サムネイルをクリックするとSmoothboxが開くようにする場合は、

<a href="img/picture01.jpg" title="写真01" class="smoothbox"><img height="50" alt="サムネイル01" src="img/picture01.jpg" width="50" /></a>

と書きます。

* 参考サイト *

Ho-KAGO After School