mooZoom Ver.1.0

ここで紹介しているデモは、Firefox3.6で動作しません(
また配布元ではmooZoom Ver.1.1(using mootools 1.2)が公開されていますが、Firefox3.6だけでなくIE8やSafari4、Chrome5なども動作しませんでした。

写真:目貫の写真1写真:目貫の写真2

名称
mooZoom Ver.1.0
配布元
R'born
操作方法
マウスホイールで画像を拡大縮小できます。
必要なモジュール
MooTools Ver.1.11(配布パッケージに同梱されています)
ブラウザ対応
Windows : IE6、IE7、Opera 9.50、Safari 3.0.3、Firefox 2.0.0.14
OSX : Firefox 3.0、Firefox 2.0.0.14、Safari 3.11、Opera 9.27、Camino 1.6.1
ライセンス
You can use the script for personal or commercial projects, as long as this creditentials remains intact. You CANNOT sell the script or parts of its code under your brand.
moozoom.jsに記載されている著作権表示等を消去・改変しない限り、個人・商用を問わず使用できます。ただしスクリプトやその一部を販売することはできません。

設置方法

  1. moozoom_v1.0.zip - 148kbをmooZoomからダウンロード
  2. 解凍すると以下のファイルが解凍されます。
    • flower.jpg
    • index.html
    • mootools.js
    • moozoom.js
    mootools.jsとmoozoom.jsをjsフォルダに保存
  3. head要素内にダウンロードしたJavascriptファイルのパスを記述。
    <script src="js/mootools.js" type="text/javascript"></script>
    	<script src="js/moozoom.js" type="text/javascript"></script>
  4. 拡大したい画像のimg要素にclass属性"moozoom"を指定。 今回は大きな画像(1703 x 1479 )を使うので、widthを本来より小さい値に指定
    <img src="images/menuki02.jpg" class="moozoom" width="200" height="174" alt="目貫の写真1" />

IE6 向けの設定

IE6の場合拡大すると画像の上にイメージツールバーが出てくる。head要素内に下記のmeta要素を記述してツールバーを非表示にする。

<meta http-equiv="imagetoolbar" content="no" />

その他 変更点

拡大する画像にボーダーを設定

拡大する画像にcssでボーダーを指定しても拡大すると消えてしまう。
moozoom.jsファイルの29行目にborder指定を追加。

this.container = new Element('div').setStyles({
	width:this.initial_size.x,
	height:this.initial_size.y,
	overflow:'hidden',
	position:'absolute',
	left:this.initial_position.left,
	top:this.initial_position.top
	,border:'1px solid #ccc'
	}).injectInside(document.body).adopt(this.image);

ページトップに戻る