lightbox系亜種、fancybox

LightBox系javascriptの亜種、FancyBox
ここのところ、ウィンドウ内オーバーレイ表示と言えば、画像のみのリンクがほとんどの場合はFancyZoomを、文章やページを表示する場合はThickBoxを。この2種を使い分けてました。機能的にはThickBoxのみでも充分なんだけど、ややシンプルすぎる見た目に少々あきてきていて、FancyZoomは見た目もアクションも程よくいい感じなのでこれでThickBoxなみの機能があればと思ってたら、ありました。しかも、Jqueryのプラグイン。

FancyBox – fancy image zooming tool

見た目はほぼFancyZoomですが、画像リンク以外にインラインコンテンツや、iFrameで外部サイトのページを同一ウィンドウ内でオーバーレイ表示できます。

使い方

配付サイトからダウンロードしたzipファイルを解凍し、アップロード。使用するページでスクリプトを呼び出し。


jquery.pngFix.jsはIE6で透過png画像の背景を表示するのに必要です。jquery.metadata.jsは、すいません、イマイチ良く分かってないです。

同様にcssも読み込みます。


あとはjQueryお馴染みのおまじないです。#test1 aの部分で適用したいリンクを指定。

javascript


リンクの部分、title属性の内容が拡大時にキャプションとして表示されます。

html


実行例

testImg_1.jpg


`rel`要素で

各種オプションで、画像クリックでオーバーレーイを閉じる、ズームイン/ズームアウト時のスピード、フレームサイズの指定(インラインコンテンツ、またはiframe表示時)、背景の表示/背景の透明度が指定できます。

詳しくは配付ページの下方、Available optionsをご覧ください。

このエントリーをはてなブックマークに追加
はてなブックマーク - lightbox系亜種、fancybox
Facebook にシェア
[`google_buzz` not found]
[`yahoo` not found]
[`livedoor` not found]
[`friendfeed` not found]
[`tweetmeme` not found]

スポンサーリンク