jQuery

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

February 27, 2017
jQuery Loupe

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

Setup

<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'
});

Settings

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