Slimboxを作ってみた。
前回一日一サンプルと言っておきながら、余裕で更新してない心の弱さ。
色々サンプル作ってはいるので、がんばって記事にはしたいと思います。
今回は、Slimboxです。こんなやつです。
Slimboxは、mootoolsを使用して作るギャラリーで、rel="lightbox"と指定するので、lightboxを使用してる方もそのまま移行する事ができます。
自分のサイトでも、Worksのページで使用しています。
では、どうぞ！
準備
まず、mootoolsをこちらからダウンロードします。
その際に、
- Core: Moo, Utility
- Native: Array, String, Function, Element
- Window: Window.Base, Window.Size
- Effects: Fx.Style, Fx.Styles (optionally Fx.Transitions)
ボクは他のサンプルの時に、上手く動かなかった事があったので、全部にチェックを入れてダウンロードしてます。全部にチェック入れると、サイズは40KBほどです。
次に、Slimboxのファイルをこちらからダウンロードします。
これで準備は終わりです。
ここから、slimboxを設置していきます。
まず、フォルダの構成は、
index.html
css
- slimbox.css
- closelabel.gif
- loading.gif
- nextlabel.gif
- prevlabel.gif
img
- picture01.jpg
js
- mootools-release-1.11.js
- slimbox.js
となっています。
次に、<head>～</head>に次のソースを書きます。
<script src="js/mootools-release-1.11.js" type="text/javascript"></script>
<script src="js/slimbox.js" type="text/javascript"></script>
そして最後に、<body>タグ内に、次のソースを書きます。
<a title="写真" href="img/picture01.jpg" rel="lightbox">写真が開きます。</a>
簡単なページですが、これで終了です。あとは、ご自身の使いたい箇所にこれと同じようにソースを加えてもらえれば大丈夫だと思います。
例えば、サムネイルをクリックするとslimboxが作動するようにする場合、サムネイルの画像(仮にthumb_picture01.gifとして、imgフォルダに格納します。)
<a title="写真" href="img/picture01.jpg" rel="lightbox"><img height="50" alt="サムネイル01" src="img/thumb_picture01.gif" width="50" /></a>
とします。
これで完成です。
参考サイト
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)