今後使いそうなので、先に試してみることにしました。

ECサイトではよくみかける、写真をズームして見ることができるものです。

細部まで見たい！という場合に有効的だと思います。

そのjQueryプラグインは、

cloud-zoomというもので、

ダウンロード先はこちらになります。

Professor Cloud

デモを作成しましたので、ご覧ください。

DEMO

一個目のものは、bxSliderというスライドのプラグインも使用しております。

そのプラグインの説明は下記リンク先でしておりますので、ご覧ください。

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン bxSlider

cloud-zoomの使い方

 

まずは、head内に以下を記述します。

XHTML

<link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script>

1 2 3

<link href="css/cloud-zoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script>

 

そしてHTMLを例えば、

XHTML

<a rel="position: 'right' " class="cloud-zoom" href="sample.jpg"><img src="sample.jpg" width="400" title="タイトルが入ります。"/></a>

1	<a rel="position: 'right' " class="cloud-zoom" href="sample.jpg"><img src="sample.jpg" width="400"  title="タイトルが入ります。"/></a>

とするだけでOKです。

 

aタグのrel属性にオプションを記述し、

titleは画像の方に記述します。

オプションで、ズームの画像を写真の上下左右に表示したり、中(?)に表示したり、様々な設定ができます。

 

以下オプションです。

zoomWidth ズームウィンドウの横幅をピクセルで指定(数値のみ)。autoだと、元画像の横幅のサイズと同じ　デフォルト：’auto’
zoomHeight ズームウィンドウの縦幅をピクセルで指定(数値のみ)。autoだと、元画像の横幅のサイズと同じ　デフォルト：’auto’
position ズームウィンドウをどこに表示するか、top,bottom,left,right,insideの指定が可能
adjustX ズームウィンドウの位置をx軸でピクセル指定可能(数値のみ)　デフォルト：0
adjustY ズームウィンドウの位置をy軸でピクセル指定可能(数値のみ)　デフォルト：0
tint 元画像のレンズ以外の部分の色を指定。例えば’#555555’softFocusがtrueだと動作しません。　デフォルト：false
tintOpacity 上記tintの透過度　デフォルト：0.5
lensOpacity レンズの透過度(元画像に表示される「ここをズームにしてる」というエリアのこと)　デフォルト：0.5
softFocus 元画像に微妙なぼかし効果を適用します。tintを設定していると動作しません。　デフォルト：false
smoothMove ズーム画像の滑らかさ/ドリフトの量。数字が高い程滑らかになる。 1 = スムースなし. 　デフォルト：3
showTitle タイトルを表示するか否か　デフォルト：true
titleOpacity タイトルの背景の透過度　デフォルト：0.5

デモのHTMLも記載します。

よろしければご覧ください。

XHTML

<h3>マウスを載せるとズーム</h3> <div class="bg_img"><ul id="slider" class="slider"> <li class="slide1"><a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="sample1.jpg"><img src="sample1.jpg" width="500" /></a></li> <li class="slide2"><a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="sample2.jpg"><img src="sample2.jpg" width="500"/></a></li> <li class="slide3"><a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="sample3.jpg"><img src="sample3.jpg" width="500"/></a></li> <li class="slide4"><a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="sample4.jpg"><img src="sample4.jpg" width="500"/></a></li> </ul></div> <h3>ズームを横に表示する</h3> <div class="side"> <a rel="position: 'right' , showTitle: true, adjustX: 5,smoothMove:3" class="cloud-zoom" href="sample2.jpg"><img src="sample2.jpg" width="400" title="タイトルが入ります。"/></a> </div>

1 2 3 4 5 6 7 8 9 10 11

<h3>マウスを載せるとズーム</h3> <div class="bg_img"><ul id="slider" class="slider">   <li class="slide1"><a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="sample1.jpg"><img src="sample1.jpg" width="500" /></a></li>   <li class="slide2"><a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="sample2.jpg"><img src="sample2.jpg" width="500"/></a></li>   <li class="slide3"><a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="sample3.jpg"><img src="sample3.jpg" width="500"/></a></li>   <li class="slide4"><a rel="position: 'inside' , showTitle: false" class="cloud-zoom" href="sample4.jpg"><img src="sample4.jpg" width="500"/></a></li> </ul></div> <h3>ズームを横に表示する</h3> <div class="side"> <a rel="position: 'right' , showTitle: true, adjustX: 5,smoothMove:3" class="cloud-zoom" href="sample2.jpg"><img src="sample2.jpg" width="400"  title="タイトルが入ります。"/></a> </div>

 

ECサイトでは、このようなちょっとした一工夫が大事になってくるのかなと思います。

どれだけユーザーにとって良いコンテンツを提供でき、サイトとしての個性も出せるか、、、

重要ですね！