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

記事コピー防止策になるかもしれないWordPressプラグイン「RSS Footer」前のページ

インスピレーションを感じさせてくれる木のロゴデザイン50次のページ

関連記事

  1. plainModal

    JavaScript

    カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」

    plainModalはシンプルでカスタマイズ性が高いモーダルウィンドウ…

  2. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  3. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

  4. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  5. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP