はてなブログでは記事に画像を挿入しますと自動的にリンクが貼られ、クリックしますとポップアップで画像が表示されます。ただ、ポップアップで表示される画像は元画像と同じものですので、記事そのものを1カラムで表示するスマートフォンでは意味がないですよね。

で、ポップアップでは高解像度のものを表示することはできないかということでいろいろやってみました。

• CSS でリンクを無効にする方法
• はてなブログの画像ポップアップ
• Javascript, jQuery のイベントを削除する
• はてなブログの画像クリックでオリジナル画像を表示する

01CSS でリンクを無効にする方法

現在は意味がないということで画像のリンクは CSS で無効にしています。

img.hatena-fotolife {
    pointer-events: none;
}

編集サイドバーの「写真を投稿」で画像を挿入したり、はてな記法で画像を挿入しますと img タグに hatena-fotolife の class 名が付きます。ですので上記のように pointer-events プロパティに none を指定すればクリックできなくなります。

02はてなブログの画像ポップアップ

画像のポップアップには jQuery のプラグイン colorbox が使われています。

はてなブログのソースを表示し、body の閉じタグの直前にある

https://cdn.blog.st-hatena.com/js/hatenablog.js

このライブラリの中にあります。hatena-fotolife で検索してください。

f(document).on("click","img.hatena-fotolife, img.magnifiable, img.http-image",(function(e){
    var t=e.currentTarget,
        n=f(t);
    if(!n.data("colorbox")){
        var r=n.closest("a").get(0);
        if(!r||r.href===t.src)return 
        n.colorbox({maxWidth:"95%",maxHeight:"95%",transition:"none",photo:!0,href:n.attr("src"),title:" ",open:!0,opacity:.9})

この部分です。

03Javascript, jQuery のイベントを削除する

jQuery の on メソッドで登録されたイベントは off メソッドで削除できます。ただし、セレクタもすべて指定しないと削除されないようです。

$(document).off("click","img.hatena-fotolife, img.magnifiable, img.http-image");

これは削除されますが、

$(document).off("click","img.hatena-fotolife");

これでは削除されません。

その他、onclick, addEventListener は次のように削除できます。

document.onclick = hogehoge();
↓
document.onclick = "";


element.addEventListener("click", hogehoge);
↓
element.removeEventListener("click", hogehoge);

04はてなブログの画像クリックでオリジナル画像を表示する

window.addEventListener('DOMContentLoaded', () => {
    $(document).off("click","img.hatena-fotolife, img.magnifiable, img.http-image");
    $(document).on("click","img.hatena-fotolife", (e) => {
        let src = $(e.currentTarget).attr('src');
        src = src.replace('.jpg', '_original.jpg');
        $(this).colorbox({maxWidth:"95%",maxHeight:"95%",transition:"none",photo:!0,href:src,title:" ",open:!0,opacity:.9});
    });
});

とりあえずは上のコードでオリジナル画像があれば表示されます。

後は、オリジナル画像がなければ元画像を表示するようにし、また、このままですと閉じる場合は「X」しか機能しなくなりますのでどこをクリックしても閉じるようにしなくてはいけません。

次回です。