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. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  2. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  3. jQuery Video Extend

    JavaScript

    動画をチャプターごとに区切れる「jQuery Video Extend」

    jQuery Video Extendは動画をチャプターごとに区切った…

  4. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  5. Animated Intro With jQuery

    JavaScript

    プログレスバーつきのカッコいいイントロページを実装する「Animated Intro With jQ…

    シンプルなアニメーションがとてもカッコいいイントロページを実装する「A…

  6. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

コメント

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

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

最近の記事

  1. COMOLI 和紙コットンリストバンド
  2. スターバックス インドネシア アチェ
  3. ベーコンとほうれん草のキッシュ
  4. サンクラフト ポテトング

アーカイブ

PAGE TOP