website logo
  • HOTソフト
  • 画像
  • DVD&BD
  • ゲーム
  • セキュリティ
  • 動画
  • オフィス
  • 音声
  • ユーティリティー
  • HOTソフト
  • 画像
  • DVD&BD
  • ゲーム
  • セキュリティ
  • 動画
  • オフィス
  • 音声
  • ユーティリティー
StreamFab オールインワン
StreamFab オールインワン
StreamFab オールインワン
1000+のサイトから映画やアニメを無制限にダウンロードできます!
Free Download Learn More >
ユーティリティー

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

  • 更新日 2023-01-12
  • By Kira

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

FancyBoxのライセンス

FancyBoxのライセンスは、ご利用のバージョンによって異なる場合があります。

  • バージョン 2 以降。商用利用のみ
  • バージョン1: MITライセンス

この記事では、FancyBox の旧バージョンを紹介します。

関連読書: 「Pale Moon」Firefoxベースのブラウザ

FancyBox のダウンロード

FancyBox はリンクをクリックすることでダウンロードでき、サーバーにアップロードすることができます。管理をしやすくするため、アップロードの際はファイル名を変更してください。

ダウンロード

以下のURLから「Version 1.3.4 (2010/11/11)」をクリックすると、圧縮ファイル「jquery.fancybox-1.3.4.zip」がダウンロードされ、解凍されます。

http://fancybox.net/

ダウンロード

ファイルを送信する

解凍したフォルダ「jquery.fancybox-1.3.4」内の「jquery.fancybox」→「fancybox」をクリックし、その中の画像ファイル(.png)および以下の3ファイルを以下のようにリネームし、サーバーにアップロードしてください。

  • jquery.fancybox-1.3.4.pack.js→fancybox.jsに変更します。
  • jquery.fancybox-1.3.4.css → fancybox.css
  • jquery.easing-1.3.pack.js → easing.js

アップロード

関連読書: 「Google Chrome」のダウンロード方法はここに確認します

FancyBoxです。HTMLの記述

HTMLのソースコードには、画像や複数の画像を表示するためのソースコードと、共通するコードが含まれています。

1.コードコミュ

以下のコードを入力します。

共通コード

2.表示される画像

画像の表示

画像の表示

3.複数画像の表示

複数枚の画像の表示

複数枚の画像の表示

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

タイトル付きの画像の表示

タイトル付きの画像の表示

関連読書: シンプルで利便性高いWebブラウザ「Tungsten」をご紹介

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ポップアップ

YouTubeのポップアップ表示

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

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

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

YouTubeの埋め込みコード取得方法

2.ソースコード

Source code for YouTube popup display

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=□□」です。

How to get embed code for Google Map

2.ソースコード

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

    コメント
    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です。
    送信
    関連記事
    • 使いやすいスクリーンセーバーおすすめ7選!3Dスクリーンセーバーも!
      youjinkin / 2023-01-12
      使いやすいスクリーンセーバーおすすめ7選!3Dスクリーンセーバーも!
    • 【無料】カレンダーソフトおすすめ5選!カレンダー作成もできる!
      youjinkin / 2023-01-12
      【無料】カレンダーソフトおすすめ5選!カレンダー作成もできる!
    • 便利なタイマーソフト・時間管理ソフトおすすめ8選
      youjinkin / 2023-01-12
      便利なタイマーソフト・時間管理ソフトおすすめ8選
    • 「タグソフト」シンプルな付箋ソフトおすすめ8選!テキストエディターも!
      youjinkin / 2023-01-12
      「タグソフト」シンプルな付箋ソフトおすすめ8選!テキストエディターも!
    • 簡単なWindowsカスタマイズソフトトップ10!無料・有料の両方もまとめ!
      youjinkin / 2023-01-12
      簡単なWindowsカスタマイズソフトトップ10!無料・有料の両方もまとめ!
    • エクスプローラ拡張機能おすすめ8選
      youjinkin / 2023-01-12
      エクスプローラ拡張機能おすすめ8選
    人気ソフトランキング
    好きな動画のダウンロード&録画ができる!
    • 1位
    最高の画像編集&動画編集ソフト
    • 1位
    最高の音楽&動画プレーヤーならここに!
    • 1位
    DVD&BDコピーや作成
    • 1位
    最新記事 人気記事
    【2023年最新】YouTubeの音が出ない?!原因と万全なYoutube視聴・保存対処法
    OkawaReiko / 2023-01-16
    【2023年最新】YouTubeの音が出ない?!原因と万全なYoutube視聴・保存対処法
    【Windows10更新】バージョンの21H2に更新する方法を詳しく解説!
    OkawaReiko / 2023-01-16
    【Windows10更新】バージョンの21H2に更新する方法を詳しく解説!
    「絶対安全」無料ID・パスワード管理ソフト
    youjinkin / 2023-01-12
    「絶対安全」無料ID・パスワード管理ソフト
    一番便利な無料イラスト作成ソフトトップ10
    youjinkin / 2023-01-12
    一番便利な無料イラスト作成ソフトトップ10
    使いやすいスクリーンセーバーおすすめ7選!3Dスクリーンセーバーも!
    youjinkin / 2023-01-12
    使いやすいスクリーンセーバーおすすめ7選!3Dスクリーンセーバーも!
    【無料】カレンダーソフトおすすめ5選!カレンダー作成もできる!
    youjinkin / 2023-01-12
    【無料】カレンダーソフトおすすめ5選!カレンダー作成もできる!
    画像や写真の画質をAIで良くするアプリおすすめ5選!
    youjinkin / 2023-01-12
    画像や写真の画質をAIで良くするアプリおすすめ5選!
    画像をアニメ風・イラスト風にするアプリやサイトはこれ!おすすめランキング5選!
    youjinkin / 2023-01-12
    画像をアニメ風・イラスト風にするアプリやサイトはこれ!おすすめランキング5選!
    便利なタイマーソフト・時間管理ソフトおすすめ8選
    youjinkin / 2023-01-12
    便利なタイマーソフト・時間管理ソフトおすすめ8選
    【無料】人気の画面キャプチャーソフトおすすめランキング10選
    youjinkin / 2023-01-12
    【無料】人気の画面キャプチャーソフトおすすめランキング10選
    展開 ∨ 折りたたみ ∧

    ホットトピックス

    • アマゾンプライムダウンロード
    • Disney Plus ダウンロード
    • 画像ビューア
    • dvdfab 11 クラック
    • モザイク 除去 フリー ソフト
    • dvd mp4 変換
    • bd リッピング
    • 写真 3d化 フリーソフト
    • キャラ作成ツール
    • mac dvd リッピング
    • tver 画面録画
    • calibre 縦書き 変換
    • m3u8
    • 車 ブルーレイ
    • m4a mp3 変換 フリーソフト
    StreamFab オールインワン
    StreamFab オールインワン
    StreamFab オールインワン
    >
    1000+のサイトから映画やアニメを無制限にダウンロードできます!
    Free Download Learn More >
    目次
    •FancyBoxのライセンス
      •FancyBox のダウンロード
        •FancyBoxです。HTMLの記述
          •FancyBoxの概要
            •FancyBoxオプションの選択
              •YouTubeポップアップ
                •Google Map popup
                StreamFab オールインワン
                StreamFab オールインワン
                StreamFab オールインワン
                >
                1000+のサイトから映画やアニメを無制限にダウンロードできます!
                Free Download Learn More >
                目次
                •FancyBoxのライセンス
                  •FancyBox のダウンロード
                    •FancyBoxです。HTMLの記述
                      •FancyBoxの概要
                        •FancyBoxオプションの選択
                          •YouTubeポップアップ
                            •Google Map popup
                            • 注目記事
                            • 【2023年最新】YouTubeの音が出ない?!原因と万全なYoutube視聴・保存対処法
                            • 【Windows10更新】バージョンの21H2に更新する方法を詳しく解説!
                            • 「絶対安全」無料ID・パスワード管理ソフト
                            • 一番便利な無料イラスト作成ソフトトップ10
                            • について
                            • お問い合わせ
                            • クッキーポリシー
                            • 利用規約
                            • プライバシーポリシー
                            • ゲスト投稿
                            • SNS フォロー
                            • facebook facebook

                            Copyright © 2022 saikosoft.jp All Rights Reserved.