IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / WordPress にプラグインなしで fancybox4 導入

WordPress にプラグインなしで fancybox4 導入

2022/08/10 javascript, Wordpress, はてなブログ

はてなブログで運用していた最後のブログをやっと WordPress に移行させました。手間取ったわけではなく、はてなブログの契約が8月10日までありましたので例によって(笑)ギリギリになっただけです。移行させたサイトはこちら。

  • @半径とことこ60分

このサイトに fancybox をプラグインなしで直接導入したという話です。ただし、この記事の内容はやや特殊です。WordPress のブロックエディタで書いた記事に fancybox を導入する場合の方法は次の記事にあります。

WordPressにfancybox4(プラグインなし)
  • fancybox4 は jQuery 不要
  • fancybox4 の導入と使用方法
  • 特殊なケースの導入

fancybox4 は jQuery 不要

fancybox は画像などをモーダルダイアログで表示する javascript の UI です。現在のバージョンは V4 で jQuery も必要なく単体で動きます。そのためかサイトの url も変わっているようです。上のリンクがそのサイトで、下は記録のために残してある過去のサイトとのことです。

  • fancybox
  • fancybox(過去のサイト)

同じような UI で jQuery のライブラリは他にもありますが、fancybox を使うことにしたのはモーダルダイアログで画像を表示した後にそのまま画像を拡大できることです。というのは、今回 WordPress に移行したサイトにはウォーキングで各地に行った際の写真が数多くあり、各記事多くて数十枚の写真をいれています。ですので画質をかなり落とし、画像をクリックすると元画像を表示するようにしています。

はてなブログではもともと Colorbox という同じような jQuery ライブラリが導入されており、それを使っていたのですが、このライブラリは拡大がシームレスに、つまりスマホでのピンチアウトには対応していますがマウスのホイールの拡大縮小には対応していません。

で、この際にといくつか見てみましたらこの fancybox が希望のものにぴったりだったということです。

fancybox4 の導入と使用方法

  • Installation

CDN で直接導入する場合は head タグ内でスタイルシートを読み込み、boby 終了タグ直前で javascript を読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

functions.php で読み込む場合は、

function add_fancybox() {
	wp_enqueue_style( 'fancybox-style', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css' );
	wp_enqueue_script( 'fancybox', 'https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js' , '', '',true);
}
add_action( 'wp_enqueue_scripts', 'add_fancybox' );

fancybox を使用するには、facybox を利用したい要素に data-fancybox のデータ属性を追加するだけです。また、モーダルダイアログで表示するコンテンツは、href 属性か data-src 属性で指定します。

複数の画像などに data-fancybox=”gallery” を指定すればそれだけでグループ化されカルーセルになります。便利ですね。それに結構軽く感じます。まだ確認していませんがオプション指定もいろいろあり思うようにカスタマイズできそうです。

特殊なケースの導入

以上が一般的な導入方法ですが、今回はてなブログから移行したデータはちょっと特殊でして、はてなブログに貼り付ける画像は、はてなフォトライフというウェブアルバムサービスに保存されます。その際、事前に縮小するサイズとオリジナル画像を保存するかどうかを設定できます。

今回のケースでは、オリジナル横幅 4032px の画像を 800px に縮小して保存してありますので、800pxの表示画像をクリックしたらオリジナル画像をモーダルダイアログで表示するようにしなくていけません。また、オリジナル画像がない画像もありますのでその選択をする必要があります。

なお、はてなフォトライフの画像のファイル名は、20220619144926.jpg など日付と時間の文字列がつけられており、オリジナル画像は 20220619144926_original.jpg となります。

ということで、次の script で fancybox を導入しています。

document.addEventListener("DOMContentLoaded", () => {
    const fotos = document.getElementsByClassName('hatena-fotolife');
    [].slice.call(fotos).forEach(foto => {
        foto.addEventListener('click', (e) => {
            const checkImage = (url) => {
                var xhr;
                xhr = new XMLHttpRequest();
                xhr.open("HEAD", url, false);
                xhr.send(null);
                return xhr.status;
            };
            const src = e.target.getAttribute('src');
            const orgImageUrl = src.replace(".jpg", "_original.jpg");
            if(checkImage(orgImageUrl) == 200){
                Fancybox.show(
                    [
                        {
                            src: orgImageUrl,
                            type: "image",
                        },
                    ],
                    {
                        dragToClose: false,
                    }
                );
            }else{
                Fancybox.show(
                    [
                        {
                            src: "<div>この画像にはオリジナル画像はありません</div>",
                            type: "html",
                        },
                    ],
                );
            }
        });
    });
});

やっていることは、クラス名 hatena-fotolife を持ったすべての要素にクリックイベントを設定し、その要素がクリックされれば src 属性から画像 url を取り出し、オリジナル画像が存在するかどうかを確認し、存在する場合はその url を fancybox に渡し、存在しなければその旨を html で渡します。

ということで、導入サイトをご覧ください。

志段味古墳群・しだみ古墳群ミュージアム
WordPressでiframeが表示されない(解決)
はてなブログProを解約したらエェ〜?!
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com