jQuery：プラグイン：fancybox - Webデザインのこと、いろいろ

fancyboxの使い方：完成版にリンク
fancyBox - Fancy jQuery Lightbox Alternative：本家サイト

★画像だけでなく、googlemap、作成したサイト、文章、youtubeなどをライトボックスのように表示することができる
f:id:sankoblog:20160404004203p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>fancyboxの使い方</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/jquery.fancybox-media.js"></script>  <!--youtube用-->
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
  <!--↑マウスホイールで縦スクロール用-->
<script>
$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'none',
		closeEffect	: 'none',
		maxWidth	: 600,
		maxHeight	: 400
	});
});
</script>
<script>
$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 600,  //今回はこのサイズで行くけれど、%が普通になる
		maxHeight	: 400,
		fitToView	: false,
		/*width		: '70%',
		height		: '70%',*/
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});
</script>
</head>

<body>
<div id="container">
<h1>fancybox</h1>
<div id="wrapper">
<ul>
<!--↓画像-->
<li><a class="fancybox" data-fancybox-group="gallery1" href="img/01.png"><img src="img/01_s.png" alt="#"></a></li>
<!--↓画像-->
<li><a class="fancybox" data-fancybox-group="gallery1" href="img/02.png"><img src="img/02_s.png" alt="#"></a></li>
<!--↓画像-->
<li><a class="fancybox" data-fancybox-group="gallery1" href="img/03.png"><img src="img/03_s.png" alt="#"></a></li>
<!--↓YouTube-->
<li><a class="various fancybox.iframe fancybox" data-fancybox-group="gallery1" href="https://www.youtube.com/embed/_x1da6VyBmo"><img src="img/04_s.png" alt="#"></a></li>
<!--↓GoogleMap-->
<li><a class="various fancybox.iframe fancybox" data-fancybox-group="gallery1" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.073881070253!2d139.71327906436358!3d35.72440148521234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6bea154935%3A0x66e848601ad02eec!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yT5LiB55uu77yR77yYIO-8s--8qO-8qe-8re-8oeODk-ODqw!5e0!3m2!1sja!2sjp!4v1459242177520"><img src="img/googlemap_icon.png" alt="#"></a></li>
<!--↓Inline  画像＋文章など-->
<li><a class="various fancybox.iframe fancybox" href="../0325_mediaqueries/okazu1_mediaqueries/index_okazu.html"><img src="img/okazu.png" alt="#"></a></li>
<!--youtubeにも a のクラス名に fancybox を追加する-->
</ul>
</div><!--#wrapper-->
</div><!--#container-->
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*reset*/
html,body,h1,ul,li,p {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
ul { list-style: none; }	
a { text-decoration: none; }
body {
	font-size: 16px;
	background: #999;
	}
img {
	border: none;
	vertical-align: bottom;
	}
	
/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
h2 { font-size: 24px; font-size: 2.4rem; }
h3 { font-size: 20px; font-size: 2.0rem; }
h4 { font-size: 18px; font-size: 1.8rem; }
p { font-size: 16px; font-size: 1.6rem }
/*----------------------------------*/
#container {
	margin: 80px auto;
}
#wrapper {
	width: 1100px;
	margin: 0 auto;
	overflow:hidden;
}
h1 {
	color: #FFF;
	letter-spacing: 2px;
	text-align: center;
	backgrond: #963;
}
li {
	margin: 0 50px 50px 0;
	float: left;
}
/*===レスポンシブ対応  (タブレット)===*/
@media screen and (max-width: 959px){
#wrapper {
	width: 740px;
}

/*===レスポンシブ対応  (スマホ)===*/
@media screen and (max-width: 640px){
	#wrapper {
	width: 350px;
	}

}