CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

FancyBoxダウンロード・解説

FancyBox - fancy image zooming tool右上にある所から一式ダウロードしてきて下さい。

ダウンロードしてファイルは画像もJSもCSSも全部同じ階層に入っているので、jsと画像共に任意のフォルダに入れて下さい。
※その時fancy.cssに記載されている画像のパスを全部書き換える事を忘れないようにして下さい。それ以外は大乗です。

head内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/jquery.fancybox-1.0.0.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.pack.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {

			$(".main p a").fancybox({
				'hideOnContentClick': true
			});
			
			$("a#custom_1, a#custom_2").fancybox({
				'zoomSpeedIn':	0, 
				'zoomSpeedOut':	0
			});
			
		});

		function getGroupItems(opts) {
			jQuery.each(imageList, function(i, val) {
		        opts.itemArray.push(val);
		    });
		}
		
	</script>

下記ソース部分は普通の画像を読み込む時の場所の指定です。
今回のデモページではmainと言うclassの中のaタグに反応するように記述しています。

$(".main p a").fancybox({
				'hideOnContentClick': true
});

下記ソース部分は、frame呼び出す時に必要なスクリプトです。

	$("a#custom_1, a#custom_2").fancybox({
		'zoomSpeedIn':	0, 
		'zoomSpeedOut':	0
	});
	
});

function getGroupItems(opts) {
	jQuery.each(imageList, function(i, val) {
        opts.itemArray.push(val);
    });
}

それ以外の基本的使い方はLightboxとかと変らず、タイトルを入れたければaタグに。グループ化したければ「rel="group1"」の用に関連させたい画像のaタグの中に入れて下さい。

frame横幅、縦幅の変更に関してはjquery.fancybox-1.0.0.jsの下部にある

frameWidth:		600,
frameHeight:	400,

この部分の数字を任意の大きさに変更して下さい。