|Liberty自由に生きる。【Magnifier.js】Amazonの商品ページっぽくマウスオーバーで画像を拡大するJavaScript|プログラミングこんにちは、yutaです。AmazonなどのECサイトでよく見かけるアレです。今回は、Magnifier.jsというプラグインを利用します。使い方がシンプルかつ公式サイトのサンプルも豊富なので導入しやすいかと思います。フリーランスのフロントエンドエンジニアさんがWEBページを作る時なんかに使えるんじゃないかと思ったのでメモしておきます。※別タブで開きますので記事の邪魔にはなりません。1.実装後(GIF)2.必要なファイルをGitHubからDLこちらからDLします。download」という緑色のボタンがあるのでそれをクリックしてDL)3.コード3-1.cssとjsを読み込む7、30、31行目のようにcss、jsを読み込みます。パスは各自で合わせてください。3-2.画像ファイルと拡大画像を表示するエリアを用意23~28行目です。id="preview"></div></div>このプラグインでは、サムネイル用の小さい画像と拡大表示用の大きな画像を使用します。imgタグのsrcがサムネイル用、data-large-img-urlが拡大表示用です。27行目のdivが拡大表示エリアです。idはpreviewにしてください。このエリアサイズはcssで好きな大きさに設定しますが、サムネイル画像と同じ大きさにすると横並びにした時に見栄えが良いと思います。(↑GIFがそんな感じです)23行目のdivで囲んでいるのはflexboxを利用して、サムネイル画像と拡大画像を横並びで表示させるためです。「なんとかの初期化」って言い方わかりづらいですよね。要するに実際の動きを記述している部分です。});</script>初期化の内容は要するにこういうことです。サムネイル画像はimgというクラス名が付いた画像を使用。拡大画像はpreviewというid名がついたエリアを使用。マウスホイールで拡大率を変更できるかどうか。(必須じゃないので書かなくてもOK)どうですか?めちゃくちゃ簡単に導入できますよね。【Javascript】HTMLの要素を動的に追加・削除する。Academyは、人気のJavaやHTML、CSS、PHPを始め、UnityやAIコースなど様々な分野のプログラミングが学べるオンラインプログラミングスクールです。エンジニア転職保証があるプログラミング未経験からエンジニア転職を目指す「エンジニア転職保証コース」では、現職エンジニアとキャリアカウンセラーによる転職サポートが受けられます。Academyの無料体験ができます。興味がある方は是非上のバナーからチェックしてみてください。yutric9☆gmail.com☆を@に置き換えて送信してください。仕事のご依頼や、その他の質問など何でもお気軽にお問い合わせください。2019プライバシーポリシ。