「Jquery学習」jquery Fancyboxを使用して画像をオーバーレイで表示する
1.サンプルコード：
<!DOCTYPE html>
<html>
<head>
<title>ソフト、opensource、PG知識まとめ —www.arkgame.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8″ />
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5″></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5″ media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox’).fancybox();
$(“.fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside’
},
overlay : {
speedOut : 0
}
}
});
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
}
</style>
</head>
<body>
<h3>画像を表示</h3>
<p>
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Lorem ipsum dolor sit amet"><img src="20140810_startnews24.jpg" /></a>
</p>
</body>
</html>
2.説明：
2.1 FancyBoxのコアJavascript、css:
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5″></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5″ media="screen" />
2.2 画像ホイールの効果
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
2.3 ボタンcssファイル：
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5″ />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5″></script>
2.4 サムネイルの効果：
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7″ />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7″></script>
2.5 メディアをロードする場合：
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6″></script>
2.6 jqueryライブラリとFancyboxライブラリをインポート
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
3.特徴：
Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
Customizable through settings and CSS
Groups related items and adds navigation.
If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
Support fancy transitions by using easing plugin
Adds a nice drop shadow under the zoomed item
参考URL:http://fancybox.net/