• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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.cssjquery.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 動画の表示デモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す