ピクチャールーペ-Cloud Zoom
12368 ワード
Cloud Zoomは画像拡大jQueryプラグインで、Magic Zoomに匹敵する効果があります.人気のあるjQZoomプラグインに比べて、Cloud Zoomは体積が小さく、より多くの機能とより強力なブラウザ間互換性があります.
ほとんどのブラウザと互換性があります(テストに合格したブラウザは、IE 6+、Firefox、Chrome、Opera、Safari)
統合しやすい基本的に有効なHTML.
(縮小)スクリプトは小さく、6 Kbしかありません.
ズームモーションをスムーズにします.
ギャラリーモード.
シェーディング、ソフトフォーカス、インナーズーム機能.
それは完全に無料です.
1、CSSをロードする:
2、Javascriptをロードする:
3、HTMLコード:
パラメータ
説明(from V 1.0.0)
デフォルト
zoomWidth
ズームウィンドウの幅を設定し、[auto]に設定すると、ウィンドウの幅は小さなピクチャの幅と等しくなります.
'auto'
zoomHeight
ズームウィンドウの高さを設定し、[auto]に設定すると、ウィンドウの高さは小画像の高さと等しくなります.
'auto'
position
ズームウィンドウの小画像に対する位置を指定します.許可される値は、「left','right','op','bottom','inside'、またはウィンドウのスケール位置などのHTML要素専用のID配置です:'element 1'
'right'
adjustX
ピクセルのズームウィンドウのX位置を微調整できます.
0
adjustY
ピクセルのズームウィンドウのY位置を微調整できます.
0
tint
上書きした画像の色を指定します.色は「＃aa 00 aa」などの16進数フォーマットを指定します.
false
tintOpacity
0が完全に透明で、1が完全に不透明な色の透明度を指定します.
0.5
lensOpacity
レンズのマウスポインタの透明度を設定します.0は完全に透明で、1は完全に不透明です.カラーとソフトフォーカスモードでは、常に透明になります.
0.5
softFocus
微妙なぼかし効果の小さな画像に適しています.trueまたはfalseに設定します.
false
smoothMove
イメージのドリフトスケールは、数字が高いほどスムーズ/より簡単にドリフト運動を行います.1=スムーズではありません.
3
showTitle
画像のタイトルを表示するかどうか.
true
titleOpacity
タイトルの不透明度を表示するかどうかを指定します.0は完全に透明で、1は完全に不透明です.
0.5
特長
ほとんどのブラウザと互換性があります(テストに合格したブラウザは、IE 6+、Firefox、Chrome、Opera、Safari)
統合しやすい基本的に有効なHTML.
(縮小)スクリプトは小さく、6 Kbしかありません.
ズームモーションをスムーズにします.
ギャラリーモード.
シェーディング、ソフトフォーカス、インナーズーム機能.
それは完全に無料です.
使用方法
1、CSSをロードする:
<link href="/styles/cloud-zoom.css" type="text/css" rel="stylesheet" />
2、Javascriptをロードする:
<script type="text/JavaScript" src="/js/jquery.1.4.2.min.js"></script>
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>
3、HTMLコード:
<a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
<img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
<a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
<img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>
<a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
<img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
カードパラメータ一覧
パラメータ
説明(from V 1.0.0)
デフォルト
zoomWidth
ズームウィンドウの幅を設定し、[auto]に設定すると、ウィンドウの幅は小さなピクチャの幅と等しくなります.
'auto'
zoomHeight
ズームウィンドウの高さを設定し、[auto]に設定すると、ウィンドウの高さは小画像の高さと等しくなります.
'auto'
position
ズームウィンドウの小画像に対する位置を指定します.許可される値は、「left','right','op','bottom','inside'、またはウィンドウのスケール位置などのHTML要素専用のID配置です:'element 1'
'right'
adjustX
ピクセルのズームウィンドウのX位置を微調整できます.
0
adjustY
ピクセルのズームウィンドウのY位置を微調整できます.
0
tint
上書きした画像の色を指定します.色は「＃aa 00 aa」などの16進数フォーマットを指定します.
false
tintOpacity
0が完全に透明で、1が完全に不透明な色の透明度を指定します.
0.5
lensOpacity
レンズのマウスポインタの透明度を設定します.0は完全に透明で、1は完全に不透明です.カラーとソフトフォーカスモードでは、常に透明になります.
0.5
softFocus
微妙なぼかし効果の小さな画像に適しています.trueまたはfalseに設定します.
false
smoothMove
イメージのドリフトスケールは、数字が高いほどスムーズ/より簡単にドリフト運動を行います.1=スムーズではありません.
3
showTitle
画像のタイトルを表示するかどうか.
true
titleOpacity
タイトルの不透明度を表示するかどうかを指定します.0は完全に透明で、1は完全に不透明です.
0.5