Fancy box

jQuery

Fancy boxの設置

  1. 公式サイトよりダウンロード→解凍
  2. 「source」フォルダを「fancybox」にリネーム
  3. サムネイル用とクリックしたときに出る画像を2種類用意。
    (サムネイル : 200×133 メイン画像 : 640×400)
  4. htmlの設置

htmlの設置

  • head内に記述
<link rel="stylesheet" href="css/style.css" media="all">
<link rel="stylesheet" href="css/jquery.fancybox.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
  • body内に記述
<ul id="itemContainer">
<li><a class="fancybox" href="img/main-image1.jpg" data-fancybox-group="gallery"><img src="img/1.jpg" style="width:154px" alt="" /></a></li>
<li><a class="fancybox" href="img/main-image2.jpg" data-fancybox-group="gallery"><img src="img/2.jpg" alt="" /></a></li>
</ul>

<script>
$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});
  • メイン画像サイズの変更
$(document).ready(function() {
	$('.fancybox-media').fancybox({
		maxWidth	: 640,//クリックした後に出てくる画像の大きさ指定
		maxHeight	: 337,
		openEffect  : 'none',
		closeEffect : 'none',
		helpers : {
			media : {}
		}
	});
});
</script>