jQuery Loupeは写真をホバー機能で拡大することができます。マウススクロールを使用してズームレベルとルーペサイズを制御することができます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.easing.1.2.js"></script>

jQuery Loupeのjavascriptとcssファイルをページに追加。

<script src="js/jquery-loupe.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-loupe.css" />

ルーペによって拡大/拡大される実際の画像を実装。

<a href="#">
    <img alt="Your image caption" src="your-image.jpg" class="louped" />
</a>

作成した要素のcatLoupe（）関数をトリガー

$('.louped').catLoupe({
    maxSize: 600,
    loupe_toggle_speed: 'fast'
});

MIT
Demo/Download

• Tag
• jQuery