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

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

  2. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

  3. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  4. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  5. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

コメント

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

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

最近の記事

  1. 200-DGCAM019
  2. ハクバ GW-PRO RED フォトグローブプロ PL
  3. Soundcore Liberty Air 2
  4. Soundcore Liberty 2
  5. マザーツリー

アーカイブ

PAGE TOP