1

12月

2011

画像リンクを派手に演出する「Bumpbox」実装

Bumpbox

Lightboxみたいな感じなんだけど更にスピーディーで派手なアクションをするスクリプト、それがBumpbox
画像だけではなく、動画やFlash、PDFなどにも対応しています。

使用するAjaxライブラリはMooToolsなのですが、ダウンロードファイルにあらかじめ同梱されていますので別途用意する必要はありません。

実装サンプル

Lily width=
※画像をクリックすると拡大表示します

ダウンロード

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,530" class="bumpbox" title="表示画像のタイトル">画像</a> //rel="元画像の横サイズ,縦サイズ"に修正

以上です。
がんばってください。

コメント

  • サイトウリュータ

    この記事へのコメントはまだありません。ご意見やご感想をコメントしていただけるとうれしいです。
    投稿後、すぐには反映されませんのでご了承ください。

コメントフォーム




サイトウリュータ

カテゴリ

最近の記事

注目の記事

Follow me