LogoMark.png

jQuery/OKZoom のバックアップ(No.1)

jQuery Zoom

ルーペ機能の導入　DEMO

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

↑

準備

↑

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>
↑

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