＜目次＞ ① jQueryとは？
② jquery1.10.2 のダウンロード
③ jQueryプラグインのcloud-zoomとは？
④ 無料版 cloud Zoom のダウンロード
⑤ cloud-zoom の設置方法を参考にした日本語サイト
⑥ 設置例１
⑦ 設置例２
cloud-zoom の無料版を最新のjquery1.10.2 で設置
最近、ネットサーフィンをしているとき、画像にマウスを載せるとその画像の一部が虫眼鏡で見ているように拡大表示するサイトに遭遇することが良くあります。
自分のサイトにも、そのようなことをしたいと思いネットで調べたところjqueryとcloud-zoomというJavaスクリプトでできることが分かりましたが、残念ながらcloud-zoom の公式サイトでは有料版のみの配布になっていました。
何とか無料版 がないかと探していたら、見つかりましたので設置してみました。
① jQueryとは？
【ホームページ制作用語集から引用】
Mozilla Corporationで、John Resig氏によって作られた様々な処理を短く簡単に書ける、読み込みが軽量なJavaScriptライブラリ。
AjaxやJavaScriptのDOM操作等を簡単に記述できるようになる。
具体的には、Java Scriptで一から書くと何十行にもなる記述が、jQueryを使用すると、ほんの数行で済んでしまうこともあります。
こういった理由から、プログラムが出来ない方でも扱うことが簡単になり、多くのWeb関係者に愛されるライブラリとなっています。
2016年8月末時点でjQuery本体の最新バージョンは バージョン3.1.0 です。
② jquery1.10.2 のダウンロード
jQueryの公式サイト(https://code.jquery.com/jquery/)に行き、jQuery Core - All 1.x VersionsからjQuery Core 1.10.2をダウンロード。
③ jQueryプラグインのcloud-zoomとは？
商品画像のズームアップなどに最適な画像の一部を拡大表示するjQueryプラグイン。
ズーム方法は、画像内に拡大画像を表示する一体型と、画像の外に拡大画像を表示する2タイプ用意されています。
フォーカスの設定は、各サムネイル画像をくくるa要素のrel属性にパラメータを指定します。
画像にマウスオーバーすると、マウスオーバーした部分の拡大画像を表示してくれます。
１画像に付き、小・中（サムネイル画像）、原寸大画像の最大3画像必要です。
④ 無料版 cloud Zoom のダウンロード
cloud-zoom の公式サイトでは有料版がのみの配布になっています。
無料版は、Ｍｙ Ｄｉｃｔｉｏｎａｒｙ公式サイトの【cloud-zoom の無料版を最新のjquery1.10.2 で設置】からダウンロードできます。
⑤ cloud-zoom の設置方法を参考にした日本語サイト
ECサイトで使えそうな写真をズームできるjQuery ? Cloud Zoom -
色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」
【ダウンロードした cloud-zoom.css と cloud-zoom.js を各々 css と js フォルダに貼り付けてください。】
◎ htmlファイルのhead内に次の３行を記述
<link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/cloud-zoom.js"></scrip>
◎ htmlファイルのbody内に次のコードを記述
<p style="position: relative;">
<a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="images/HACCP.jpg"><img src="images/HACCP.jpg" width="523" /></a>
私のホームページ食品衛生責任者講習会で利用しています。
◎ htmlファイルのbody内に次のコードを記述＜head内は設置例１と同じ＞
<p style="position: relative;">
<a rel="position: 'right' " class="cloud-zoom" href="images/HACCP.jpg"><img src="images/HACCP.jpg" width="517" title="HACCPパンフレット"/></a>
私のホームページ食鳥検査制度で利用しています。