Lightboxのように画像をオーバーレイで拡大表示できるjQueryプラグインFancybox。
この手のプラグインは他にも色々ありますが、Fancyboxの魅力は画像以外にもYoutube動画もLightbox風に表示できるという「汎用性の高さ」と、画像拡大時のエフェクトを調整できたり、サムネイル付きのイメージギャラリーができるなどの「カスタマイズのしやすさ」かなと思います。
Fancybox のダウンロード
以下のページよりFancyboxのファイルをダウンロードします。Fancybox
Fancybox の設置
jqueryファイルと一緒にFancyboxのjavascriptファイルとcssファイルを<head>内に設置します。※オーバーレイ用の画像ファイルや、動画を扱うための別途プラグインファイルなどもありますので、
fancybox/のようなフォルダに一式まとめてサーバへアップされることをオススメします。
|
1 2 3 4 5 6 7 8 |
<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を使って基本的な画像のオーバーレイ表示をやってみます。画像を「単体」で表示する
まずは基本的な画像の表示方法です。|
1 2 3 4 5 6 7 8 9 |
<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による画像単体のオーバーレイ表示デモ
エフェクトの変更
先ほどの例とは違ったエフェクトを使って、演出を変えてみます。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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によるエフェクトの変更のデモ
イメージギャラリーとして複数の画像を表示
拡大画像上に左右の矢印ボタンを表示して、複数の画像をスライドしながら切り替えるイメージギャラリーの実装方法です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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のファイルも使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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側の記述はこんな感じです。
|
1 2 3 4 5 6 |
<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ファイルを利用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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側の記述はこんな感じです。
|
1 2 |
<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動画の表示デモ
コメント