LogoMark.png

jQuery/OKZoom の変更点

#author("2020-02-02T18:05:25+09:00;2019-12-25T13:53:02+09:00","default:inoue.ko","inoue.ko")
#author("2026-07-28T16:07:50+09:00;2026-07-28T13:58:47+09:00","default:inoue.ko","inoue.ko")
*jQuery Zoom
ルーペ機能の導入　[[DEMO>https://design.kyusan-u.ac.jp/SampleSite/JQ_OKZoom/]]
ルーペ機能の導入　[[DEMO>https://design.cs.kyusan-u.ac.jp/SampleSite/JQ_OKZoom/]]

jQueryを利用したスクリプト OKZoom の導入方法を紹介します。OKZoomは、画像をルーペで拡大表示するプラグインです。当然ですが、拡大に耐える大きな画像が必要です。
~

***準備
-1）ファイルセットのダウンロード
http://okfoc.us/okzoom/　から最新のものをDLして下さい。
必要なのは ''okzoom.min.js'' だけです。

-2） 構成ファイルの確認
--index.html （動作確認用）
--css（フォルダ） /　''style.css''
--js （フォルダ）/　jquery-xxxxx.min.js　okzoom.min.js　''sample.js''
--images（フォルダ）/　sample.jpg

-3) index.html、style.css,、sample.jsの３つについて、それぞれ以下のソースをコピー＆ペーストしてお試しください。
~


***HTML
 <!DOCTYPE html>
 <html lang="ja">
     <head>
         <meta charset="UTF-8">
         <title>Sample</title>
         <script src="js/jquery-xxxxx.min.js"></script>
         <script src="js/okzoom.min.js"></script>
         <script src="js/sample.js"></script>
         <link href="css/style.css" rel="stylesheet" >
     </head>
     <body >
         <div id="container">
             <img src="images/sample.jpg" width="640">
             <p>mona lisa</p>
         </div>
    </body>
 </html>

-画像は実寸よりも小さく(ここでは幅640pxで)表示しています。
~

***CSS
 body{
     background-color: black;
     color: silver;
     text-align:center;
 } 
~

***JavaScript
 $(function(){
    $('img').okzoom({
      width: 200,
      height: 200,
      round: true,
      background: "#fff",
      backgroundRepeat: "repeat",
      shadow: "0 0 5px #000",
      border: "1px solid black"
    });
 });
~
~