Lightbox効果をFancyboxにスイッチ

jQueryのLightbox効果のプラグインをFancyboxに移行することにしました。

サンプルのコードをよく読んでいなかったりして、コチラの手際が悪くて躓いていましたのでメモとして残しておきます。自分でも使い方はよくわかっていなくて、細かな解説ができませんのでそこのところはよろしく--ということで

Movable Typeテーマ、mtVicuna Simple(https://github.com/naoaki011/mt5-theme-mtvicuna-simple)を使われている環境のかたは、bundleされているようですのでプラグイン上で設定されたほうが早いです（たぶん）

設置までの大まかな流れ

• Fancybox一式をダウンロード、展開、サーヴァーにあげる
• jQuery本体の読み込み（CDN経由を推奨するとFacyboxのサイトには記載されている）
• Fancyboxのプラグインファイルとlightbox効果のスタイルシートを読み込ませる
• Fancyboxを有効にする
• 記事内で使用する箇所をFancybox用に調整する
• 編集記事を更新して完了

Facyboxのダウンロードは以下より。この記事作成の時点でヴァージョンは1.3.4でした

• Fancybox (Downloadのリンクバナーから)　

jQueryのロードは、Google APIs経由で

Lightbox表示のためのスタイルをhead要素に

<link rel="stylesheet" href="PATH/TO/fancybox/jquery.fancybox-1.3.4.css" />
 <!-- ファイル名の箇所はfancyboxフォルダ内のCSSファイルを参照のこと -->

次のようなことでFacyboxが使えるようになるみたいです。これがないと通常の画像リンクをクリックしたときと同じです。

class属性の値がfacyboxというものだったとして

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

<a href="test1.jpg" class="fancybox">
    <img src="test1_thumb.jpg" alt="" />
</a>

グループを使う場合は（my_groupというclassがあるとして）、

<script type="text/javascript">
$(document).ready(function() {    $(a[rel=my_group]).fancybox({
                   'transitionIn'       : 'none',
                   'transitionOut'    : 'none',
                   'titlePosition'      : 'over'
   });});
</script>

・・・・・・
<a href="test1.jpg" rel="my_group" title="test1">
    <img src="test1_thumb.jpg" alt="" />
</a>
<a href="test2.jpg" rel="my_group" title="test2">
    <img src="test2_thumb.jpg" alt="" />
</a>・・・・・・

あと細かなカスタマイズとかは、
Tips & Tricks をみるといろいろ記載されているようです

オプションとかメソッドの一覧は以下に

• Fancy lightbox alternative| API & Options