【Blogger】お手軽に記事内画像をズーム表示出来る JavaScript

2023/10/01 ｜2023/10/26 ｜2

当ブログでは、b:js='false'で Blogger 標準 JavaScript はオフにしてある上に、全ての画像 HTML からaタグも外してしまっていたため、長い間ライトボックス表示ができない状態でした。(ライトボックス表示させるには a タグが必要)

カスタマイズ記事のスクショなどはまあ別にいいとしても、写真記事の画像はその場で手軽に拡大して見てもらいたいよなあ、とはずっと思っていました。

2ヶ月ほど前、BINUBALL さんのブログで Smooth Zoom という、手軽に拡大表示ができる軽量な JavaScript ライブラリが導入されていたのを思い出し、試しに取り入れてみた所、思った以上にいい感じに。(拡大可能になってることに気づいてた方はいましたか？試しに過去記事の写真をタップしてみてね)

記事化しようと思ったけど

当ブログでこの JS を紹介したかったのですが、自己解決できなさそうな問題がいくつかあったため記事化は見送っていました。

その自己解決できなかった問題というのは、Blogger のエディターで挿入した画像 HTML には a タグが含まれるのですが、a リンクがあると画像をクリック(タップ)した時に Smooth Zoom の挙動と干渉してしまうこと。拡大すると同時に画像直リンに移動してしまうのです。

つまり、この干渉を避けるには画像 HTML から a タグを外してやればいいわけですが、記事編集で全記事の画像 HTML から一つ一つ削除…なんて超絶面倒くさいことなんか誰もやりたくない(^^; ので、 JavaScript で一括処理させてみようと思ったものの、初心者の私にはこれが意外と難関でした。

<div class="separator"><a href="https://***/s4320/img.JPG"><img data-original-height="3240" data-original-width="4320" src="https://***/s400/img.JPG" width="400" /></a></div>

↓↓こうしたい

<div class="separator"><img data-original-height="3240" data-original-width="4320" src="https://***/s400/img.JPG" width="400" /></div>

そこで、困ったときの ChatGPT 頼み？、というわけでダメ元で聞いてみた所、あっさり解決！
ChatGPT さん、時々謎の欠陥コードを提示してきてムカつくときもあるけど、やっぱり基本的には頼りになりますw

第2の難関

画像タップで黒背景の中央に浮かび上がるライトボックス表示がされるようには出来たものの、もう一つの問題が。肝心の「拡大」表示が出来ないのです。

理由は簡単で、オリジナルサイズと表示サイズが同じだから。拡大表示させるには、src 属性の画像 URL のサイズパラメータを書き換えて元サイズを大きくする必要があるのです。(ちなみに当ブログでは全対象画像を手動で書き換え済み)

<div class="separator"><a href="https://***/s4320/img.JPG"><img data-original-height="3240" data-original-width="4320" src="https://***/s400/img.JPG" width="400" /></a></div>

救世主現る！

これも JavaScript で処理できそうなので、また ChatGPT 先生に聞けばいいのですが、最適なコードを引き出せるようなスマートな聞き方がわからない(笑)

もう記事化は諦めようと思っていた矢先、昨日たまたま覗いていたこちらのブログに、まさにドンピシャなコードが紹介されているのを発見！

影織文庫
【Blogger】投稿写真のぼやけ・にじみを自動で改善する方法
JavaScriptでBloggerの写真のぼやけ・にじみを改善する方法をまとめました。
https://www.kageori.com/2023/09/blogger.html

ちなみにこちらの影織文庫さん、数年前にもタイトル/URLコピーボタンのコードでも参考にさせてもらってたのですが、それ以来見に行くこともなかったので、ほぼ存在を忘れてしまっていました。昨日 𝕏 で偶然いいねされてなかったらこの記事に気づくこともなかっただろうと思います。影織文庫さん、ありがとう！

問題対処版コードを紹介

というわけで、こちらが改良版の Smooth Zoom コードになります。
2023/10/26: パラメータ置き換えの部分を変更しました。

</body>の上にこのコードを置くだけでOKです。

<b:if cond='data:view.isSingleItem'>
<script src='//cdn.jsdelivr.net/npm/smooth-zoom@latest/dist/zoom.min.js'/>
<script>/*<![CDATA[*/
// Smooth Zoom
document.querySelectorAll(".separator img,.tr-caption-container img").forEach(e=>e.classList.add("zoomable")),
Zoom(".zoomable");

// a タグ除去
const elems = document.querySelectorAll('.separator, .tr-caption-container tr td');
elems.forEach((elem) => {
  const aTag = elem.querySelector('a');
  if (aTag) {
    const imgTag = aTag.querySelector('img');
    elem.removeChild(aTag);
    elem.appendChild(imgTag);
  }
});

//パラメータ置き換え
document.querySelectorAll('.separator img,.tr-caption-container img,img.zoomable').forEach(img => {
  img.src = img.src.replace(/\/[swh]\d+-.*\//, "/s0-rw/").replace(/=[swh]\d+-.*/, "=s0-rw");
})
/*]]>*/</script>
</b:if>

コードについて

Blogger JS のオン・オフ、及び a タグの有無に関わらず、Blogger のライトボックスが無効になり、代わりに Smooth Zoom が有効になります。.separator または .tr-caption-container のクラス名が付いてるものが対象。もしくは後から手動で .zoomable クラスを付けたものにも適用されます。

パラメータの置き換えに関して、s●●やw●●-h●●-●等の形式のパラメータが含まれていると、最大化 + WebP化されるs0-rwに変換されます（前の記事で紹介した Blogger 新機能の「自動 WebP 化」は適用されないようなので、-rwを付けておきました）。
末尾に = で付くパターンもOK。たぶんほとんどの(画像挿入時に付く)パラメータ形式に対応するはず？

2023/10/19 追記

https://lh3.googleusercontent.comで始まる URL で画像が表示されなかったり拡大されない場合があります。その様な時はお手数ですが、https://lh3.googleusercontent.comをhttps://1.bp.blogspot.comに書き換えて下さい。

サンプル画像

実際にこれらの HTML コードで表示されています。

画像をタップすると、暗い背景の中央に浮かび上がるように表示されます。もう一度タップするかスクロールするだけでも解除されます。

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN55SdK8Cc_uPLT40dmbjVA8nxLBm9vj8F8LZKAhFD5kc58ivZj2kx16HBJPnJtAoAkt-snCDR13XwPk3NRZbwdCPBjO-r4y9Y8v9fp8i7E2vms0mPzmMTMsbO_FShxNnL_crgGoyMdF-1rBOINdum6vVpJ5oVQ7olgHoP7OuGBD-QKewJQjmPF6OUZGxw/s4320/P1200614.JPG" style="display: block; padding: 1em 0; text-align: center; "><img alt="コットンキャンディの写真" border="0" width="200" data-original-height="3240" data-original-width="4320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN55SdK8Cc_uPLT40dmbjVA8nxLBm9vj8F8LZKAhFD5kc58ivZj2kx16HBJPnJtAoAkt-snCDR13XwPk3NRZbwdCPBjO-r4y9Y8v9fp8i7E2vms0mPzmMTMsbO_FShxNnL_crgGoyMdF-1rBOINdum6vVpJ5oVQ7olgHoP7OuGBD-QKewJQjmPF6OUZGxw/s200/P1200614.JPG"/></a></div>

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEh4mITP_3-hyED6lGOrW6RtUvx-RjDaMNH2_xm3u4ZHvUk5Gd3EIh9NP019SURn-YXNp2OydXzYYeR2xXeuH0gLUkX-l7eQSpKdBGLSCaUeBg5VV6qwBISTxDRFNA94X_zdxPDniO2_W7TbKAv8Aa6m8hfktp4b1YsHrJLozXci002j_p6yI3xrEd2O=s4320" style="display: block; margin-left: auto; margin-right: auto; padding: 1em 0px; text-align: center;"><img alt="夕焼け写真" border="0" data-original-height="3240" data-original-width="4320" src="https://blogger.googleusercontent.com/img/a/AVvXsEh4mITP_3-hyED6lGOrW6RtUvx-RjDaMNH2_xm3u4ZHvUk5Gd3EIh9NP019SURn-YXNp2OydXzYYeR2xXeuH0gLUkX-l7eQSpKdBGLSCaUeBg5VV6qwBISTxDRFNA94X_zdxPDniO2_W7TbKAv8Aa6m8hfktp4b1YsHrJLozXci002j_p6yI3xrEd2O=s200" width="200" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">キャプション</td></tr></tbody></table>

キャプション

<img alt="ひまわりの写真" class="zoomable" src=""https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhuJME_fx4LqM2_m0LILRTXSCuse7sPEYC_qgZQjnKRDAQNL_LHms1OgAbTJ0f9Dru15C8hBXuH-6JjgBjNjuL9bYdVZnGtTblgDrueapktafDUALDSkEHwGsdVTTLClnpGhD_qvcABTU/w200-h150-p-k-no-nu/P1200614.JPG" width="200" height="150"/>

ちょっとしたカスタマイズ

当ブログではマウスホバー時に変化するカーソル (デフォルトでは ) や、背景色などをカスタマイズしています。参考までに CSS を置いておきますので、カスタマイズしたい方はどうぞ。

/*カーソルのタイプ*/
.zoomable {
  cursor: pointer!important;/*デフォルトは zoom-in*/
}
.zoom-img {
  cursor: pointer!important;/*デフォルトは zoom-out*/
}
.zoom-bg {
  cursor: pointer!important;/*デフォルトは zoom-out*/
}
/*拡大(背景変化)・解除が完了するまでの時間*/
.zoom-img,
.zoom-bg {
  transition-duration: .2s!important;/*デフォルトは .3s*/
}
/*背景色*/
.zoom-bg {
  background: rgba(0,0,0,.8)!important;/*デフォルトは rgba(0,0,0,.95)*/
}