Astroのブログに画像ズームを実装する

実装した

※クリックで拡大できます!!

画像ソース / Unsplash

実装方法

medium-zoomのインストール

npm install medium-zoom

記事ページへのコードの追加

<script>
  import mediumZoom from "medium-zoom";
  const zoom = mediumZoom(".prose img:not(.lc-image)", {
    margin: 24,
    background: "rgba(255,255,255,0.8)",
    scrollOffset: 16
  });
  zoom.on("open", (e) => {
    const image = e.target as HTMLElement;
    if (image) image.classList.add("z-[1000]");
  })
</script>

このブログはTailwind Typographyを使ってるので、セレクターは.prose imgにしてます。
あと、拡大した画像がヘッダーとかの上にちゃんと出るように、画像側にz-index足してます。

スタイリングの修正

拡大時のオーバーレイがヘッダーの下に潜らないように、スタイルをちょっと直します。

.medium-zoom-overlay {
  @apply z-[1000] bg-white/50 backdrop-blur-sm;
}

完了!!

これで実装できましたね。たぶん…。

以上

これでいいね。うん。
特に書くこともねぇけどな!!!!!!