初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery プラグイン Fancybox

jQueryプラグイン・Fancyboxを使ってみました。
画像をクリックするとふんわり大きく表示されたり
Youtubeを表示したら色々なことが出来ます。




f:id:bellsmarket:20150316194528p:plain:w400
f:id:bellsmarket:20150316194533j:plain:w400

<!DOCTYPE	 html>
<html>
<head>
<meta charset="UTF-8">
<title>Fnacy Box</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script >
$(document).ready(function() {
    $(".single_1").fancybox({
    	helpers : {
    		title : {
    			type : 'over'
    		}
    	}
    });
});
$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 600,
		maxHeight	: 400,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'fade',
		closeEffect	: 'fade'
	});
});
</script>
</head>

<body>
<div id="container">
	<div id="content">
		<ul id="itemContainer">
			<li><a class="single_1" href="img/01.png" title=="#"><img src="img/01_thum.png" title=="#"></a></li>
			<li><a class="single_1" href="img/02.png" title=="#"><img src="img/02_thum.png" title=="#"></a></li>
			<li><a class="single_1" href="img/03.png" title=="#"><img src="img/03_thum.png" title=="#"></a></li>
			<li><a class="single_1" href="img/04.png" title=="#"><img src="img/04_thum.png" title=="#"></a></li>
			<li><a class="single_1" href="img/05.png" title=="#"><img src="img/05_thum.png" title=="#"></a></li>
			<li><a class="single_1" href="img/06.png" title=="#"><img src="img/06_thum.png" title=="#"></a></li>
			<li><a class="various fancybox.iframe" href="https://www.youtube.com/embed/8TnP1E7QEmg" title="Newlux - We Will Rock You (Queen Cover) "><img src="img/07_thum.png" title=="#"></a></li>
			<li><a class="various fancybox.iframe" href="https://www.youtube.com/embed/NVD0Q9pTCk4" title="NEWLUX - Get Lucky (Daft Punk Cover) "><img src="img/08_thum.png" title=="#"></a></li>
			<li><a class="various fancybox.iframe" href="https://www.youtube.com/embed/tuzhlm3LIIM" title="Newlux - Billie Jean (Michael Jackson cover) "><img src="img/09_thum.png" title=="#"></a></li>
</ul>
	</div><!--content-->
</div><!--container-->

</body>
</html>
@charset "UTF-8";
/* CSS Document */
/*reset*/
body,div, ul, li, a, img {
	padding: 0;
	margin: 0;
}
img {
	vertical-align:bottom;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
/*layout*/
#container {
	width:682px;
	margin:100px auto;
}
ul {
	padding: 10px;
	overflow:hidden;
	border:1px solid #95AFDA;
	background:#FBECE2;
}
/*フロートしている要素はpaddingは相殺されない*/
li {
	float:left;
	padding:10px;
}
topへ戻る