Blog

ECサイトで使えそうな写真をズームできるjQuery – Cloud Zoom –

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

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

 

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

 

そのjQueryプラグインは、

cloud-zoomというもので、

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

Professor Cloud

 

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

DEMO

 

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

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

 

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

 

cloud-zoomの使い方

 

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

 

そしてHTMLを例えば、

とするだけで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も記載します。

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

 

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

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

重要ですね!

 

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ