画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法

amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されるという機能をよく見かける。これを実装したいと要望を受けたため、実装方法を調べたところ「drift」というJavaScriptライブラリで対応できそう。以下にサンプルと実装方法をメモ。

サンプル

https://taitan916.info/sample/drift/

左側の画像にマウスを合わせると拡大画像が右側に表示される筈。

drift

GitHub

https://github.com/strawdynamics/drift

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/drift-zoom/1.5.1/Drift.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drift-zoom/1.5.1/drift-basic.min.css">

異なるバージョンを利用したい場合は以下から探す。

https://cdnjs.com/libraries/drift-zoom/1.5.1

利用方法

ソースコード

<style>
.contents{
    display: flex;
}
.zoom-image{
    display: block;
    width: 300px;
    margin: 0 auto;
}
.zoom-image-area{
    width: 40%;
}
.zoom-detail-area{
    height: 500px;
    width: 60%;
    position: relative;
    width: 65%;
}
</style>

<div class="contents">
    <div class="zoom-image-area">
        <img src="test.webp?w=400" data-zoom="test.webp?w=1200" class="zoom-image">
    </div>
    <div class="zoom-detail-area">
        商品情報<br>
        商品情報<br>
        商品情報<br>
        商品情報<br>
        商品情報<br>
        商品情報<br>
        商品情報<br>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/drift-zoom/1.5.1/Drift.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drift-zoom/1.5.1/drift-basic.min.css">
<script>
new Drift(document.querySelector(`.zoom-image`), {
    paneContainer: document.querySelector('.zoom-detail-area'),
    zoomFactor: 4,
});
</script>

所感

ライブラリの利用自体は問題無いがCSSを色々指定しないといけないのがネックかも。