CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

使い方や解説

JSダウンロード

「jquery.scrollable.js」「jquery.mousewheel.js」をダウンロード。
詳しくは画像をスクロールさせる jquery.scrollable.jsをご覧下さい。

• phpto.js
• デモページに使っているCSSダウンロード
• デモページに使っているナビゲーションの画像ダウンロード

headタグ内

<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.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/photo.js"></script>
<script>
	$(function() {
		$("#scrollable").scrollable({horizontal:true});
	});
</script>

画像やコンテンツサイズを変更する場合に書き換える箇所

メインとなる画像要素の部分

#imgMain	{
	width: 600px;
	background: #F4F4F4;
	padding: 10px;
	margin: 0 auto;
	border: 3px solid #D1D1D1;
	margin-bottom: 30px;
}
#imgMain img	{ border: 1px solid #D1D1D1; }

スクロール部分全体

#scrollable {
	width: 835px;
	background: #EFEFEF;
	border:1px solid #DDD;
	padding:10px 8px;
	height: 120px;
	margin: 0 auto 30px;
}

スクロール表示エリア

div.items {
	width: 788px;
	height: 120px;
	float:left;
	_margin-top: -12px;
}

/* 画像エリア */
div.items a {
	display:block;
	float:left;
	margin-right:8px;
	width: 150px;
	height: 120px;
}

div.items img	{ border: 1px solid #D1D1D1; }

サイドのボタン。一番上のアイコンみたないの

/* ボタンエリア */
a.prev, a.next {
	display:block;
	width: 30px;
	height: 30px;
	float: left;
	margin: 45px 0 0 0;
	_margin-top: 40px;
	cursor:pointer;
}
a.prev	{
	margin-right: 8px;
}

a.prev, a.next {
	background: url(../image/left.png) no-repeat 0 0;
	width: 18px;
	height: 18px;
}
a.next {
	background-image:url(../image/right.png);		
}
a.prev:hover {
	background-position:0 -18px;		
}
a.next:hover {
	background-position:0 -18px;		
}


/* .navi */
div.navi {
	position:relative;
	top: -490px;
	left: 460px;
	margin-left:-50px;
	width:50px;
	height:0;
}

div.navi span {
	width: 8px;
	height: 8px;
	float: left;
	margin: 3px;
	background: url(../image/dots.png) 0 0 no-repeat;     
	cursor: pointer;
	_font-size:7px;
}

div.navi span:hover {
	background-position:0 -8px;      
}

div.navi span.active {
	background-position:0 -16px;     
}

div.navi:after	{ 
	height:0;	
	visibility: hidden;	
	content: ".";	
	display: block;	
	clear: both;
}

この用になっているので、画像サイズを変えた場合は上記CSSの箇所の「width」「margin」「position」の調整を行って下さい。

※サイズ変更して使う場合はある程度知識がないと難しいかもしれないです＞＜
まー根気よく数字を調整してくれれば大丈夫なはずですけどね...