skuare.net

ECサイトなどで使用される、画像にマウスを乗せると拡大するあれ。
jQueryプラグイン「Featured Image Zoomer」で実現しましょう。

使用方法
Featured Image Zoomerからfeaturedimagezoomer.jsをダウンロードします。
ローディング画像もありますので、必要であれば一緒にダウンロードしてください。
また、jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="featuredimagezoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#id名').addimagezoom({
zoomrange: [3, 6], //zoomレベルを設定
magnifiersize: [400,400], //拡大画像を表示するサイズ
magnifierpos: 'right', //拡大画像位置
largeimage: '/test/img/saleen.jpg' //拡大画像パス
})
});
</script>

なお、ローディング画像はfeaturedimagezoomer.js内に記述場所があります。
あとは拡大させたい画像にidを付与すれば完成です。
<amp-img id="id名" src="画像パス" />
jQueryで画像を拡大させるJavaScript「Featured Image Zoomer」サンプル