IMUZA.com

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

ホーム / javascript / 【改訂版】はてなブログの画像ポップアップをオリジナル画像に変える

【改訂版】はてなブログの画像ポップアップをオリジナル画像に変える

2020/11/6 javascript, はてなブログ

前記事で、はてなブログの画像ポップアップ機能を表示画像そのものではなくオリジナル画像に変更する Javascript を公開したのですが、画像のファイル容量が大きい場合にダウンロードの待ち時間中の画面に変化がなく停止と勘違いしてしまいますのでローディング画像を表示するようにしました。

前記事:はてなブログの画像ポップアップをオリジナル画像に変える

  • Colorbox のオプション
  • 力技でローディングイメージを表示する
  • 実装サイト
  • お問い合わせ等

Colorbox のオプション

まず、Colorbox でなにか方法はないかオプションを見てみましょう。

  • Colorbox – a jQuery lightbox

日本語の解説サイトもたくさんあるようですのでググってください。

オーバーレイ表示はデフォルトで、透明度は指定可能です。ローディングイメージのオプションはありませんのでデフォルトで表示されるようです。通常は画像がすぐに表示されますので見えません。

ただ、今回のケースは Colorbox に画像URL を渡す前に時間がかかるわけですからオプションではどうにもなりません。

onLoad という、今回は画像になりますが target content をロードする前に発生するコールバックのオプションがあり、何とかできそうにも思いますが、仮にそこで画像の存在チェックをやったとしてもその結果を Colorbox の href に入れる方法がないように思います。

力技でローディングイメージを表示する

onLoad で可能かどうか試してみる前に、まずは力技でローディングイメージを表示するようコードを変更しました。

※自由に使っていただいて構いませんが、転載はしないでください。

window.addEventListener("DOMContentLoaded", () => {
    $(document).off("click","img.hatena-fotolife, img.magnifiable, img.http-image");
    $(document).on("click","img.hatena-fotolife", (e) => {
        const checkImage = (url) => {
            return new Promise((resolve) => {
                const originalUrl = url.replace(".jpg", "_original.jpg");
                const img = new Image();
                img.src = originalUrl;
                img.onload = () => resolve(originalUrl);
                img.onerror = () => resolve(url);
            });
        };
        // オリジナル画像存在チェックに時間がかかる場合があるためcolorboxのオーバーレイを表示
        const overlay = $('#cboxOverlay');
        overlay.css({'display':'block','opacity':'.9'});
        overlay.append('<div style="background: url(/images/loading.gif) no-repeat 50%; height: 100%;"></div>');


        const src = $(e.currentTarget).attr("src");
        checkImage(src).then(result => {
            overlay.empty();
            $(this).colorbox({maxWidth:"95%",maxHeight:"95%",transition:"none",photo:!0,href:result,title:" ",open:!0,opacity:.9});
        });
    });
    $("#cboxContent").on("click", () => $.colorbox.close());
});

  • Colorbox を呼ぶ前に Colorbox のオーバーレイを表示する
  • Colorbox のローディングイメージを表示することも可能だが表示位置指定が面倒なので力技で表示する
  • コントロールが Colorbox に渡ったらローディングイメージを削除する

実装サイト

www.tokotokotekuteku.com

お問い合わせ等

当記事内のスクリプト等によるいかなる損害についても責任を負いかねますので自己責任でご使用ください。

お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。

いちばん美しい世界の絶景遺産 (ナショナルジオグラフィック)

いちばん美しい世界の絶景遺産 (ナショナルジオグラフィック)

  • 発売日: 2020/04/23
  • メディア: 単行本(ソフトカバー)

はてなブログの画像ポップアップをオリジナル画像に変える
はてなブログ:パンくずリストをカスタマイズ
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