横スクロール&Lighbox＠12月14日

Java Script PHP

20111215043922
◎ソースからjqueryを別名保存で使用
◎CSSで囲み罫を角丸にする
-moz-border-radius:4px;-webkit-border-radius:4px;
cursor: pointer; ・・・カーソルの形が指。
cursor: default; ・・・カーソルの形が普通の矢印
outline: none;　または overflow: auto; タブをクリックしたときに出るタブ周りの点線を消す。(display: block; とセット)

<!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>
</head>
<body>
<a class="prev browse left"></a> 
<div class="scrollable">
<div class="items">
<div>
<a href="images/01.jpg" title="彫刻０１"><img src="images/s01.jpg" width="100" height="150"></a>
<a href="images/02.jpg" title="彫刻０２"><img src="images/s02.jpg" width="100" height="150"></a>
<a href="images/03.jpg" title="彫刻０３"><img src="images/s03.jpg"  width="100" height="150"></a>
<a href="images/04.jpg" title="彫刻０４"><img src="images/s04.jpg" width="100" height="150"></a>
<a href="images/05.jpg" title="彫刻０５"><img src="images/s05.jpg" width="100" height="150"></a>
</div>
<div>
<a href="images/06.jpg" title="彫刻０６"><img src="images/s06.jpg" width="100" height="150"></a>
<a href="images/07.jpg" title="彫刻０７"><img src="images/s07.jpg" wodth="100" height="150"></a>
<a href="images/08.jpg" title="彫刻０８"><img src="images/s08.jpg" width="100" height="150"></a>
<a href="images/09.jpg" title="彫刻０９"><img src="images/s09.jpg" width="100" height="150"></a>
<a href="images/10.jpg" title="彫刻１０"><img src="images/s10.jpg" width="100" height="150"></a>
</div>
<div>
<a href="images/11.jpg" title="彫刻11"><img src="images/s11.jpg" width="100" height="150"></a>
<a href="images/12.jpg" title="彫刻12"><img src="images/s12.jpg" wodth="100" height="150"></a>
<a href="images/13.jpg" title="彫刻13"><img src="images/s13.jpg" width="100" height="150"></a>
<a href="images/14.jpg" title="彫刻14"><img src="images/s14.jpg" width="100" height="150"></a>
<a href="images/15.jpg" title="彫刻15 あけましておめでとうございます"><img src="images/s15.jpg" width="100" height="150"></a>
</div>
</div>
</div>
<a class="next browse right"></a>
</body>
</html>