FancyBoxでswfのサイズを自由に変える

jQueryのプラグインでクライアントワークにもかなりお世話になっているFancyBox。
画像はもちろんのこと、swfやiframe、Ajaxなどもオシャレにポップアップしてくれる優れものです。

ダウンロードはこちらのサイトから。

このFancyBox、画像のサイズは画像に合わせて自動で変化するようにできる（デフォルト設定でなっている）のですが、画像以外の場合は設定が必要です。

今回はswfファイルのサイズをフレキシブルに変えられるようにする方法を紹介します。

1. jquery.metadata.jsというプラグイン

FancyBoxは1.3.1バージョンからjQueryのjquery.metadata.jsというプラグインをサポートしているそうです。
このプラグインとFancyboxを併用します。

公式サイトのプラグインのURLがリンク切れしているようです。
こちらのサイトからダウンロードできます。

2. headに記述

今回必要なものは

• jQuery本体
• FancyBox
• Metadata・・・先述したjquery.metadata.jsというファイル
• FancyBoxのCSS

HTMLのheadに上記のファイルを読み込みます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />

ファイルの階層などは調整してください。
上記の場合は、Fancyboxをダウンロードし、解凍後、フォルダごとアップしています。
また、Metadataのjsは直下にアップしています。

jQueryソース

bodyタグのすぐ下に記述します。

<script type="text/javascript">
$(document).ready(function() {			
	$("a.fancybox-swf[rel=my_group]").fancybox();
	$("a.fancybox-swf2[rel=my_group]").fancybox();
});
</script>

• fancybox-swfとfancybox-swf2という2種類のクラスを作成することで、2種類のサイズのswfファイルが設定できます。いくつでも追加可能です。
• [rel=my_group]は無くてもOkです。
  次へ、前へといくつかのswfを続けて表示する場合に使います。my_groupは任意の名前です。

HTMLソース

<div class="s_content">
   <a class="fancybox-swf {width:320,height:240}" rel="my_group" href="swf/01.swf" title="SWF file 1">
      <img alt="SWF file 1" src="images/01.jpg" />
   </a>
   <p align="center">SWF file 1</p>
</div>

<div class="s_content">
   <a class="fancybox-swf2 {width:780,height:275}" rel="my_group" href="swf/02.swf" title="SWF file 2">
      <img alt="SWF file 2" src="images/02.jpg"/>
   </a>
   <p align="center">SWF file 2</p>
</div>

• 2行目と9行目

クラスはjQueryソースで設定したクラス名です。
今回使用したMetadataというプラグインは{width:320,height:240}のようにサイズを記述することでfancyboxにそのサイズを反映させることができるのです。
今回は2種類のクラス名で2種類のサイズのswfファイルを設定しています。

注意すべきところは、1つのクラスに対して1種類の値しか設定できないということです。
例えば、上記のソースに下記を追加します。

<div class="s_content">
   <a class="fancybox-swf {width:500,height:300}" rel="my_group" href="swf/03.swf" title="SWF file 1">
      <img alt="SWF file 1" src="images/03.jpg" />
   </a>
   <p align="center">SWF file 3</p>
</div>

fancybox-swfというクラスは既に別のサイズで指定されているので、追加分のサイズは反映されないようです。
上記の場合も先に記述した{width:320,height:240}部分が反映されます。

新たに{width:500,height:300}というサイズのswfを指定したい場合は、jQueryソースに戻り、以下のように追加します。

$("a.fancybox-swf3[rel=my_group]").fancybox();

そしてHTML部分は以下のように。

<div class="s_content">
   <a class="fancybox-swf3 {width:500,height:300}" rel="my_group" href="swf/03.swf" title="SWF file 3">
      <img alt="SWF file 3" src="images/03.jpg" />
   </a>
   <p align="center">SWF file 3</p>
</div>

fancybox-swf3という新しいクラスで指定したサイズが反映されるようになります。

• 3行目と10行目

サムネイルは画像として用意します。

CSSソース

今回はCSS自体は重要ではないですが、一応以下のように。

.s_content {
  float:left;
  width:192px;
  height:180px;
  margin: 30px;
}