lightboxプラグイン
lightboxプラグインはbxSliderと並んで有名なjQueryプラグインです。
種類としてはモーダルウィンドウのプラグインになります。
lightboxプラグインのダウンロード
公式サイトのダウンロードサイト「github」に行き、ダウンロードしましょう。
サイトへの導入
ダウンロードしたzipファイルを解凍してdistフォルダの中身を自分の作成した
フォルダへコピーします。
ページへの読み込み
プラグインフォルダからコピーしてきたcssファイルとjsファイルをページ内でリンクさせます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>lightboxプラグイン</title>
<link rel="stylesheet" herf="css/lightbox.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
</body>
</html>ページ内にクリックするサムネイル画像とクリックした際に表示する画像を配置します。
<a href="img/image_l.jpg" data-lightbox="images"><img src="img/image_th.jpg"
alt="thumbnail"></a>
data-lightbox属性を設定する事でlightboxとして機能します。
data-lightboxだけでは動かず、data-lightbox=”image”のように値を設定する必要があるので注意してください。
サンプル素材のダウンロード
12月22日授業データ「lightbox-1」
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>lightbox演習</title>
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>lightbox演習</h1>
<p><a href="img/image01.jpg" data-lightbox="cake"><img src="img/image01_th.jpg" alt="サムネイル画像"></a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>style.css
@charset "utf-8";
html,body,h1,p{
padding: 0;
margin: 0;
line-height: 1;
}
img{ vertical-align: bottom;}
.container{
width: 320px;
margin: 50px auto;
}
.container h1{
margin-bottom: 20px;
text-align: center;
}12月22日授業データ「lightbox-2」
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>lightbox演習2</title>
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>lightbox演習2</h1>
<ul>
<li><a href="img/image01.jpg" data-lightbox="cake1" data-title="ケーキ画像"><img src="img/image01_th.jpg" alt="サムネイル画像"></a></li>
<li><a href="img/image02.jpg" data-lightbox="cake"><img src="img/image02_th.jpg" alt="サムネイル画像"></a></li>
<li><a href="img/image03.jpg" data-lightbox="cake1"><img src="img/image03_th.jpg" alt="サムネイル画像"></a></li>
<li><a href="img/image04.jpg" data-lightbox="cake"><img src="img/image04_th.jpg" alt="サムネイル画像"></a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>style.css
@charset "utf-8";
html,body,h1,p,ul,li{
padding: 0;
margin: 0;
line-height: 1;
}
img{ vertical-align: bottom;}
ul{list-style: none;}
.container{
width: 700px;
margin: 50px auto;
}
.container h1{
margin-bottom: 20px;
text-align: center;
}
.container ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container ul li{
margin-bottom: 20px;
transition: 0.5s;
}
.container ul li:hover{
opacity: 0.8;
}