横スライドが完成しませんでした

jQuery 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>横スライド：サンプル</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/horizontal.css">
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery.tools.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
	$(function() {
		$(".scrollable").scrollable();
	});
</script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<a class="prev browse left"></a>
<div class="scrollable">
<div class="items">
<div>
<a href="images/back01.jpg" title="木立"><img src="images/back01_s.jpg" width="100" height="120" /></a>
<a href="images/bridal01.jpg" title="花嫁さん"><img src="images/bridal01_s.jpg" width="100" height="120" /></a> 
<a href="images/dog.jpg" title="わんこ"><img src="images/dog_s.jpg" width="100" height="120" /></a> 
<a href="images/dw001.jpg" title="ガラス瓶"><img src="images/dw001_s.jpg" width="100" height="120" /></a> 
<a href="images/dw020.jpg" title="ワインクーラー"><img src="images/dw020_s.jpg" width="100" height="120" /></a>
</div>
<div>
<a href="images/dw029.jpg" title="レモン絞り？"><img src="images/dw029_s.jpg" width="100" height="120" /></a> 
<a href="images/dw031.jpg" title="食べたら歯みがき"><img src="images/dw031_s.jpg" width="100" height="120" /></a> 
<a href="images/dw094.jpg" title="オープンデッキ"><img src="images/dw094_s.jpg" width="100" height="120" /></a> 
<a href="images/dw108.jpg" title="トーキョータワー"><img src="images/dw108_s.jpg" width="100" height="120" /></a> 
<a href="images/flower.jpg" title="flower"><img src="images/flower_s.jpg" width="100" height="120" /></a> 
</div>
<div>
<a href="images/kimono.jpg" title="浴衣美人"><img src="images/kimono_s.jpg" width="100" height="120" /></a> 
<a href="images/wa.jpg" title="和の佇まい"><img src="images/wa_s.jpg" width="100" height="120" /></a> 
<a href="images/web02.jpg" title="縁側お茶セット"><img src="images/web02_s.jpg" width="100" height="120" /></a> 
<a href="images/web03.jpg" title="風鈴"><img src="images/web03_s.jpg" width="100" height="120" /></a> 
<a href="images/web04.jpg" title="駒下駄"><img src="images/web04_s.jpg" width="100" height="120" /></a> 
</div>
</div>
</div>
<a class="next browse right"></a>
</body>
</html></body>
</html>

ほか、すべて先生のソース丸コピなので、
載せるだけbyteの無駄によって割愛。
表示結果のキャプチャは↓

CSSオフにした状態は↓

謎です。Lightboxのpluginも「0.5」の方DLしてるのに…。
矢印が左右に出てたり、その矢印がただの飾り状態なのは、
どうやって解決しよう？

lightbox2の場合の解決法

<script>
	$(function() {
		$(".scrollable").scrollable();
	});
</script>
<script src="js/lightbox.js"></script>

試しに入れ替えてみたが改善なし。
サムネイルクリック→拡大画像表示の際に、
フレームに収まってないのも何か関係がありそうな気がする。

※証拠キャプチャ