Lightbox 風に画像や動画をオーバレイ表示できるjQueryプラグイン「Fancybox」｜jQueryプラグイン・ライブラリ

Lightbox 風に画像や動画をオーバレイ表示できるjQueryプラグイン「Fancybox」

スポンサード

Lightboxのように画像をオーバーレイで拡大表示できるjQuery プラグイン Fancybox。

この手のプラグインは他にも色々ありますが、Fancybox の魅力は画像以外にもYoutube 動画もLightbox風に表示できるという「汎用性の高さ」と、画像拡大時のエフェクトを調整できたり、サムネイル付きのイメージギャラリーができるなどの「カスタマイズのしやすさ」かなと思います。

1 Fancybox のダウンロード
2 Fancybox の設置
3 画像や動画をオーバーレイで表示する

Fancybox のダウンロード

以下のページより Fancybox のファイルをダウンロードします。

Fancybox

Fancybox の設置

jquery ファイルと一緒に Fancybox のjavascript ファイルとcss ファイルを <head> 内に設置します。

※オーバーレイ用の画像ファイルや、動画を扱うための別途プラグインファイルなどもありますので、
fancybox/ のようなフォルダに一式まとめてサーバへアップされることをオススメします。

<link rel="stylesheet" href="./fancybox/jquery.fancybox.css" />
<script src="./jquery.min.js"></script>
<script src="./fancybox/jquery.fancybox.js"></script>
<script>
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

画像や動画をオーバーレイで表示する

早速 Fancybox を使って基本的な画像のオーバーレイ表示をやってみます。

画像を「単体」で表示する

まずは基本的な画像の表示方法です。

<script>
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>
		
<a class="fancybox" href="./images/fancybox01.jpg"
title="画像をキャプション付きでオーバーレイ表示する">
<img src="./images/fancybox01.jpg" /></a>

a class="fancybox" のリンクをクリックすることで、画像をLightbox のようにオーバーレイ表示させることができます。
※.fancybox の部分は自由に変更できます。

また、画像をキャプション付きで表示する場合は a タグに title="" を設定します。

Fancybox による画像単体のオーバーレイ表示デモ

エフェクトの変更

先ほどの例とは違ったエフェクトを使って、演出を変えてみます。

<script>
	$(document).ready(function() {
		$(".fancybox-effects").fancybox({
			padding: 0,
			openEffect : 'elastic',
			openSpeed  : 150,
			closeEffect : 'elastic',
			closeSpeed  : 150,
			closeClick : true,
		});
	});
</script>

<a class="fancybox-effects" href="./images/fancybox02.jpg">
<img src="./images/fancybox02.jpg" /></a>

上記例だと、拡大画像が下から飛び出してくるような見せ方になります。

Fancybox によるエフェクトの変更のデモ

イメージギャラリーとして複数の画像を表示

拡大画像上に左右の矢印ボタンを表示して、複数の画像をスライドしながら切り替えるイメージギャラリーの実装方法です。

<script>
	$(document).ready(function() {
		$(".fancybox-buttons").fancybox({
			buttons	: {}
		});
	});
</script>

<a href="./images/fancybox01.jpg" class="fancybox-buttons" data-fancybox-group="button">
<img src="./images/fancybox01.jpg" alt="" /></a>
<a href="./images/fancybox02.jpg" class="fancybox-buttons" data-fancybox-group="button">
<img src="./images/fancybox02.jpg" alt="" /></a>
<a href="./images/fancybox03.jpg" class="fancybox-buttons" data-fancybox-group="button">
<img src="./images/fancybox03.jpg" alt="" /></a>

data-fancybox-group="button" を利用して、オーバーレイ表示された画像上に
「←」「→」のボタンを設置します。

イメージギャラリーとして複数画像を表示するデモ

サムネイル付きのイメージギャラリー

今度は、サムネイル付きで複数の画像を切り替えて表示するイメージギャラリーです。

こちらは Fancybox に同梱してる helper フォルダ内の
jquery.fancybox-thumbs.css、jquery.fancybox-thumbs.js のファイルも使います。

<link rel="stylesheet" href="./jquery.fancybox.css">
<link rel="stylesheet" href="./helpers/jquery.fancybox-thumbs.css">
<script src="./jquery.min.js"></script>
<script src="./jquery.fancybox.js"></script>
<script src="./helpers/jquery.fancybox-thumbs.js"></script>
<script>
	$(document).ready(function() {
		$('.fancybox-thumbs').fancybox({
			helpers : {
				thumbs : {
					width  : 50,
					height : 50
				}
			}
		});
	});
</script>

thumbs : {width:50, height:50} はサムネイルの大きさですので、サイトに合わせて自由に変更できます。

HTML 側の記述はこんな感じです。

<a href="./images/fancybox01.jpg" class="fancybox-thumbs" data-fancybox-group="thumbs">
<img src="./images/fancybox01.jpg" alt="" /></a>
<a href="./images/fancybox02.jpg" class="fancybox-thumbs" data-fancybox-group="thumbs">
<img src="./images/fancybox02.jpg" alt="" /></a>
<a href="./images/fancybox03.jpg" class="fancybox-thumbs" data-fancybox-group="thumbs">
<img src="./images/fancybox03.jpg" alt="" /></a>

サムネイル付きでイメージギャラリーを表示するデモ

Youtube 動画の表示

Fancybox では Youtube 動画もオーバレイ表示できます。

こちらもサムネイル付きのイメージギャラリー同様、Fancybox に同梱してる helper フォルダ内の jquery.fancybox-media.js ファイルを利用します。

<link rel="stylesheet" href="./jquery.fancybox.css">
<script src="./jquery.min.js"></script>
<script src="./jquery.fancybox.js"></script>
<script src="./helpers/jquery.fancybox-media.js"></script>
<script>
	$(document).ready(function() {
		$('.fancybox-media').fancybox({
			openEffect  : 'none',
			closeEffect : 'none',
			helpers : {
				media : {}
			}
	});
});
</script>

HTML 側の記述はこんな感じです。

<a class="fancybox-media" href="http://www.youtube.com/watch?v=0QRO3gKj3qw">
<img src="http://i1.ytimg.com/vi/0QRO3gKj3qw/hqdefault.jpg"></a>

a タグに class="fancybox-media" を指定し、href にYoutube 動画のURLを指定します。
動画のサムネイルをクリックして、Youtube動画をLightbox 風に表示して再生する感じです。

Youtube 動画の表示デモ

スポンサード