iPhotoみたいな動きができるiphSlider.js

またまた自作のjavascriptを公開します。
こちらもまだベータ版として。ご意見いただければなぁとおもいます。

今回も画像表示関係のライブラリ。Macユーザならご存知のiPhotoのようにスライダーを動かすと写真の大きさが変わるやつを作りましたので、よかったらどうぞ。

今回は、prototypeとscript.aculo.usのslider.jsを使います。
それぞれダウンロードしてきます。（といってもscript.aculo.usのページからダウンロードすれば、自然とprototypeはついてきます。）

それから、こちらのファイルをダウンロードします。

http://sevenstyleweb.com/sample/iph/js/iphslider.js
コピーをして保存してください。

また、今回のスライドバー用のCSSをダウンロードします。
http://sevenstyleweb.com/sample/iph/css/slider.css
こちらもコピペでお願いします。

さーて、使い方ですぅ。
まず、もちろんですが、インポートします。

<link rel="stylesheet" href="css/slider.css" type="text/css" media="all">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/iphslider.js"></script>

そして、

<script type="text/javascript"><!--
    window.onload = iphslider;
// --></script>

ページをロードときにスライダーのスクリプトを起動させるために、こちらの上記のコマンドを打ち込みます。これで準備はＯＫです。

さて、スライダーを機能させたい画像に対して、rel属性でiphを入力します。以下のようにいれます。

<img rel="iph" src="hoge.jpg" width="○○" height="○○" />

さらに、スライダーを表示する位置に次のHTMLを書き込みます。

<!--For SlideBar space Start -->
<div id="slidebar">
    <div id="sliderBG">
        <div id="ptr"></div>
    </div>
</div>
<!--For SlideBar space End -->

これで、完了です。スライダーに対応した画像を複数使いたい場合でも、同じようにrel属性を指定すれば、スライダーで同時に拡大縮小されます。
画像に対してfloatをかけていれば、結構面白い動きをします。

サンプルデモ

現状最小サイズは30%に設定してます。その設定は変更できます。
ダウンロードした、jsファイルのiphslider.jsの3行目
var min_per = 30;
の部分の数値を%で変更すると問題なくいけます。

よかったら使ってください。

サンプルサイトまとめたサイトをこちらからダウンロードできます。
http://sevenstyleweb.com/download/iphsample.zip