マウスホイールで拡大縮小するギャラリー/画像表示/SolidStateEveryday

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Slider</title>
<script type="text/javascript" src="mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript" src="mootools-1.2.3.1-more.js"></script>
<script type="text/javascript" src="anipan.js"></script>
<script type="text/javascript">
        //<![CDATA[
        var myAniPanPage = {
            start: function() {
                var mf = new AnimatedPanel($('AnimatedPanel'), {});
            }
        };
        window.addEvent('domready', function() {
            //debugger;
            myAniPanPage.start();
        });
        //]]>
</script>
</head>

<body style="text-align:center">
<div id="AnimatedPanel" style="margin:0 auto;width:660px;height:300px">
        <a href="#"><img src="1.jpg" title="Test1" alt="Test1" /></a>
        <a href="#"><img src="2.jpg" title="Test1" alt="Test1" /></a>
        <a href="#"><img src="3.jpg" title="Test1" alt="Test1" /></a>
        <a href="#"><img src="4.jpg" title="Test1" alt="Test1" /></a>
        <a href="#"><img src="5.jpg" title="Test1" alt="Test1" /></a>
</div>
</body>
</html>

	Animated Panel

マウスホイールアクションで、画像が拡大縮小するスクリプトです。
ギャラリー上でマウスホイールを動かせば拡大縮小し、ギャラリー外でマウスホイールを動かすと通常通りページスクロールします。
ロード時の画像サイズ等は、ギャラリーのサイズから自動的に判断され表示されます。
デフォルトではロード時の一行の画像枚数は４枚ですが、これも調節可能です。

セッティング

１．ダウンロード＆セッティング

まず、mootools-1.2.3-core-yc.js をダウンロードしてください。
上記リンクページで YUI Compressor と注釈入っているものをクリックします。
次に、mootools-1.2.3.1-more.js をダウンロードします。
上記リンクページを開いたら、More , class.Binds , Fx.Elements , Fx.Accordion , Fx.Scroll , Fx.Slide , Fx.SmoothScroll , Drag , Drag.Move , Slider , Sortables , Assets , Color , Group , Hash.Cookie , Scroller , Tips , YUI Compressor にチェックを入れてダウンロードボタンをクリックして下さい。
最後に、anipan.js をダウンロードして、スクリプトを全て揃えます。