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

前記事で、はてなブログの画像ポップアップ機能を表示画像そのものではなくオリジナル画像に変更する 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 までお願いします。