画像やコンテンツの一覧を表示させて、サムネイルをクリックすると画像が切り替わるタブのようなギャラリーで表示させます。
省スペースでいろんな画像を見せたいときに使えるギャラリーです。
この記事ではそんなUIについて解説していきますので、是非最後までご覧いただけたら嬉しいです。
.innerHTML
JavaScriptのinnerHTML
は、要素内の HTML を取得したり設定するプロパティです。
const content = element.innerHTML;
element.innerHTML = content;
似たようなものに、insertAdjacentHTML()
がありますが、多少用途が異なり、innerHTML
は要素の内容を置き換えます。
ので、新たに要素を作って挿入する場合は、以下のinsertAdjacentHTML()
の記事を併せてご覧頂き、用途に応じて使い分けするようにしましょう。
タブで表示する画像ギャラリーのサンプル
早速サンプルです。
4つ並んだサムネイルの画像をどれかクリックすると、その下部に選択したサムネイルの画像が表示されます。
表示された画像には、非表示にする「✖️」とテキストが一緒に表示されます。
実装の手順と方法
コードの詳細の前に、実装の手順と方法について解説していきます。
まずはじめに、設置したいHTMLファイルに以下を記述します。
<!-- サムネイル -->
<div class="imgThumbColumn">
<div class="imgBlock">
<img src="https://dubdesign.net/wp-content/uploads/2022/02/jstextchange.jpg" alt="1個目の画像のalt" onclick="galleryFunction(this);">
</div>
<div class="imgBlock">
<img src="https://dubdesign.net/wp-content/uploads/2022/01/somemodal.jpg" alt="2個目の画像のalt" onclick="galleryFunction(this);">
</div>
<div class="imgBlock">
<img src="https://dubdesign.net/wp-content/uploads/2022/01/randomimg_eyecatch.jpg" alt="3個目の画像のalt" onclick="galleryFunction(this);">
</div>
<div class="imgBlock">
<img src="https://dubdesign.net/wp-content/uploads/2022/01/searchjava.jpg" alt="4個目の画像のalt" onclick="galleryFunction(this);">
</div>
</div>
<!-- ギャラリーの表示ブロック -->
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="galleryImgtext"></div>
</div>
次に、JavaScriptのコードをHTMLを設置したページに記述します。
コードは <body>〜</body>
で、</body>
の閉じタグ(クロージングタグ)の前に記述しましょう。
function galleryFunction(imgs) {
var galleryImg = document.getElementById("expandedImg");
var galleryImgText = document.getElementById("galleryImgtext");
galleryImg.src = imgs.src;
galleryImgText.innerHTML = imgs.alt;
galleryImg.parentElement.style.display = "block";
}
最後に、見た目を整える為CSSを記述します。
.imgThumbColumn {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
gap: 1%;
margin-bottom: 1%;
}
.imgBlock {
display: inline-block;
width: 24%;
overflow: hidden;
}
/* サムネイルの画像 */
.imgBlock img {
opacity: 0.8;
cursor: pointer;
transition: 0.2s ease-in-out;
}
.imgBlock img:hover {
transform: scale(1.1);
opacity: 1;
}
/* ギャラリーの表示場所 */
.container {
position: relative;
display: none;
animation: fadeIn 0.7s ease 0s 1 normal;
}
/* altのテキスト */
#galleryImgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 0.9rem;
line-height: 1;
}
/* 閉じるボタン */
.closebtn {
position: absolute;
top: 5px;
right: 10px;
color: white;
font-size: 2.3rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
}
.closebtn:hover {
opacity: 0.8;
}
/* FadeIn */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
}
}
@media screen and (max-width: 767px) {
.imgBlock {
width: 49%;
margin-bottom: 2%;
}
}
これで完成です。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。ざっくりですが、順に解説していきます。
HTML
HTMLは、大きく分けて「サムネイル」とサムネイルがクリックされた時の「ギャラリーの表示ブロック」の2つです。
<!-- サムネイル -->
<div class="imgThumbColumn">
<div class="imgBlock">
<img src="https://dubdesign.net/wp-content/uploads/2022/02/jstextchange.jpg" alt="1個目の画像のalt" onclick="galleryFunction(this);">
</div>
<div class="imgBlock">
<img src="https://dubdesign.net/wp-content/uploads/2022/01/somemodal.jpg" alt="2個目の画像のalt" onclick="galleryFunction(this);">
</div>
<div class="imgBlock">
<img src="https://dubdesign.net/wp-content/uploads/2022/01/randomimg_eyecatch.jpg" alt="3個目の画像のalt" onclick="galleryFunction(this);">
</div>
<div class="imgBlock">
<img src="https://dubdesign.net/wp-content/uploads/2022/01/searchjava.jpg" alt="4個目の画像のalt" onclick="galleryFunction(this);">
</div>
</div>
<!-- ギャラリーの表示ブロック -->
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="galleryImgtext"></div>
</div>
サムネイルには、onclick="galleryFunction(this);"
のイベントハンドラを img
タグに記述して、クリック時に関数が発動するようにします。
また、ギャラリーの表示ブロックには、画像を非表示にする「✖️」の span
タグにも「onclick」のイベントハンドラを設置します。
JavaScript
JavaScriptは、HTMLに設置したイベントハンドラ(onclick)で発動した関数を記述しています。
function galleryFunction(imgs) {
// 配置する画像とテキストの場所を指定
var galleryImg = document.getElementById("expandedImg");
var galleryImgText = document.getElementById("galleryImgtext");
// 取得した画像のURLとaltを配置
galleryImg.src = imgs.src;
galleryImgText.innerHTML = imgs.alt;
// ギャラリーへblockにして表示
galleryImg.parentElement.style.display = "block";
}
大きく分けて「配置する画像とテキストの場所を指定」「取得した画像のURLとaltを配置」「ギャラリーへblockにして表示」の3つです。
CSS
CSSは、「サムネイルのレイアウト」を flexbox
で配置をし、サムネイルの画像にはアニメーションを付けています。
.imgThumbColumn {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
gap: 1%;
margin-bottom: 1%;
}
.imgBlock {
display: inline-block;
width: 24%;
overflow: hidden;
}
/* サムネイルの画像 */
.imgBlock img {
opacity: 0.8;
cursor: pointer;
transition: 0.2s ease-in-out;
}
.imgBlock img:hover {
transform: scale(1.1);
opacity: 1;
}
/* ギャラリーの表示場所 */
.container {
position: relative;
display: none;
animation: fadeIn 0.7s ease 0s 1 normal;
}
/* altのテキスト */
#galleryImgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 0.9rem;
line-height: 1;
}
/* 閉じるボタン */
.closebtn {
position: absolute;
top: 5px;
right: 10px;
color: white;
font-size: 2.3rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
}
.closebtn:hover {
opacity: 0.8;
}
/* FadeIn */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
}
}
@media screen and (max-width: 767px) {
.imgBlock {
width: 49%;
margin-bottom: 2%;
}
}
全体的にはそこまで記述量は多くなく、レイアウトに関する内容が多いので、カスタマイズもしやすい内容です。
さいごに
ギャラリーは、これ以外にも「クリックしたらモーダルで表示」等々いろんなパターンがあるので、省スペースで画像を見せたい時用に、予め引き出しを増やしておくと便利です。
ので、いろんなパターンを増やしておきましょう。