Lightboxみたいな感じなんだけど更にスピーディーで派手、それがBumpbox。
画像だけではなく、動画やFlash、PDFなどにも対応しています。
使用するAjaxライブラリはMooToolsなのですが、ダウンロードファイルにあらかじめ同梱されていますので別途用意する必要はありません。
【Bumpbox】画像クリックで拡大表示します
ダウンロード
Bumpbox – artViper designstudio
ダウンロードしたbumpboxフォルダをまるごとサーバーにアップロードするだけなのですが、bumpbox.jsの86行目「closed.png」のURLを書き直さないと画像右上に「×」ボタンが表示されません。フルパス（http://～）に修正してあげる必要があります。
実装手順
<head>～</head>に以下を記述。
<script type="text/javascript" src="http://アップロードしたURL/bumpbox/mootools.js"></script> <script type="text/javascript" src="http://アップロードしたURL/bumpbox/bumpbox.js"></script>
画像のリンク先に以下を追加。
<a href="画像URL" rel="800,532" class="bumpbox" title="表示画像のタイトル">画像</a> //rel="元画像の横サイズ,縦サイズ"に修正
以上です。
がんばってください。
via（コリス）
コメントはまだありません
コメントは管理者の承認後に表示されます