色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」

画像をズームさせることで、小さなスペースで詳細まで見せることが可能です。
今回紹介するProfessor Cloudは軽量かつ簡単にズームをさせられます。

使用方法

Professor Cloudからファイルをダウンロードします。
またjQueryも忘れず用意しましょう。


<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="cloud-zoom.1.0.1.js"></script>

上記を記述したら画像を記述していきます。
まずは、小さい画像とズーム表示させる大きい画像を用意しましょう。


<a href="大きい画像パス" class="cloud-zoom"
		title="キャプション" 
		rel="position:'bottom', //表示位置（left', 'right', 'top', 'bottom', 'inside'または特定のID） 
			smoothMove:2", //ズーム時の移動距離
			tint: '#CCC', //ハイライト表示（#は表示色）
			tintOpacity:0.7 , //ハイライトの透明度
>
	<img src="小さい画像パス" />
</a>

サンプル

Javascriptサンプルページ一覧

skuare.net