Parts
画像ギャラリーのパーツ 2
- Parts
- 画像ギャラリーのパーツ
- 画像ギャラリーのパーツ 2
「input」のnameは設置するギャラリーごとに名前を付ける。
画像はメイン画像とサムネイル画像を用意する。
「label」のfor名と「input」のid名は項目ごとにかぶらない名前を付ける。
メイン画像とそれに対応するサムネイルを紐づけている。
※自動で表示を切り替えるにはjavascriptが必要。
<div class="imageGalleryBox--type02 --autoImageGallery">
<input type="radio" id="imageGallery--type02__label001" name="imageGallery--type02__input" checked/>
<figure><img src="メイン画像の一枚目の画像パス" alt="メイン画像01"/></a></figure>
<input type="radio" id="imageGallery--type02__label002" name="imageGallery--type02__input"/>
<figure><img src="メイン画像の二枚目の画像パス" alt="メイン画像02"/></figure>
<input type="radio" id="imageGallery--type02__label003" name="imageGallery--type02__input"/>
<figure><img src="メイン画像の三枚目の画像パス" alt="メイン画像03"/></figure>
<input type="radio" id="imageGallery--type02__label004" name="imageGallery--type02__input"/>
<figure><img src="メイン画像の四枚目の画像パス" alt="メイン画像04"/></figure>
<input type="radio" id="imageGallery--type02__label005" name="imageGallery--type02__input" checked/>
<figure><img src="メイン画像の五枚目の画像パス" alt="メイン画像05"/></figure>
<input type="radio" id="imageGallery--type02__label006" name="imageGallery--type02__input"/>
<figure><img src="メイン画像の六枚目の画像パス" alt="メイン画像06"/></figure>
<div class="imageGallery">
<label for="imageGallery--type02__label001"><img src="サムネイル画像の一枚目の画像パス" alt="サムネイル画像01"/></label>
<label for="imageGallery--type02__label002"><img src="サムネイル画像の二枚目の画像パス" alt="サムネイル画像02"/></label>
<label for="imageGallery--type02__label003"><img src="サムネイル画像の三枚目の画像パス" alt="サムネイル画像03"/></label>
<label for="imageGallery--type02__label004"><img src="サムネイル画像の四枚目の画像パス" alt="サムネイル画像04"/></label>
<label for="imageGallery--type02__label005"><img src="サムネイル画像の五枚目の画像パス" alt="サムネイル画像05"/></label>
<label for="imageGallery--type02__label006"><img src="サムネイル画像の六枚目の画像パス" alt="サムネイル画像06"/></label>
<!-- /.imageGallery --></div>
<!-- /.imageGalleryBox --></div>
.imageGalleryBox--type02 {
display: block;
position: relative;
padding-top: 20em; /* メイン画像の高さ */
min-height: 20em; /* メイン画像の高さ */
@media print, screen and (min-width: 768px) {
padding-top:0;
}
input[type=radio] {
position: absolute;
opacity: 0;
visibility: hidden;
}
input[type=radio]:checked + figure {
opacity: 1;
z-index: 1;
}
input[type=radio] + figure {
width: 100%;
height: 20em; /* メイン画像の高さ */
background: #EEE;
position: absolute;
display: block;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
overflow: hidden;
@media print, screen and (min-width: 768px) {
width: 78%;
}
}
input[type=radio] + figure img {
width: 100%;
height: 100%;
object-fit: contain;
}
input[type=radio] + figure a {
display: block;
width: 100%;
height: 100%;
}
input:nth-of-type(1):checked ~ .imageGallery label:nth-of-type(1) img,
input:nth-of-type(2):checked ~ .imageGallery label:nth-of-type(2) img,
input:nth-of-type(3):checked ~ .imageGallery label:nth-of-type(3) img,
input:nth-of-type(4):checked ~ .imageGallery label:nth-of-type(4) img,
input:nth-of-type(5):checked ~ .imageGallery label:nth-of-type(5) img,
input:nth-of-type(6):checked ~ .imageGallery label:nth-of-type(6) img {
box-shadow: 0 0 0 3px #000;
opacity: 0.8;
}
> .imageGallery {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 0.25em;
@media print, screen and (min-width: 768px) {
padding-left:80%;
}
label {
width: calc(100% / 6);
padding: 0.5em;
display: block;
cursor: pointer;
@media print, screen and (min-width: 768px) {
width: calc(100% / 2);
}
img {
width: 100%;
transition: opacity 0.1s ease-in-out;
&:hover{
opacity: 0.8;
}
}
}
}
}
.imageGalleryBox--type02 {
// 変数
$imageGalleryBoxType02Height: 20em; // メイン画像の高さ
$imageGalleryBoxType02Count: 6; // ギャラリーのスライド数
display: block;
position: relative;
padding-top: $imageGalleryBoxType02Height;
min-height: $imageGalleryBoxType02Height;
@media print, screen and (min-width: 768px) {
padding-top:0;
}
input[type="radio"] {
position: absolute;
opacity: 0;
visibility: hidden;
&:checked + figure {
opacity: 1;
z-index: 1;
}
+ figure {
width: 100%;
height: $imageGalleryBoxType02Height;
background: #EEE;
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0;
transition: opacity 0.3s ease-in-out;
overflow: hidden;
@media print, screen and (min-width: 768px) {
width: 78%;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
a {
display: block;
width: 100%;
height: 100%;
}
}
}
//メイン画像が表示すると対応するサムネイル画像が変化
@for $i from 1 through $imageGalleryBoxType02Count {
input:nth-of-type(#{$i}):checked ~ .imageGallery
label:nth-of-type(#{$i}) img {
box-shadow: 0 0 0 3px #000;
opacity: 0.8;
}
}
> .imageGallery {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 0.25em;
@media print, screen and (min-width: 768px) {
padding-left:80%;
}
label {
width: calc(100% / #{$imageGalleryBoxType02Count});
padding: 0.5em;
display: block;
cursor: pointer;
@media print, screen and (min-width: 768px) {
width: calc(100% / 2);
}
img {
width: 100%;
transition: opacity 0.1s ease-in-out;
&:hover {
opacity: 0.8;
}
}
}
}
}
ギャラリー内の画像を自動で切り替えるJavascript
ギャラリー内のinputを取得して、setIntervalで切り替えています。
ギャラリーを囲う要素に「--autoImageGallery」というクラスをつけると動作します。
ホバーすると、一時停止します。
function startAutoImageGallery(gallery) {
// ラジオボタンの要素と数を取得
const radios = gallery.querySelectorAll('input[type="radio"]');
const length = radios.length;
if (!length) return;
let intervalId = null;
function nextSlide() {
const currentIndex = [...radios].findIndex(radio => radio.checked);
const nextIndex = (currentIndex + 1) % length;
radios[nextIndex].checked = true;
}
function start() {
if (!intervalId) {
//5000ミリ秒間隔で切り替える
intervalId = setInterval(nextSlide, 5000);
}
}
function stop() {
clearInterval(intervalId);
intervalId = null;
}
// 初回スタート
start();
// ホバーで停止
gallery.addEventListener('mouseenter', stop);
gallery.addEventListener('mouseleave', start);
}
window.addEventListener('load', function () {
// 自動切り替えをするギャラリー要素を取得
const galleries = document.querySelectorAll('.--autoImageGallery');
galleries.forEach(gallery => {
startAutoImageGallery(gallery);
});
});
