FancyBoxのダウンロードと使い方をご紹介

JavaScriptのコードを作成できるjQueryのプラグイン「FancyBox」は、JavaScriptのライブラリです。Webサイト内の画像をクリックすると、ポップアップウィンドウが表示されます。また、1つのギャラリーに複数の画像を表示し、それぞれのポップアップにタイトルをつけることができる、とても便利なプラグインです。

2.表示される画像

3.複数画像の表示

4.タイトルを持つ画像の表示

関連読書： 漫画ビューアの比較/おすすめの画像・漫画ビューア「無料」

FancyBoxの概要

fancyBox jQueryプラグインは、Webサイトに直接画像を表示することができるプラグインです。ファイルをアップロードしてから、headのコードを書くことができます。テキスト本文の中の画像を表示する部分に、各画像の表示方法を指定するコードを書くだけです。Webサイトの見栄えが良くなるので、WordPressでサイトを構築したら、すぐに使うようにしましょう。

ここでは、Webサイトの画像をLightboxのようにWebページ上に表示するjQueryプラグイン「FancyBox」を紹介します。ここでは、画像以外のポップアップや表示オプションの使い方を紹介します。

FancyBoxオプションの選択

FancyBox では、これらのオプションを指定することができます。利用可能なオプションは、[オプション]を参照してください。

• width：ポップアップ・ウィンドウの幅
• height：ポップアップ・ウィンドウの高さ
• margin：ポップアップ・ウィンドウの余白
• changefade：画像が切り替わる速さ
• type：対応コンテンツの選択（image, ajax, iframe, swf, inline

YouTubeポップアップ

class属性に "ifreme"、を追加し、本文にYouTubeの埋め込みコードを使ったソースコードを記述します。

1.YouTubeの埋め込みコードです。どうすれば入手できますか？

YouTube動画の下部にある「共有」をクリックし、「共有リンクに埋め込む」をクリックします。すると、「動画を埋め込む」にコードが表示されます。src=" ""の部分の内容は、「https://www.youtube.com/embed/□□」です。

2.ソースコード

Google Map popup

Google Map popup を表示するには class 属性に "ifreme" を付け、 href 属性に Google Map 埋め込みコードを設定します。このコードはbodyの中にあります。

1.Google Mapの埋め込みコードの取得方法

Google Mapで表示したい地図を開き、画面左上の横棒が3本ある「メニュー」ボタンをクリックして「地図を共有または埋め込む」をクリックし、「共有」画面で「共有」をクリックしてください。共有画面」で「地図を埋め込む」をクリックします。入力したコードが「共有」画面の右上に表示されます。コードの「src=」「」の部分の内容は、「https://www.google.com/maps/embed?pb=□□」です。

2.ソースコード

JavaScriptライブラリjQueryのプラグイン「FancyBox」を使用すると、サイト内の画像だけでなくYouTube動画やGoogle Mapも簡単にポップアップ表示させることが可能です。見やすいサイト作りに活用できます。