読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

scrollable

scrollable


http://jquerytools.github.io/demos/scrollable/index.html

グループとして見える画像の記述
    <div>
      <img src="画像のパス">
      <img src="画像のパス">
      <img src="画像のパス">
      <img src="画像のパス">
      <img src="画像のパス">
    </div>
HTMLの記述
<!DOCTYPE html> 
<html lang="ja"> 
<head>
<meta charset="UTF-8">
<title>横スライド:サンプル</title> 
<link rel="stylesheet" href="css/style.css">	
<link rel="stylesheet" href="css/horizontal.css" >
<script src="js/jquery.tools.min.js"></script>
</head>
<body>

<div> 
<img src="img/01_t.jpg">
<img src="img/02_t.jpg">
<img src="img/03_t.jpg">
<img src="img/04_t.jpg">
<img src="img/05_t.jpg">
</div>

<div> 
<img src="img/06_t.jpg">
<img src="img/07_t.jpg">
<img src="img/08_t.jpg">
<img src="img/09_t.jpg">
<img src="img/10_t.jpg">
</div>

<div> 
<img src="img/11_t.jpg">
<img src="img/12_t.jpg">
<img src="img/13_t.jpg">
<img src="img/14_t.jpg">
<img src="img/15_t.jpg">
</div>

</body>
</html>
scrollabeの設定
<div class="scrollable">
<div class="items">

<div> 
<img src="img/01_t.jpg">
<img src="img/02_t.jpg">
<img src="img/03_t.jpg">
<img src="img/04_t.jpg">
<img src="img/05_t.jpg">
</div>

<div> 
<img src="img/06_t.jpg">
<img src="img/07_t.jpg">
<img src="img/08_t.jpg">
<img src="img/09_t.jpg">
<img src="img/10_t.jpg">
</div>

<div> 
<img src="img/11_t.jpg">
<img src="img/12_t.jpg">
<img src="img/13_t.jpg">
<img src="img/14_t.jpg">
<img src="img/15_t.jpg">
</div>

</div>
</div>
ボタンの記述
<a class="prev browse left"></a> 

<div class="scrollable">
<div class="items">

<div> 
<img src="img/01_t.jpg">
<img src="img/02_t.jpg">
<img src="img/03_t.jpg">
<img src="img/04_t.jpg">
<img src="img/05_t.jpg">
</div>

<div> 
<img src="img/06_t.jpg">
<img src="img/07_t.jpg">
<img src="img/08_t.jpg">
<img src="img/09_t.jpg">
<img src="img/10_t.jpg">
</div>

<div> 
<img src="img/11_t.jpg">
<img src="img/12_t.jpg">
<img src="img/13_t.jpg">
<img src="img/14_t.jpg">
<img src="img/15_t.jpg">
</div>

</div>
</div>

<a class="next browse right"></a>
scrollableの関数
<script>
$(function() {
  $(".scrollable").scrollable();
});
</script>


《style.css

@charset "UTF-8";

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;
  }
/* 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;    
}   


《horizontal.css

@charset "UTF-8";

.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 680px;
	height:163px;
	/* custom decorations */
	border:1px solid #ccc;
}

.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;
}

Lightbox





scrollableに追記
<link rel="stylesheet" href="css/lightbox.css" >
<script src="js/lightbox.js"></script>
Lightboxの拡大写真のリンクを設定
<body> 
<a class="prev browse left"></a> 
<div class="scrollable">
<div class="items">
<div> 
<a href="img/01.jpg" title="Charles Chaplin"><img src="img/01_t.jpg"></a>
<a href="img/02.jpg" title="The Beatles"><img src="img/02_t.jpg"></a> 
<a href="img/03.jpg" title="James Brown"><img src="img/03_t.jpg"></a> 
<a href="img/04.jpg" title="Bob Dylan"><img src="img/04_t.jpg"></a> 
<a href="img/05.jpg" title="Neil Young"><img src="img/05_t.jpg"></a> 
</div> 
<div> 
<a href="img/06.jpg" title="Pablo Picasso"><img src="img/06_t.jpg"></a> 
<a href="img/07.jpg" title="Marc Chagall"><img src="img/07_t.jpg"></a> 
<a href="img/08.jpg" title="Erik Satie"><img src="img/08_t.jpg"></a> 
<a href="img/09.jpg" title="Andy Warhol"><img src="img/09_t.jpg"></a> 
<a href="img/10.jpg" title="Salvador Dali"><img src="img/10_t.jpg"></a> 
</div> 
<div> 
<a href="img/11.jpg" title="Albert Einstein"><img src="img/11_t.jpg"></a> 
<a href="img/12.jpg" title="勝海舟"><img src="img/12_t.jpg"></a> 
<a href="img/13.jpg" title="Martin Luther King"><img src="img/13_t.jpg"></a> 
<a href="img/14.jpg" title="Malcolm X"><img src="img/14_t.jpg"></a> 
<a href="img/15.jpg" title="Mohandas Gandhi"><img src="img/15_t.jpg"></a> 
</div> 
</div>   
</div> 
<a class="next browse right"></a>
</body> 


広告を非表示にする