jQuery
【jQuery】タッチ、クリック、マウスオーバーで画像を拡大するjQuery Zoom
June 6, 2017
jQuery Zoomはタッチ、クリック、またはマウスオーバーで画像を拡大するjQueryプラグイン。
Instructions
要素内のHTMLを追加
// Example:
$(document).ready(function(){
$('a.photo').zoom({url: 'photo-big.jpg'});
});
// Using Colorbox with Zoom
$(document).ready(function(){
$('a.photo').zoom({
url: 'photo-big.jpg',
callback: function(){
$(this).colorbox({href: this.src});
}
});
});
img要素でズームを使用
$(document).ready(function(){
$('img')
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block')
.parent()
.zoom();
});
Removing Zoom
$('#example').zoom(); // add zoom
$('#example').trigger('zoom.destroy'); // remove zoom
Chrome、Firefox、Safari、Opera、Internet Explorer 7以降のjQuery 1.7以降
MIT
- Tag
- jQuery
