画像を左右にスクロールさせられるJavaScript「jQuery Smooth Div Scroll」

画像ギャラリーを作る際にLightBoxを使用する人は多いでしょう。
しかし飽き飽きしている人も多いのも確かです。
たまにはjQuery Smooth Div Scrollのように左右にスクロールさせるのはいかがでしょか？

使用方法

jQuery Smooth Div Scrollからjquery.smoothDivScroll-0.6.jsや画像、CSSファイルを、jQueryからjquery.jsをダウロードしましょう。
またjquery.scrollToからjquery.scrollTo.jsをダウロードします。


<link rel="stylesheet" type="text/css" href="smoothDivScroll.css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="jquery.smoothDivScroll-0.6.js"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
	$("#id名).smoothDivScroll({mouseDownSpeedBooster: 2});
});
</script>

さらにCSSに追記します。


#id名 div.scrollableArea * {position: relative;float: left;margin: 0;padding: 0;}

あとはスクロールさせたい画像を上記指定のidでくくります。


<div id="id名">
	<div class="scrollingHotSpotLeft"></div>
	<div class="scrollingHotSpotRight"></div>
		<div class="scrollWrapper">
			<div class="scrollableArea">
				<img src="画像パス" />
				//画像分
			</div>
		</div>
</div>

上記で完成です。
下のサンプルでは、透過したグレーをホバーポイントにかけています。

サンプル