横スクロールとlightBox2の合わせ技

昨日はjQuery tools scrollableとjQuery lightBox pluginを組み合わせましたが、今度は「lightBox2」を試してみました。

ポイント

lightbox2はLightbox 2からダウンロードし、「lightbox.js」、「lightbox.css」と画像(close.png/loading.gif/next.png/prev.png)を使用します。
※ダウンロード時のLightbox 2のバージョンはv2.51でした。

a要素に「rel="lightbox"」が必要です。

<a href="test.jpg" title="" rel="lightbox"><img src="test.jpg"></a>

プレビュー

↓拡大表示にすると見やすいです（右上のボタンが拡大表示）。

↓スマートフォンの方はこちらからプレビューできます。
scrollableとlightBox2

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>scrollableとlightBox2</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
<script src="js/jquery.lightbox.js"></script>
<link rel="stylesheet" href="css/standalone.css">
<link rel="stylesheet" href="css/scrollable-horizontal.css">
<link rel="stylesheet" href="css/scrollable-buttons.css">
<link rel="stylesheet" href="css/lightbox.css">
<script>
    $(function() {
     	$('.scrollable').scrollable();
     });
</script>
</head>
<body>
<div style="margin:0 auto; width: 634px; height:120px;">
<!-- "previous page" action -->
<a class="prev browse left"></a>
 
<!-- root element for scrollable -->
<div class="scrollable" id="scrollable">
 
  <!-- root element for the items -->
  <div class="items">
 
    <!-- 1-5 -->
    <div id="gallery">
      <a href="http://farm1.staticflickr.com/143/321464099_a7cfcb95cf.jpg" title="1" rel="lightbox"><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg"></a>
      <a href="http://farm1.staticflickr.com/153/399232237_6928a527c1.jpg" title="2" rel="lightbox"><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg"></a>
      <a href="http://farm4.staticflickr.com/3624/3323893148_8318838fbd.jpg" title="3" rel="lightbox"><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg"></a>
      <a href="http://farm1.staticflickr.com/28/66523124_b468cf4978.jpg" title="4" rel="lightbox"><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg"></a>
    </div>
 
    <!-- 5-10 -->
    <div id="gallery">
      <a href="http://farm4.staticflickr.com/3651/3445879840_7ca4b491e9.jpg" title="5" rel="lightbox"><img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg"></a>
      <a href="http://farm1.staticflickr.com/135/321464104_c010dbf34c.jpg" title="6" rel="lightbox"><img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg"></a>
      <a href="http://farm4.staticflickr.com/3023/3323897466_e61624f6de.jpg" title="7" rel="lightbox"><img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg"></a>
      <a href="http://farm1.staticflickr.com/153/399232237_6928a527c1.jpg" title="8" rel="lightbox"><img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg"></a>
    </div>
 
    <!-- 10-15 -->
    <div id="gallery">
      <a href="http://farm4.staticflickr.com/3629/3323896446_3b87a8bf75.jpg" title="9" rel="lightbox"><img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg"></a>
      <a href="http://farm4.staticflickr.com/3023/3323897466_e61624f6de.jpg" title="10" rel="lightbox"><img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg"></a>
      <a href="http://farm4.staticflickr.com/3650/3323058611_d35c894fab.jpg" title="11" rel="lightbox"><img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg"></a>
      <a href="http://farm4.staticflickr.com/3635/3323893254_3183671257.jpg" title="12" rel="lightbox"><img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"></a>
    </div>
 
  </div>
 
</div>
 
<!-- "next page" action -->
<a class="next browse right"></a>
</div>
</body>
</html>

CSS

＜standalone.css＞

@charset "utf-8";

body {
    padding:50px 80px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}

/* get rid of those system borders being generated for A tags */
body {
    padding:50px 80px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
    background: #222222 url(http://jsrun.it/assets/a/g/4/2/ag42a.png);
}

/* get rid of those system borders being generated for A tags */
a:active {
    outline:none;
}

:focus {
    -moz-outline-style:none;
}

＜scrollable-horizontal.css＞

@charset "utf-8";
/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 521px;
    height:110px;

    /* custom decorations */
    background-color:#4f4f4f;
}

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


.scrollable .items div a {
  float: left;
  display: block;
  
  padding: 7px;
  
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

/* single scrollable item */
.scrollable img {
    margin:7px;
    width:100px;
    height:75px;
    
    -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.3);
}


.scrollable .items div a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}

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

＜scrollable-buttons.css＞

@charset "utf-8";
/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(http://jsrun.it/assets/c/U/4/2/cU42K.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; }

/* up and down */
a.up, a.down  {
    background:url(/media/img/scrollable/arrow/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;
}

＜lightbox.css＞

@charset "utf-8";
#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(http://jsrun.it/assets/k/D/7/b/kD7bU.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(http://jsrun.it/assets/1/a/M/P/1aMPo.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;
}

ウェブ学のすすめ

Study of Web Design & Programing

横スクロールとlightBox2の合わせ技

ポイント

プレビュー

コード

HTML

CSS