35日目 jQuery scrollable | javaScript ユーザー定義関数

授業

jQuery scrollable

http://latte.moto-chika.com/scrollable/index.html
で、できた・・
左スクロールボタンも出た。
a class指定で、browseだけでなく、prev leftも指定しておかないと左ボタンが動かないことが判明。これが原因だった・・

ソースファイル

<!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/lightbox2.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"> 
<h1>jQuery scrollableからのlightbox</h1>
<div class="items">
<div>
<a href="photos/k1.jpg" title="格闘技1"><img src="photos/k1_s.jpg" width="100" height="120"></a>
<a href="photos/k2.jpg" title="格闘技2"><img src="photos/k2_s.jpg" width="100" height="120"></a>
<a href="photos/k3.jpg" title="格闘技3"><img src="photos/k3_s.jpg" width="100" height="120"></a>
<a href="photos/k4.jpg" title="格闘技4"><img src="photos/k4_s.jpg" width="100" height="120"></a>
<a href="photos/k5.jpg" title="格闘技5"><img src="photos/k5_s.jpg" width="100" height="120"></a>
</div>
<div>
<a href="photos/k6.jpg" title="コヒ様1"><img src="photos/k6_s.jpg" width="100" height="120"></a>
<a href="photos/k7.jpg" title="コヒ様2"><img src="photos/k7_s.jpg" width="100" height="120"></a>
<a href="photos/k8.jpg" title="コヒ様3"><img src="photos/k8_s.jpg" width="100" height="120"></a>
<a href="photos/k9.jpg" title="コヒ様4"><img src="photos/k9_s.jpg" width="100" height="120"></a>
<a href="photos/k10.jpg" title="格闘技10"><img src="photos/k10_s.jpg" width="100" height="120"></a>
</div>
<div>
<a href="photos/k11.jpg" title="格闘技11"><img src="photos/k11_s.jpg" width="100" height="120"></a>
<a href="photos/k12.jpg" title="格闘技12"><img src="photos/k12_s.jpg" width="100" height="120"></a>
<a href="photos/k13.jpg" title="格闘技13"><img src="photos/k13_s.jpg" width="100" height="120"></a>
<a href="photos/k14.jpg" title="格闘技14"><img src="photos/k14_s.jpg" width="100" height="120"></a>
<a href="photos/k15.jpg" title="格闘技15"><img src="photos/k15_s.jpg" width="100" height="120"></a>
</div>
</div> <!-- itemsしめ -->
</div><!--scrollableしめ-->
<a class="next browse right"></a>
</body>
</html>

base.css

@charset "UTF-8";

*{
	margin:0;
	padding:0;
}

body{
	font-size:1em;
	font-family:
	"hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	Meiryo,
	"メイリオ",
	Osaka,
	"MS P Gothic",
	"MS Pゴシック",
	sans-serif
	;
	margin:0px;
	padding:50px 80px;
}
h1{
  text-align: center;
}
a:active{
    overflow: hidden;
	/*outline:none; */
}
:focus{
	-moz-outline-style:none;
}
/*this makes it possible to add next button beside scrollable */
.scrollable{
	  float:left;
}
/*prev, next,prevPage and nextPage buttons*/
a.browse{
	background:url(../images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}
/*right*/
a.right{background-position:0 -30px; clear:right; margin-right:0px;}
a.right:hover{background-position:-30px -30px;}
a.right:active{background-position:-60px -30px;}
/*left*/
a.left{margin-left:0px;}
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

a.disabled{
	visibility:hidden !important;  /* スクロールが終わったところでボタンを消す*/
}

horizontal.css

.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 680px;
	height:223px;
	/* custom decorations */
	border:1px solid #ccc;
	background:url(../../img/global/gradient/h300.png) repeat-x;
}

.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}
.items div {
	float:left;
	width:680px;
}
/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:100px;
	height:120px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}