WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

マウスオーバーした部分を拡大するjQueryプラグインelevatezoom.js

デモ
http://efu.sakura.ne.jp/web/elevatezoom/

公式サイト

http://www.elevateweb.co.uk/image-zoom

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>elevatezoom.js</title>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.elevateZoom-3.0.8.min.js"></script>
  <script>
    $(function(){
      $("#zoom__item").elevateZoom({
        zoomWindowWidth: 440,
        zoomWindowHeight: 440
      });
    });
  </script>
  <style>
  </style>
</head>
<body>
  <div class="zoom_content">
    <div class="image"><img id="zoom__item" src="img/thumb_ph.jpg" data-zoom-image="img/ph.jpg"></div>
  </div>
</body>
</html>