<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="hotdog"><img src="images/s-01.jpg" width="100" height="130"/></a>
<a href="images/02.jpg" title="dog"><img src="images/s-02.jpg" width="100" height="130"/></a>
<a href="images/03.JPG" title=""><img src="images/s-03.jpg" width="100" height="130"/></a>
<a href="images/04.jpg" title=""><img src="images/s-04.jpg" width="100" height="130"/></a>
<a href="images/05.jpg" title=""><img src="images/s-05.jpg" width="100" height="130"/></a>
</div>
<div>
<a href="images/06.jpg" title=""><img src="images/s-06.jpg" width="100" height="130"/></a>
<a href="images/07.jpg" title=""><img src="images/s-07.jpg" width="100" height="130"/></a>
<a href="images/08.jpg" title=""><img src="images/s-08.jpg" width="100" height="130"/></a>
<a href="images/09.jpg" title=""><img src="images/s-09.jpg" width="100" height="130"/></a>
<a href="images/10.jpg" title=""><img src="images/s-10.jpg" width="100" height="130"/></a>
</div>
<div>
<a href="images/11.jpg" title=""><img src="images/s-11.jpg" width="100" height="130"/></a>
<a href="images/12.jpg" title=""><img src="images/s-12.jpg" width="100" height="130"/></a>
<a href="images/13.jpg" title=""><img src="images/s-13.jpg" width="100" height="130"/></a>
<a href="images/14.jpg" title=""><img src="images/s-14.jpg" width="100" height="130"/></a>
<a href="images/15.jpg" title=""><img src="images/s-15.jpg" width="100" height="130"/></a>
</div>
</div>
</div>
<a class="next browse right"></a>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>crossfader</title>
<style type="text/css">
*p2*{
margin: 0;
padding
}
div#container{
width:450px;
margin:50px auto;
}
img{
border:none;
}
ul{
list-style: none;
}
</style>
<script src="js/bsn.js"></script>
</head>
<body>
<div id="container">
<ul id="img_fader">
<li id="img1"><img src="images/ph01.jpg" width="450" height="300" alt="">
</li>
<li id="img2"><img src="images/ph02.jpg" width="450" height="300" alt="">
</li>
<li id="img3"><img src="images/ph03.jpg" width="450" height="300" alt="">
</li>
<li id="img4"><img src="images/ph04.jpg" width="450" height="300" alt="">
</li>
</ul>
<script>
var cf = new Crossfader( new Array('img1','img2','img3','img4'),1000,4000);
</script>
</div>
</body>
</html>
