jQueryのプラグイン

Lightbox」と「bxslider」プラグイン

プラグインのダウンロード

Lightboxダウンロード先

lokeshdhakar.com

bxsliderダウンロード先

bxslider.com

ファイルの階層構造

全体構造

f:id:develog:20160930015117p:plain

cssフォルダー

f:id:develog:20160930015129p:plain

jsフォルダー

f:id:develog:20160930015136p:plain

imgフォルダー

f:id:develog:20160930024753p:plain

ソースファイル

 index.html

<!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/jquery.bxslider.css"><!--ResetしたCSSの後に置く-->
<link rel="stylesheet" href="css/lightbox.css"><!--利用する順番に記述-->

</head>

<body>
<div id="container">
<header>
<ul class="bxslider">
  <li><img src="img/slide1.png" alt="#"></li>
  <li><img src="img/slide2.png" alt="#"></li>
  <li><img src="img/slide3.png" alt="#"></li>
</ul>
</header>

<ul class="lbox">
  <li><a href="img/bpic1.png" data-lightbox="image-1" data-title="紅葉の妙義山1"><img src="img/spic1.png" alt="紅葉の妙義山1"></a></li>
  <li><a href="img/bpic2.png" data-lightbox="image-1" data-title="紅葉の妙義山2"><img src="img/spic2.png" alt="紅葉の妙義山2"></a></li>
  <li><a href="img/bpic3.png" data-lightbox="image-1" data-title="紅葉の妙義山3"><img src="img/spic3.png" alt="紅葉の妙義山3"></a></li>
</ul>
</div>

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
<script src="js/lightbox.js"></script>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
html,body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,th,td {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "游ゴシック", YuGothic,
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
font-weight: 500;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul,ol {
  list-style: none;/* マーカーを消す */
}
a {
  text-decoration: none;/* 下線を消す */
}
img {
  border: 0;/* リンクが設定されたimgにつくborderを消す */
}
img,input {
  vertical-align: bottom;
}
body {
  background: #000;
}

#container {
  width: 100%;
}
header {
  width: 940px;
  height: 300px;
  margin: 20px auto;
}
ul.bxslider {
  width: 940px;
  height: 300px;
}

ul.lbox {
  width: 960px;
  margin: 60px auto;
  overflow: hidden;
  padding: 10px;
  background: #FFF;
}
.lbox li {
  float: left;
  margin: 10px;
}

lightbox.cssjquery.bxslider.css

イメージフォルダーが [ img ] になっているため、”lightbox.css” と ”jquery.bxslider.css” 内のイメージフォルダー指定を [ images ] から [ img ] に変更する必要があります。

 実行結果

 最初の画面です。

f:id:develog:20160929205712p:plain

 

画面下の3枚の画像をクリックすると画像が拡大表示されます。(lightbox

以下は右の3枚目の画像です。

f:id:develog:20160929205721p:plain

 

スライドさせてメイン画像の2枚目を表示させました。(bxslider)

f:id:develog:20160929205738p:plain