jQuery Zoom
ルーペ機能の導入 DEMO
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" }); });