jQuery

【jQuery】タッチ、クリック、マウスオーバーで画像を拡大するjQuery Zoom

June 6, 2017
jquery zoom

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