JavaScript

レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox」

とても有名なプラグインですが、今まで使ってみたことがなかったので試してみました。Lightbox風に画像をポップアップして表示するjQueryのプラグインです。以前紹介したColorBoxに似たような感じです。こちらのfancyBoxはバージョン2になってからレスポンシブになっているみたいです。その他にもヘルパーを使って拡張機能なんかも色々つけれるのでとてもバリエーション豊な印象を受けました。ということで適当なサンプルも作ってみましたので、以下使い方と合わせてどうぞ。

[ads_center]

使い方

以下のURLからファイルをダウンロードします。

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というのがあるので、こちらも人気があります。

関連記事

  1. no-image

    JavaScript

    円形に広がるメニュー実装「expanding action button」

    expanding action buttonは円形に広がるメニューを…

  2. JavaScript

    レスポンシブやスワイプ対応で完成度の高いスライダーのjQueryプラグイン「Slider Pro」

    Slider Proはレスポンシブやタッチ・スワイプに対応したスライダ…

  3. ajSlider

    JavaScript

    シンプルでさりげないアニメーションが素敵なスライドショー実装「ajSlider」

    ajSliderはシンプルなスライドショーを実装することができるjQu…

  4. SweetAlert
  5. Bootstrap Show Password
  6. Animated Toggle Menu

コメント

  1. この記事へのコメントはありません。

  1. 2013年 2月 21日
    トラックバック:勝手にブログカスタマイズ

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP