jQueryのプラグイン
「Lightbox」と「bxslider」プラグイン
プラグインのダウンロード
Lightboxダウンロード先
bxsliderダウンロード先
ファイルの階層構造
全体構造
cssフォルダー
jsフォルダー
imgフォルダー
ソースファイル
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.css と jquery.bxslider.css
イメージフォルダーが [ img ] になっているため、”lightbox.css” と ”jquery.bxslider.css” 内のイメージフォルダー指定を [ images ] から [ img ] に変更する必要があります。
実行結果
最初の画面です。
画面下の3枚の画像をクリックすると画像が拡大表示されます。(lightbox)
以下は右の3枚目の画像です。
スライドさせてメイン画像の2枚目を表示させました。(bxslider)