とても有名なプラグインですが、今まで使ってみたことがなかったので試してみました。Lightbox風に画像をポップアップして表示するjQueryのプラグインです。以前紹介したColorBoxに似たような感じです。こちらのfancyBoxはバージョン2になってからレスポンシブになっているみたいです。その他にもヘルパーを使って拡張機能なんかも色々つけれるのでとてもバリエーション豊な印象を受けました。ということで適当なサンプルも作ってみましたので、以下使い方と合わせてどうぞ。
[ads_center]
使い方
以下のURLからファイルをダウンロードします。
fancyBox – Fancy jQuery Lightbox Alternative
jQuery本体とCSS、JSファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="jquery.fancybox.js"></script>
マウスホイールでも画像を切り替えたりしたい場合はこちらも読み込んでおきます。
<script type="text/javascript" src="jquery.mousewheel-3.0.6.pack.js"></script>
あとはポップアップさせる画像を指定するスクリプトを記述します。
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
HTML側はこんな感じです。
<p>
<a class="fancybox" href="images/img1.jpg" data-fancybox-group="gallery" title="image1"><img src="images/img1.jpg" alt="" /></a>
<a class="fancybox" href="images/img2.jpg" data-fancybox-group="gallery" title="image2"><img src="images/img2.jpg" alt="" /></a>
<a class="fancybox" href="images/img3.jpg" data-fancybox-group="gallery" title="image3"><img src="images/img3.jpg" alt="" /></a>
</p>
これだけで簡単に実装できちゃいます。
オプションも色々あるので自分に合ったカスタマイズもできます。
ちなみに上記のオプションはこんな感じです。
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'elastic',
openSpeed : 700,
closeEffect : 'elastic',
closeSpeed : 700,
closeClick : true,
helpers: {
title : {
type : 'inside'
},
overlay : {
speedIn : 500,
opacity : 0.95,
css : {
'background-color' : '#fff'
}
}
}
});
});
</script>
ポップアップを開いたり閉じたりするスピードや背景色なんかもカスタマイズできます。
ヘルパーを使ってポップアップ時にサムネイルを追加
Thumbnail helperを使えば、画像がポップアップされた時、下部に同グループ内のサムネイル画像を表示させることができます。
Thumbnail helperを使う場合は、head内に専用のCSS、JSファイルを指定して読み込ませます。
<link rel="stylesheet" type="text/css" href="jquery.fancybox-thumbs.css?v=2.0.3" /> <script type="text/javascript" src="jquery.fancybox-thumbs.js?v=2.0.3"></script>
あとはサムネイルのサイズなんかをオプションで指定できます。
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 60
}
}
});
});
</script>
thumbsのwidthとheightの数値でサムネイルのサイズを調整できます。
あと、タイトルにも書きましたがレスポンシブにも対応しているのでディスプレイサイズを変更してもそれ合うように調整してくれます。ヘルパーは他にもありますし、オプションなんかは結構たくさんあるので詳しくは公式サイトで確認してみて下さい。
他にも似たようなプラグインでColorBoxというのがあるので、こちらも人気があります。
