jQuery
【jQuery】写真をホバー機能で拡大することができるjQuery Loupe
February 27, 2017

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' });
Name | Default |
---|---|
shape | ‘circle’ |
glossy | true |
shadow | true |
trigger | ‘mouseenter’ |
rounded_corners | 10 |
size | 200 |
min_size | 150 |
max_size | 250 |
resize | true |
size_snap | 10 |
can_zoom | true |
zoom | 100 |
min_zoom | 50 |
max_zoom | 200 |
zoom_snap | 5 |
overlay | true |
overlay_opacity | 0.5 |
MIT
Demo/Download