【jQuery】 Scrollableを使う - PCゲーマーのWebデザイン備忘録

f:id:game-web-design:20141021113321p:plain
Scrollableを利用して、スライドできるサムネイルを作ります。

f:id:game-web-design:20141021113034p:plain

準備

Scrollableのサンプルページのソースから、以下のデータをダウンロードしてきます。Scrollableは新しいjQueryのバージョンで

サムネイル画像を10~15枚ほど用意します。

HTMLの記述

Scrollableを使った画像一覧を作るには、画像データのHTMLをクラス「scrollable」とクラス「items」で囲います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Scrollable</title>
<link rel="stylesheet" href="css/scrollable-horizontal.css">
<link rel="stylesheet" href="css/scrollable-buttons.css">
<script src="js/jquery.tools.min.js"></script>
</head>

<body>

<div class="wrapper">
<a class="prev browse left"></a><!--戻るボタン-->
<div class="scrollable"><!--Scrollableウィンドウ-->
<div class="items"><!--画像データ-->

<div> 
<img src="img/s_01.png" alt="">
<img src="img/s_02.png" alt="">
<img src="img/s_03.png" alt="">
<img src="img/s_04.png" alt="">
<img src="img/s_05.png" alt="">
</div>

<div> 
<img src="img/s_06.png" alt="">
<img src="img/s_07.png" alt="">
<img src="img/s_08.png" alt="">
<img src="img/s_09.png" alt="">
<img src="img/s_010.png" alt="">
</div>

<div> 
<img src="img/s_011.png" alt="">
<img src="img/s_012.png" alt="">
<img src="img/s_013.png" alt="">
<img src="img/s_014.png" alt="">
<img src="img/s_015.png" alt="">
</div>

</div><!--/.items-->
</div><!--/.scrollable-->
<a class="next browse right"></a><!--進むボタン-->
</div><!--/.wrapper-->
<script>
$(function() {
  $(".scrollable").scrollable();
});
</script>
</body>
</html>

CSSを編集する。

デフォルトのCSSのままだと表示が崩れるので、独自のレイアウトに編集しなおします。

ここでは画像を横に5つ並べ、一つの画像のサイズが100x100の場合の記述です。

scrollable-horizontal.css

.scrollable {
  position:relative;
  overflow:hidden;
  width: 676px; /* ((100+(1*2)+(2*2)*5)+(26*4)+(21*2) */
  height:148px; /* 100+(1*2)+(2*2)+(20*2) */
  border:1px solid #ccc;
}
.scrollable .items {
  width:20000em;
  position:absolute;
  clear:both;
}

.items div {
  float:left;
  width:676px;
}

.scrollable img {
  float:left;
  margin:20px 5px 20px 21px;
  background-color:#fff;
  padding:2px;
  border:1px solid #ccc;
  width:100px;
  height:100px;
  border-radius: 4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}

.scrollable .active {
  border:2px solid #000;
  position:relative;
  cursor:default;
}

scrollable-buttons.css

@charset "UTF-8";

/* reset */
html, body, div {
  margin:0;
  padding:0;
}
body {
  font-size:1em;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  margin: 0px;
  padding:50px 80px;
  }

/* layout */
.wrapper{
  width: 778px;
  margin: 0 auto;
}

a:active {
  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(../img/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; }
/* disabled navigational button */
a.disabled {
  visibility:hidden !important;    
}