LightBox風に画像をポップアップして表示するjQueryのプラグインでColorBoxに似たようなビジュアルになっています。レスポンシブに対応していてカスタマイズも出来るので色々と便利に利用できそうですね。
1.fancyBoxからファイル一式をダウンロード
fabcyBox -Fancy jQuery Lightbox Alternative
2.jQuery本体とCSS,JSファイルを読み込む
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--//* CSS読み込み *//--> <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen"/> <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css" media="screen"/> <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css" media="screen"/> <!--//* JS読み込み *//--> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/jquery.fancybox.js"></script> <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script> <script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script> <script type="text/javascript" src="js/jquery.fancybox-buttons.js"></script> <script type="text/javascript" src="js/jquery.fancybox-media.js"></script> <script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script> |
▼マウスホイールでも画像を切り替えたい場合には、こちらも読み込んでおきます。
jquery-mousewheelをダウンロード
|
1 |
<script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script> |
3.<head>内にポップアップ用スクリプトを記述
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function(){ $('.fancybox').fancybox(); }); </script> |
4.HTMLを記述
|
1 2 3 4 5 |
<p> <a class="fancybox" href="images/img1.jpg" data-fancybox-group="gallery" title="imege1"><img src="images/img1.jpg" alt="" /></a> <a class="fancybox" href="images/img2.jpg" data-fancybox-group="gallery" title="imege2"><img src="images/img2.jpg" alt="" /></a> <a class="fancybox" href="images/img3.jpg" data-fancybox-group="gallery" title="imege3"><img src="images/img3.jpg" alt="" /></a> </p> |
これで完成です。
★カスタマイズ
1.ButtonHelper
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-button" rel="fancybox-button" href="images/sky/sky1.jpg" title="sky1"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-button" rel="fancybox-button" href="images/sky/sky2.jpg" title="sky2"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-button" rel="fancybox-button" href="images/sky/sky3.jpg" title="sky3"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-button" rel="fancybox-button" href="images/sky/sky4.jpg" title="sky4"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-button" rel="fancybox-button" href="images/sky/sky5.jpg" title="sky5"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--/*** Button helper JS ***/--> <script type="text/javascript"> $(document).ready(function(){ $('.fancybox-button').fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : false, helpers: { title: { type: 'inside' }, buttons: {} } }); }); </script> |
2.ThumbnailHelper
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-thumb" rel="fancybox-thumb" href="images/sky/sky1.jpg" title="sky1"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-thumb" rel="fancybox-thumb" href="images/sky/sky2.jpg" title="sky2"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-thumb" rel="fancybox-thumb" href="images/sky/sky3.jpg" title="sky3"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-thumb" rel="fancybox-thumb" href="images/sky/sky4.jpg" title="sky4"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-thumb" rel="fancybox-thumb" href="images/sky/sky5.jpg" title="sky5"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--/*** Thumbsnail helper JS ***/--> <script type="text/javascript"> $(document).ready(function(){ $('.fancybox-thumb').fancybox({ prevEffect : 'none', nextEffect : 'none', helpers: { title: { type: 'outside' }, thumbs: { width: 50, height: 50} } }); }); </script> |
3.背景の色変更(薄紫色)
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-bgc" href="images/sky/sky1.jpg" data-fancybox-group="gallery" title="sky1"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-bgc" href="images/sky/sky2.jpg" data-fancybox-group="gallery" title="sky2"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-bgc" href="images/sky/sky3.jpg" data-fancybox-group="gallery" title="sky3"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-bgc" href="images/sky/sky4.jpg" data-fancybox-group="gallery" title="sky4"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-bgc" href="images/sky/sky5.jpg" data-fancybox-group="gallery" title="sky5"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--/*** 背景色変更JS(薄紫色) ***/--> <script type="text/javascript"> $(document).ready(function(){ $('.fancybox-bgc').fancybox({ helpers: { overlay: { css: { 'background' : 'rgba(58, 42, 45, 0.95)' } } } }); }); </script> |
4.aリンクタイトルを外に表示サンプル
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-titout" href="images/sky/sky1.jpg" data-fancybox-group="gallery" title="今日は澄み切った青い空1"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-titout" href="images/sky/sky2.jpg" data-fancybox-group="gallery" title="今日は澄み切った青い空2"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-titout" href="images/sky/sky3.jpg" data-fancybox-group="gallery" title="今日は澄み切った青い空3"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-titout" href="images/sky/sky4.jpg" data-fancybox-group="gallery" title="今日は澄み切った青い空4"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-titout" href="images/sky/sky5.jpg" data-fancybox-group="gallery" title="今日は澄み切った青い空5"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--/*** aリンクタイトルを外に表示JS ***/--> <script type="text/javascript"> $(document).ready(function(){ $('.fancybox-titout').fancybox({ helpers: { title: { type: 'outside' } } }); }); </script> |
5.画像上の右クリック制御
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-rightNot" href="images/sky/sky1.jpg"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-rightNot" href="images/sky/sky2.jpg"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-rightNot" href="images/sky/sky3.jpg"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-rightNot" href="images/sky/sky4.jpg"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-rightNot" href="images/sky/sky5.jpg"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--/*** 画像上の右クリック制御サンプルJS ***/--> <script type="text/javascript"> $(document).ready(function(){ $('.fancybox-rightNot').attr('rel', 'gallery').fancybox({ beforeShow: function(){ /* Disable right click */ $.fancybox.wrap.bind("contextmenu", function(e){ return false; }); } }); }); </script> |
6.画像の枠を消す
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-frame" href="images/sky/sky1.jpg"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-frame" href="images/sky/sky2.jpg"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-frame" href="images/sky/sky3.jpg"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-frame" href="images/sky/sky4.jpg"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-frame" href="images/sky/sky5.jpg"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 |
<!--/*** 画像の枠を消したサンプルJS ***/--> <script type="text/javascript"> $(document).ready(function(){ $('.fancybox-frame').attr('rel', 'gallery').fancybox({ padding: 0 }); }); </script> |
7.フェードで画像を切り替える
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-fadeChange" href="images/sky/sky1.jpg" title="sky1"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-fadeChange" href="images/sky/sky2.jpg" title="sky2"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-fadeChange" href="images/sky/sky3.jpg" title="sky3"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-fadeChange" href="images/sky/sky4.jpg" title="sky4"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-fadeChange" href="images/sky/sky5.jpg" title="sky5"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!--/*** フェードで画像を切り替えるサンプルJS ***/--> <script type="text/javascript"> $(document).ready(function(){ (function ($, F) { F.transitions.resizeIn = function() { var previous = F.previous, current = F.current, startPos = previous.wrap.stop(true).position(), endPos = $.extend({opacity : 1}, current.pos); startPos.width = previous.wrap.width(); startPos.height = previous.wrap.height(); previous.wrap.stop(true).trigger('onReset').remove(); delete endPos.position; current.inner.hide(); current.wrap.css(startPos).animate(endPos, { duration : current.nextSpeed, easing : current.nextEasing, step : F.transitions.step, complete : function() { F._afterZoomIn(); current.inner.fadeIn("fast"); } }); }; }(jQuery, jQuery.fancybox)); $(".fancybox-fadeChange") .attr('rel', 'gallery') .fancybox({ nextMethod : 'resizeIn', nextSpeed : 250, prevMethod : false, helpers : { title : { type : 'inside' } } }); }); </script> |
8.ひとつの画像だけサムネイル表示させ、ギャラリーとして全て見せる
[HTML]
|
1 2 3 4 5 6 7 8 9 |
<p> <a class="fancybox-galleryBox" href="images/sky/sky1.jpg" title="sky1"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <div class="hidden"> <a class="fancybox-galleryBox" href="images/sky/sky2.jpg" title="sky2"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-galleryBox" href="images/sky/sky3.jpg" title="sky3"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-galleryBox" href="images/sky/sky4.jpg" title="sky4"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-galleryBox" href="images/sky/sky5.jpg" title="sky5"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </div> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 |
<!--/*** １つの画像だけサムネイル表示させ、ギャラリーとして全て見せるサンプルJS ***/--> <script type="text/javascript"> $(document).ready(function(){ $('.fancybox-galleryBox').attr('rel', 'gallery').fancybox({ padding: 0 }); }); </script> |
9.ページを開いたと同時に画像をポップアップさせる
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-trigger" href="images/sky/sky1.jpg" title="sky1"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-trigger" href="images/sky/sky2.jpg" title="sky2"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-trigger" href="images/sky/sky3.jpg" title="sky3"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-trigger" href="images/sky/sky4.jpg" title="sky4"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-trigger" href="images/sky/sky5.jpg" title="sky5"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--/*** ページを開いたと同時に画像をポップアップさせるサンプルJS ***/--> <script type="text/javascript"> $(document).ready(function(){ // Active fancyBox $('.fancybox-trigger').attr('rel', 'gallery').fancybox({ padding: 0 }); //Launch fancyBox on first element $('.fancybox-trigger').eq(0).trigger('click'); }); </script> |
10.ウィンドウに合わせたサイズのポップアップを表示する
[HTML]
|
1 2 3 4 5 6 7 |
<p> <a class="fancybox-maxView" href="images/sky/sky1.jpg"><img src="images/sky/sky1.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-maxView" href="images/sky/sky2.jpg"><img src="images/sky/sky2.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-maxView" href="images/sky/sky3.jpg"><img src="images/sky/sky3.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-maxView" href="images/sky/sky4.jpg"><img src="images/sky/sky4.jpg" width="180" height="120" alt="" /></a> <a class="fancybox-maxView" href="images/sky/sky5.jpg"><img src="images/sky/sky5.jpg" width="180" height="120" alt="" /></a> </p> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!--/*** ウィンドウに合わせたサイズのポップアップを表示するサンプルJS ***/--> <script type="text/javascript"> $(document).ready(function(){ // Active fancyBox $('.fancybox-maxView').attr('rel', 'gallery').fancybox({ padding : 0, margin : 0, nextEffect : 0, prevEffect : 0, autoCenter : 0, afterLoad : function(){ $.extend(this,{ aspectRatio: false, type: 'html', width: '100%', height: '100%', content: '<div class="fancybox-image" style="background-image:url(' + this.href +'); background-size: cover; background-position: 50% 50%; bacjground-repeat: no-repeat; height: 100%; width: 100%;" /></div>' }); } }); //Launch fancyBox on first element $('.fancybox-trigger').eq(0).trigger('click'); }); </script> |
以上になります。
様々なオプションが備わっているのでサイトの仕様に合わせて使えるのでとても便利ですね。