bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptレスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox」JavaScript2012.01.31レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox」とても有名なプラグインですが、今まで使ってみたことがなかったので試してみました。Lightbox風に画像をポップアップして表示するjQueryのプラグインです。以前紹介したColorBoxに似たような感じです。こちらのfancyBoxはバージョン2になってからレスポンシブになっているみたいです。その他にもヘルパーを使って拡張機能なんかも色々つけれるのでとてもバリエーション豊な印象を受けました。いうことで適当なサンプルも作ってみましたので、以下使い方と合わせてどうぞ。以下のURLからファイルをダウンロードします。AlternativejQuery本体とCSS、JSファイルを読み込みます。src="jquery.fancybox.js"></script>マウスホイールでも画像を切り替えたりしたい場合はこちらも読み込んでおきます。src="jquery.mousewheel-3.0.6.pack.js"></script>あとはポップアップさせる画像を指定するスクリプトを記述します。$('.fancybox').fancybox();});</script>HTML側はこんな感じです。/></a></p>これだけで簡単に実装できちゃいます。オプションも色々あるので自分に合ったカスタマイズもできます。ちなみに上記のオプションはこんな感じです。});});</script>ポップアップを開いたり閉じたりするスピードや背景色なんかもカスタマイズできます。helperを使えば、画像がポップアップされた時、下部に同グループ内のサムネイル画像を表示させることができます。helperを使う場合は、head内に専用のCSS、JSファイルを指定して読み込ませます。src="jquery.fancybox-thumbs.js?v=2.0.3"></script>あとはサムネイルのサイズなんかをオプションで指定できます。});});</script>thumbsのwidthとheightの数値でサムネイルのサイズを調整できます。あと、タイトルにも書きましたがレスポンシブにも対応しているのでディスプレイサイズを変更してもそれ合うように調整してくれます。ヘルパーは他にもありますし、オプションなんかは結構たくさんあるので詳しくは公式サイトで確認してみて下さい。他にも似たようなプラグインでColorBoxというのがあるので、こちらも人気があります。)この記事へのコメントはありません。URL返信をキャンセルする。-URL検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。