#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の３つについて、それぞれ以下のソースをコピー＆ペーストしてお試しください。
~
***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"
});
});
~
~
