スライド＋ライトボックス

javascript jQuery

使用したモジュール

http://jquerytools.org/download/

http://leandrovieira.com/projects/jquery/lightbox/

<!DOCTYPE html> 
<html lang="ja"> 
<head>
<meta charset="UTF-8">
<title>横スライド：サンプル</title> 
<link rel="stylesheet" href="css/horizontal.css" />
<link rel="stylesheet" href="css/lightbox.css" />
<script src="../js/jquery-1.7.2.min.js"></script>
<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/q1.png" title="Queen Collection" rel="lightbox"><img src="images/q1_t.png" width="100" height="120" /></a>
<a href="images/q2.png" title="Sheer Heart Attack" rel="lightbox"><img src="images/q2_t.png" width="100" height="120" /></a> 
<a href="images/q3.png" title="Jazz" rel="lightbox"><img src="images/q3_t.png" width="100" height="120" /></a> 
<a href="images/q4.png" title="A Day At The Race" rel="lightbox"><img src="images/q4_t.png" width="100" height="120" /></a> 
<a href="images/q5.png" title="Queen?" rel="lightbox"><img src="images/q5_t.png" width="100" height="120" /></a> 
</div> 
<div> 
<a href="images/i1.png" title="Somewhere Back In Time" rel="lightbox"><img src="images/i1_t.png" width="100" height="120" /></a> 
<a href="images/i2.png" title="Fear Of the Dark" rel="lightbox"><img src="images/i2_t.png" width="100" height="120" /></a> 
<a href="images/i3.png" title="World's Only Femele Tribute" rel="lightbox"><img src="images/i3_t.png" width="100" height="120" /></a> 
<a href="images/i4.png" title="No prayer For the Wing" rel="lightbox"><img src="images/i4_t.png" width="100" height="120" /></a> 
<a href="images/i5.png" title="The Final Frontier" rel="lightbox"><img src="images/i5_t.png" width="100" height="120" /></a> 
</div> 
<div> 
<a href="images/m1.png" title="Albert Einstein" rel="lightbox"><img src="images/m1_t.png" width="100" height="120" /></a> 
<a href="images/m2.png" title="勝海舟" rel="lightbox"><img src="images/m2_t.png" width="100" height="120" /></a> 
<a href="images/m3.png" title="Martin Luther King" rel="lightbox"><img src="images/m3_t.png" width="100" height="120" /></a> 
<a href="images/m4.png" title="Malcolm X" rel="lightbox"><img src="images/m4_t.png" width="100" height="120" /></a> 
<a href="images/m5.png" title="Mohandas Karamchand Gandhi" rel="lightbox"><img src="images/m5_t.png" width="100" height="120" /></a> 
</div> 
</div>   
</div> 
<a class="next browse right"></a> 
</body> 
</html>
  • horizontal.css

本家サイトの二つのスタイルシートをマージして変更

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 680px;
    height:170px;

    /* custom decorations */
    border:1px solid #ccc;
    background:url(/media/img/gradient/h300.png) repeat-x;
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.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;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(../images/vert_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:65px 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; }

/* up and down */
a.up, a.down  {
    background:url(../images/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

こちらは画像のパスだけ変更

/* line 6, ../sass/lightbox.sass */
#lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.85;
  display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
  width: auto;
  height: auto;
}
/* line 27, ../sass/lightbox.sass */
#lightbox a img {
  border: none;
}

/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 39, ../sass/lightbox.sass */
.lb-container {
  padding: 10px;
}

/* line 42, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 51, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 59, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 62, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 65, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  /* Trick IE into showing hover */
  display: block;
}

/* line 72, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}

/* line 76, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../images/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../images/next.png) right 48% no-repeat;
}

/* line 88, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -ms-border-bottom-left-radius: 4px;
  -o-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -ms-border-bottom-right-radius: 4px;
  -o-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 95, ../sass/lightbox.sass */
.lb-data {
  padding: 0 10px;
  color: #bbbbbb;
}
/* line 98, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 103, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 107, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 11px;
}
/* line 112, ../sass/lightbox.sass */
.lb-data .lb-close {
  width: 35px;
  float: right;
  padding-bottom: 0.7em;
  outline: none;
}
/* line 117, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
}