【コピペで簡単】画像のギャラリー表示機能を実装【Lightbox】
- プログラミング -
2020.12.25
Sassの練習でWebサイト模写をしていたら、「Lightbox」という簡単にギャラリー表示が実装できるJavaScriptライブラリに出会いました。
画像が格子状に並んでいて、画像をクリックするとフワッと浮き出て画面に大きく表示されるよくあるやつですね。
まずは以下、Lightboxのデモを用意したので画像をクリックした時の動きを見てみてください。
See the Pen
lightbox-gallery by Yuki (@RFedNo1)
on CodePen.
かなり便利そうなので、コピペ10秒でこの機能を使いまわせるように、スクリプトをメモしておきます。
コピペで即体感！Lightboxで画像ギャラリー表示
- 以下スクリプトをコピー(ボックス右上にコピーボタンがあります)
- htmlファイルへペースト
これだけで、デモと同じようなギャラリーが表示されます。
HTML<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"
type="text/javascript"></script>
<style>
* {
padding: 0;
margin: 0;
}
.gallery__list {
list-style-type: none;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.gallery__item {
width: calc(95% / 2);
}
.gallery__item:not(:nth-child(-n+2)) {
margin-top: 20px;
}
.gallery__item img {
width: 100%;
height: auto;
}
.gallery__item a {
transition: .5s;
}
.gallery__item a:hover {
filter: opacity(0.7);
}
.gallery__item a:hover img {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>
<section class="gallery">
<h2 class="section__title">フォトギャラリー</h2>
<ul class="gallery__list">
<li class="gallery__item">
<a href="https://cdn.pixabay.com/photo/2016/07/28/02/02/greece-1546902_960_720.jpg"
data-lightbox="group1" data-title="1枚目の画像">
<img src="https://cdn.pixabay.com/photo/2016/07/28/02/02/greece-1546902_960_720.jpg" alt="">
</a>
</li>
<li class="gallery__item">
<a href="https://cdn.pixabay.com/photo/2019/07/14/10/48/mosel-4336787_960_720.jpg"
data-lightbox="group1" data-title="2枚目の画像">
<img src="https://cdn.pixabay.com/photo/2019/07/14/10/48/mosel-4336787_960_720.jpg" alt="">
</a>
</li>
<li class="gallery__item">
<a href="https://cdn.pixabay.com/photo/2019/07/12/18/59/woman-4333420_960_720.jpg"
data-lightbox="group1" data-title="3枚目の画像"><img
src="https://cdn.pixabay.com/photo/2019/07/12/18/59/woman-4333420_960_720.jpg" alt="">
</a>
</li>
<li class="gallery__item">
<a href="https://cdn.pixabay.com/photo/2019/07/15/12/10/old-tree-4339191_960_720.jpg"
data-lightbox="group1" data-title="4枚目の画像"><img
src="https://cdn.pixabay.com/photo/2019/07/15/12/10/old-tree-4339191_960_720.jpg" alt="">
</a>
</li>
</ul>
</section>
</body>あとは、CSSスタイリングを<style>タグ内に書き込んでいるので、必要に応じて別CSSファイルとして切り出したり、画像を差し替えたり、環境に合わせていろいろ変えてみてください。
以下サイトを参考にさせていただきました。
