WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

高機能なLightBox系プラグイン「FancyBox」

jQueryプラグイン「fancyBox」は画像だけで無く、YouTubeやGoogleMapなどにも対応しているLightBox系のプラグインです。


f:id:yachin29:20150617114637p:plain


最新のfancyBoxv 2.x からライセンスが変わり、商用(営利目的)の場合は有料となっているためライセンスの取り扱いに注意が必要です。

ライセンスの詳しい内容
Creative Commons — 表示 - 非営利 3.0 非移植 — CC BY-NC 3.0

クリエイティブ・コモンズについて
About The Licenses - Creative Commons



fancyBoxv 2.xのダウンロードはこちらから

fancyBox - Fancy jQuery Lightbox Alternative


古いバージョンのv1.3.4は商用利用可能です。
fancyBox v1.3.4のダウンロードはこちらから
Fancybox - Fancy jQuery lightbox alternative


ギャラリー表示(複数の画像をグループ化)する場合

ギャラリー表示にする場合、a要素の rel 属性に同じ値・文字列(何でもOK)を指定しろ、となっていますが、HTML5ではa要素の中に「rel」「name」属性を使うとエラーになるので、注意が必要です。

エラーになるパターン

<a class="fancybox" rel="group1" href="img/01.jpg"><img src="01-s.jpg" alt="" /></a>
<a class="fancybox" rel="group1" href="img/02.jpg"><img src="img/02-s.jpg" alt="" /></a>


エラーにならないパターン
なので、「rel」の代わりに「data-fancybox-group」 属性を使い同じ値・文字列(何でもOK)を指定しましょう。

<a class="fancybox" data-fancybox-group="group1" href="img/01.jpg"><img src="01-s.jpg" alt="" /></a>
<a class="fancybox" data-fancybox-group="group1" href="img/02.jpg"><img src="img/02-s.jpg" alt="" /></a>


また、fancyboxの設定を初期化する事でエラーを回避する事が出来ます。jQueryのattrを使ってrel 属性を指定し、a要素のrel属性を削除します。

<script>
jQuery(function($){
  $(".fancybox").attr('rel', 'group1').fancybox();  
});
</script>

FancyBoxには色々なオプションがあるので、さわってみましょう
f:id:yachin29:20150617114307p:plain


index,html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Fancyboxの練習</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.fancybox-media.js"></script>
<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<script>
$(document).ready(function() {
	$(".fancybox").fancybox({
		openEffect	: 'none',
		closeEffect	: 'none'
	});
	
	$(".various").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});

</script>
</head>

<body>
<div id="container">
<ul>
<li><a class="fancybox" rel="gallery1" href="img/01.png"><img src="img/01-s.png" alt="#"></a></li>
<li><a class="fancybox" rel="gallery1" href="img/02.png"><img src="img/02-s.png" alt="#"></a></li>
<li id="right"><a class="fancybox" rel="gallery1" href="img/03.png"><img src="img/03-s.png" alt="#"></a></li>

<li><!--youtube-->
<a class="various fancybox.iframe" href="https://www.youtube.com/embed/-CmadmM5cOk"><img src="img/04-s.png"> </a>
</li>
</ul>
</div>
</body>
</html>


style.css

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

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*スタイル*/
#container {
  width: 660px;
  margin: 50px auto 0;
}
ul {
  overflow: hidden;
}
li {
  float: left;
  margin: 10px;
}