LightBox系javascriptの亜種、FancyBox。
ここのところ、ウィンドウ内オーバーレイ表示と言えば、画像のみのリンクがほとんどの場合はFancyZoomを、文章やページを表示する場合はThickBoxを。この2種を使い分けてました。機能的にはThickBoxのみでも充分なんだけど、ややシンプルすぎる見た目に少々あきてきていて、FancyZoomは見た目もアクションも程よくいい感じなのでこれでThickBoxなみの機能があればと思ってたら、ありました。しかも、Jqueryのプラグイン。
見た目はほぼFancyZoomですが、画像リンク以外にインラインコンテンツや、iFrameで外部サイトのページを同一ウィンドウ内でオーバーレイ表示できます。
使い方
配付サイトからダウンロードしたzipファイルを解凍し、アップロード。使用するページでスクリプトを呼び出し。
※jquery.pngFix.js
はIE6で透過png画像の背景を表示するのに必要です。jquery.metadata.js
は、すいません、イマイチ良く分かってないです。
同様にcssも読み込みます。
あとはjQueryお馴染みのおまじないです。#test1 a
の部分で適用したいリンクを指定。
javascript
リンクの部分、title属性の内容が拡大時にキャプションとして表示されます。
html
実行例
`rel`要素で
各種オプションで、画像クリックでオーバーレーイを閉じる、ズームイン/ズームアウト時のスピード、フレームサイズの指定(インラインコンテンツ、またはiframe表示時)、背景の表示/背景の透明度が指定できます。
詳しくは配付ページの下方、Available optionsをご覧ください。
スポンサーリンク
コメントを投稿するにはログインが必要です。