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. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  2. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  3. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  4. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  5. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  6. ArtDesignSlider

    JavaScript

    レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」

    ArtDesignSliderは豊富なエフェクトでレスポンシブにも対応…

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP