Lightbox風のスクリプト FancyBox

FancyBox

FancyBoxは分かりやすく言えばLightboxみたいなjQuery Pluginです。

Webページも読み込めますし、デザインもけっこうシンプルでよさげだったので使い方の解説をしておきます。

demo page

…ここからが続き

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,

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

demo page

Comments

cyokodog

cyokodog

デモページが mooVRotatingMenu.js のデモページになってしまってるようですが...

2010年07月12日 11:24

Yuxu

Yuxu

1年以上前のやりとりのようですが、解決法を見つけたので、一応書いておきますね。
最新の1.3.1の場合、jquery.fancybox-1.3.1.cssの中の#fancybox-wrapのposition:absolute;をposition:fixed;に書き直すだけです。
これで、画像の位置を固定できます。
ただし、これだけだと、IE6でfancyboxが動作しなくなります。
なので、アンダースコアハックで_position:absolute;を追加します。
これで、IE6では画像は固定されないが、とりあえずfancyboxは動作するという状態になります。
IE6でも画像を固定するような方法はわかりません。

2010年05月21日 19:43

MIYA

MIYA

FancyBoxははこういう使用になっている為、変更するのは難しいかと思います…

自分の方では少し分からないです。すみません。

2009年04月27日 18:49

kibako

kibako

画像を開いた状態でスクロールした時、画像も一緒にスクロールちゃうのですが、画像の位置を固定するにはどうすればいいのでしょうか?><;初歩的な質問ですみません;

2009年04月24日 02:00

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article