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

FancyBox – fancy image zooming tool

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

使い方

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

    /* 必須 */
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.js"></script>
    /* オプション */
    <script type="text/javascript" src="js/jquery.pngFix.js"></script>
    <script type="text/javascript" src="js/jquery.metadata.js"></script>

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

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

<link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen"/>

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

javascript

<script type="text/javascript" charset="utf-8">     
    $(document).ready(function() {
        $("#test1 a").fancybox({
            'hideOnContentClick': true
        });
    })
</script>

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

html

    <div id="test1">
        <a href="testImg.jpg" title="庭の花">
            <img src="/wordpress/wp-content/uploads/2008/05/testImg_1.jpg" alt="testImg_1.jpg" title="testImg_1.jpg" class="entryImg" width="160" height="60" />
            </a>
    </div>

実行例

`rel`要素で

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

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

[`google_buzz` not found]

[`yahoo` not found]

[`livedoor` not found]

[`friendfeed` not found]

[`tweetmeme` not found]