画像をスクロールさせる jquery.scrollable.js
jquery.scrollable.jsは、さまざまなコンテンツを画面内の特定の領域でスクロールさせるプラグインです。
Scroll your HTML with jquery.scrollable.jsで使い方など紹介はされているのですが、英文って事もあり直ぐに使い方が分からないかったので、自分の方でも解説をしておきたいと思います。
jquery.scrollable.jsの使い方・ダウンロード
- Scroll your HTML with jquery.scrollable.jsのFeaturesにある(requires mousewheel.js)からmousewheel.jsをダウンロード。
- Scroll your HTML with jquery.scrollable.jsの一番下の方のDownloadにあるjquery.scrollable.min.js (minified version, 3.9 kb)からjquery.scrollable.min.jsをダウンロード。
- サンプルのCSSはScroll your HTML with jquery.scrollable.jsの中間らへんにあるCSS fileからダウンロード。
（ダウンロード後backgroundに指定されている画像のパスを絶対パスに記述変更。）
- head内body内に下記ソースをコピペでサンプルデモの出来上がりです。
(head内のjsやCSSのパスは任意のものにして下さい。)
<link rel="stylesheet" href="style/scrollable.css" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script src="js/jquery.scrollable.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(function() {
$("#scrollable").scrollable({horizontal:true});
});
</script>
body内
<div id="scrollable">
<div class="navi"></div>
<a class="prev"></a>
<div class="items">
<a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a>
<a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a>
<a>11</a> <a>12</a> <a>13</a> <a>14</a> <a>15</a>
</div>
<a class="next"></a>
</div>
jquery.scrollable.jsとlightbox.jsを使ったサンプル
lightbox.jsの詳しい使い方については、「LightBoxのJQuery版 jQuery lightBox plugin」を参照下さい。
head内
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script src="js/jquery.scrollable.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(function() {
$("#scrollable").scrollable({horizontal:true});
});
</script>
body内
<div id="scrollable">
<div class="navi"></div>
<a class="prev"></a>
<div class="items">
<a href="image/photo/01.jpg"><image src="image/photo/01.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/02.jpg"><image src="image/photo/02.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/03.jpg"><image src="image/photo/03.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/04.jpg"><image src="image/photo/04.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/05.jpg"><image src="image/photo/05.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/06.jpg"><image src="image/photo/06.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/07.jpg"><image src="image/photo/07.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/08.jpg"><image src="image/photo/08.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/09.jpg"><image src="image/photo/09.jpg" alt="サンプル画像" width="150" height="120" /></a>
<a href="image/photo/10.jpg"><image src="image/photo/10.jpg" alt="サンプル画像" width="150" height="120" /></a>
</div>
<a class="next"></a>
</div>
はじめまして。今紹介してるサイトを見てみたんですが、随分変わってましたね…
http://flowplayer.org/tools/archive/scrollable-0.13.html#download
が元あるページだと思われるんですが、ダウンロード出来なくなっている事からはもうサイト上にはなさそうです…
ちなみに tools.scrollable.mousewheel-1.0.1.min を変わりに入れた際動作ってどうでしたか？
無理そうなら
http://flowplayer.org/tools/demos/scrollable/index.htm
こちらのページを参考にして頂くしかないと思います＞＜
2010年02月22日 22:55