fancybox [plug-in] [jQuery]

2014年に制作した記事を2015/08に加筆修正

モーダルウィンドウで（ライトボックス風に）画像などを表示するjQueryプラグインです。
画像だけでなく、動画、htmlなど様々なコンテンツを扱えます。
以下の提供元サイトからダウンロードして、必要なファイルを適切なディレクトリに格納し、読み込んで使用します。
jqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。

• 提供元サイト：fancybox
• ライセンス：MIT / GPL
• 必須ファイル：jquery.fancybox-1.3.4.js（またはjquery.fancybox-1.3.4.pack.js）
• 必須ファイル：jquery.fancybox-1.3.4.css（カスタマイズ可能です）
• 必要であれば：jquery.easing-1.3.pack.js（複雑なイージングを使いたい場合）
• 必要であれば：jquery.mousewheel-3.0.4.pack.js（マウスホイールの動作を有効にしたい場合）
• 必要であれば：「次へ」「閉じる」などのコントロール用やローディングの画像（ご自身で制作した画像やwebフォントなどを使うこともできます。）

• このサンプルのfancyboxはVer.1.3.4です（2010/11/11以降、バージョンアップはしていないようです）。バージョンが違うとライセンスや使い方も異なることがあります。
• Ver.1.3.4はjQuery 1.3以降との組み合わせで、Firefox、Safari、Chrome、Opera、Internet Explorer 6以降で動作するようです。
  ただし、fancyboxのバージョンアップがストップしていることからも、あまり新しいバージョンのjqueryでは動作しない可能性があります。
• jsファイル、cssファイルやコントロール用の画像はダウンロードしたファイルを解凍してできたディレクトリのfancyboxディレクトリにまとめられています。
• jquery.fancybox-1.3.4.pack.jsは改行や不要なスペースなどを排除した若干容量の軽いファイルになります。

なお、後継バージョンのfancyBox2というものもありますが、こちらは商用利用は有料だそうです（非営利の場合は無料で使えるようです）。

さらにfancyBox3というものも公開されたようです。スマートデバイスに対応していたり拡大できたりなにやら高機能っぽいですが、こちらも商用利用は有料だそうです（詳しくはサイトをご確認ください）。［2017/03追記］

<a href="画像のパス" title="（必要であれば）画像のタイトル" rel="group">画像1</a>

$(function() {
    $('a').fancybox();
});

Top