Cloud Zoom を用いた画像のズーム表示

この Web ページでは，jQuery と Cloud Zoomを利用して，画像のズーム表示を行います．

軽快に動き、魅力的な視覚効果です．簡単に使えます．

◆ 動作画面の例

準備

◆ Cloud Zoom は、次のサイトから入手．

http://www.professorcloud.com/mainsite/cloud-zoom.htm

◆ JavaScript に関する Web ブラウザの設定

Internet Explorer
インターネットオプションの「セキュリティの設定」で，「スクリプト」→「アクティブ　スクリプトを有効にする」
Firefox
メニューのツール→オプション→Web 機能の設定

画像のズーム表示を行う HTML + JavaScript

まず，cloud-zoom.1.0.2.zip を入手します．

zip ファイルを解凍し、次のように配置します．

  js/cloud-zoom.1.0.2.js
  js/cloud-zoom.1.0.2.min.js
  styles/cloud-zoom.js

HTML ファイルの例


<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <title>
            Cound Zoom を用いた画像ズーム表示
        </title>

        <!-- Load the Cloud Zoom CSS file -->
        <link href="./styles/cloud-zoom.css" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <!-- Load the Cloud Zoom JavaScript file -->
        <script type="text/JavaScript" src="./js/cloud-zoom.1.0.2.min.js"></script>

    </head>

    <body>
    
        <!--
           An anchor with class of 'cloud-zoom' should surround the small image.
           The anchor's href should point to the big zoom image.
           Any options can be specified in the rel attribute of the anchor.
           Options should be specified in regular JavaScript object format,
           but without the braces.
          -->
    
        <a href='http://www.professorcloud.com/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
           rel="adjustX: 10, adjustY:-4">
          <img src="http://www.professorcloud.com/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>
    
    
        <!--
           You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
           The anchor's href should point to the big zoom image.
           In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
           and also the small image to use (smallImage: /images/....)
          -->
    
        <a href='http://www.professorcloud.com/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
           rel="useZoom: 'zoom1', smallImage: 'http://www.professorcloud.com/images/zoomengine/smallimage.jpg' ">
          <img src="http://www.professorcloud.com/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
    
        <a href='http://www.professorcloud.com/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
           rel="useZoom: 'zoom1', smallImage: ' http://www.professorcloud.com/images/zoomengine/smallimage-1.jpg'">
          <img src="http://www.professorcloud.com/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  
    
    <a href='http://www.professorcloud.com/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
       rel="useZoom: 'zoom1', smallImage: 'http://www.professorcloud.com/images/zoomengine/smallimage-2.jpg' ">
      <img src="http://www.professorcloud.com/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
    
  </body>
</html>