jQuery：プラグイン：LightBox - Webデザインのこと、いろいろ

f:id:sankoblog:20160707214931p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>LightBox＋カルーセルパネル</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/scrollable-horizontal.css" >
<link rel="stylesheet" href="css/lightbox.css" >
<script src="js/jquery.tools.min.js"></script>
<script src="js/lightbox.js"></script>
</head>

<body> 
<a class="prev browse left"></a> 
<div class="scrollable">
<div class="items">
<div> 
<a href="img/1_t.jpg" title="Charles Chaplin"><img src="img/1.jpg"></a>
<a href="img/2_t.jpg" title="The Beatles"><img src="img/2.jpg"></a> 
<a href="img/3_t.jpg" title="James Brown"><img src="img/3.jpg"></a> 
<a href="img/4_t.jpg" title="Bob Dylan"><img src="img/4.jpg"></a> 
<a href="img/5_t.jpg" title="Neil Young"><img src="img/5.jpg"></a> 
</div> 
<div> 
<a href="img/6_t.jpg" title="Pablo Picasso"><img src="img/6.jpg"></a> 
<a href="img/7_t.jpg" title="Marc Chagall"><img src="img/7.jpg"></a> 
<a href="img/8_t.jpg" title="Erik Satie"><img src="img/8.jpg"></a> 
<a href="img/9_t.jpg" title="Andy Warhol"><img src="img/9.jpg"></a> 
<a href="img/10_t.jpg" title="Salvador Dali"><img src="img/10.jpg"></a> 
</div> 
<div> 
<a href="img/11_t.jpg" title="Albert Einstein"><img src="img/11.jpg"></a> 
<a href="img/12_t.jpg" title="勝海舟"><img src="img/12.jpg"></a> 
<a href="img/13_t.jpg" title="Martin Luther King"><img src="img/13.jpg"></a> 
<a href="img/14_t.jpg" title="Malcolm X"><img src="img/14.jpg"></a> 
<a href="img/15_t.jpg" title="Mohandas Gandhi"><img src="img/15.jpg"></a> 
</div> 
</div>   
</div> 
<a class="next browse right"></a>
<script>
$(function() {
  $(".scrollable").scrollable();
});
</script>
</body> 
</html>

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