LogoMark.png

jQuery/OKZoom の変更点


#author("2020-02-02T18:05:25+09:00;2019-12-25T13:53:02+09:00","default:inoue.ko","inoue.ko")
*jQuery Zoom
ルーペ機能の導入 [[DEMO>https://design.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の3つについて、それぞれ以下のソースをコピー&ペーストしてお試しください。
~


***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"
    });
 });
~
~