こんにちは、yutaです。
AmazonなどのECサイトでよく見かけるアレです。
今回は、Magnifier.jsというプラグインを利用します。使い方がシンプルかつ公式サイトのサンプルも豊富なので導入しやすいかと思います。
フリーランスのフロントエンドエンジニアさんがWEBページを作る時なんかに使えるんじゃないかと思ったのでメモしておきます。
1.実装後(GIF)
2.必要なファイルをGitHubからDL
3.コード
記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。
1.実装後(GIF)
2.必要なファイルをGitHubからDL
こちらからDLします。(「Clone or download」という緑色のボタンがあるのでそれをクリックしてDL)
3.コード
3-1.cssとjsを読み込む
7、30、31行目のようにcss、jsを読み込みます。パスは各自で合わせてください。
3-2.画像ファイルと拡大画像を表示するエリアを用意
23~28行目です。
<div id="fb1">
<div class="magnifier-thumb-wrapper">
<img class="img" src="../images/img1-sm.jpg" data-large-img-url="../images/img1.jpg">
</div>
<div class="magnifier-preview" id="preview"></div>
</div>このプラグインでは、サムネイル用の小さい画像と拡大表示用の大きな画像を使用します。imgタグのsrcがサムネイル用、data-large-img-urlが拡大表示用です。
27行目のdivが拡大表示エリアです。idはpreviewにしてください。このエリアサイズはcssで好きな大きさに設定しますが、サムネイル画像と同じ大きさにすると横並びにした時に見栄えが良いと思います。(↑GIFがそんな感じです)
23行目のdivで囲んでいるのはflexboxを利用して、サムネイル画像と拡大画像を横並びで表示させるためです。
3-2.magnifierの初期化
「なんとかの初期化」って言い方わかりづらいですよね。要するに実際の動きを記述している部分です。
33~40行目です。
<script>
var evt = new Event(), m = new Magnifier(evt);
m.attach({
thumb: '.img',
largeWrapper: 'preview',
zoomable: true
});
</script>初期化の内容は要するにこういうことです。
・thumb: ‘.img’ : サムネイル画像はimgというクラス名が付いた画像を使用。
・largeWrapper : ‘preview’ : 拡大画像はpreviewというid名がついたエリアを使用。
・zoomable: true : マウスホイールで拡大率を変更できるかどうか。(必須じゃないので書かなくてもOK)
どうですか？めちゃくちゃ簡単に導入できますよね。必須ではないコードも含めて50行以下ってなかなかですよ笑
今後、画像スライダープラグインのslickとの連携を試してみたいと思っているのでできたらシェアします！では、また！
