html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/style.css">
<!-- font awesome -->
<link rel="stylesheet" href="css/all.css">
<title>Starter Template</title>
<style>
</style>
</head>
<body>
<!-- store -->
<section id="store" class="store py-5">
<!-- store items-->
<div class="row" class="store-items" id="store-items">
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="img/took1.jpg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-heart"></i>
</span>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="img/took2.jpg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-heart"></i>
</span>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="img/took3.jpg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-heart"></i>
</span>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
</section>
<!--end of store items -->
<!-- modal-container -->
<div class="container-fluid ">
<div class="row lightbox-container align-items-center">
<div class="col-10 col-md-10 mx-auto text-right lightbox-holder">
<span class="lightbox-close"><i class="fas fa-window-close"></i></span>
<div class="lightbox-item"></div>
<span class="lightbox-control btnLeft"><i class="fas fa-caret-left"></i></span>
<span class="lightbox-control btnRight"><i class="fas fa-caret-right"></i></span>
</div>
</div>
</div>
<!-- jquery -->
<script src="./js/jquery-3.3.1.min.js"></script>
<!-- bootstrap js -->
<script src="./js/bootstrap.bundle.min.js"></script>
<!-- script js -->
<script src="./js/app.js"></script>
</body>
</html>
css
@import url("https://fonts.googleapis.com/css?family=Kaushan+Script");
:root {
--mainPink: #ef7998;
--mainYellow: rgb(249, 228, 148);
--mainWhite: #fff;
--mainBlack: #000;
--yellowTrans: rgba(249, 228, 148, 0.5);
--mainGrey: rgb(238, 238, 238);
}
body {
font-family: "Kaushan Script", cursive;
background: var(--mainWhite);
color: var(--mainBlack);
}
/* store items */
.img-container {
position: relative;
overflow: hidden;
cursor: pointer;
}
.store-img {
transition: all 1s ease-in-out;
}
.img-container:hover .store-img {
transform: scale(1.2);
}
.store-item-icon {
position: absolute;
bottom: 0;
right: 0;
padding: 0.75rem;
background: var(--mainYellow);
border-top-left-radius: 1rem;
transition: all 1s ease-in-out;
transform: translate(100%, 100%);
}
.img-container:hover .store-item-icon {
transform: translate(0, 0);
}
.store-item-icon:hover {
color: var(--mainWhite);
}
.store-item-value {
color: --mainYellow;
}
/*end of store items */
.search-box {
background: var(--mainPink);
color: var(--mainBlack);
}
/* ligthbox */
.lightbox-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.6) !important;
display: none;
}
.show {
display: block;
}
.lightbox-holder {
position: relative;
}
.lightbox-item {
min-height: 80vh;
background: url("../img/cake-1.jpeg") center/cover fixed no-repeat;
border-radius: 0.3rem;
}
.lightbox-close {
color: var(--mainWhite);
font-size: 3rem;
transition: all 1s ease-in-out;
cursor: pointer;
}
.lightbox-close:hover {
color: var(--mainYellow);
}
.lightbox-control {
position: absolute;
font-size: 4rem;
color: var(--mainWhite);
transition: all 1s linear;
cursor: pointer;
}
.lightbox-control:hover {
color: var(--mainYellow);
}
.btnLeft {
top: 50%;
left: 0;
transform: translateX(-60%);
}
.btnRight {
top: 50%;
right: 0;
transform: translateX(60%);
}
js
(function(){
let storeItems = document.querySelectorAll('.store-item');
let lightBox = document.querySelector('.lightbox-container');
let lightBoxItem = document.querySelector('.lightbox-item');
let images = document.querySelectorAll('.store-img');
// 배열 초기 세팅
let imageList = [];
// 이미지 카운터 설정
let imageCounter = 0;
// forEach문을 사용하여 모든 이미지를 가져오고 배열에 항목으로 푸시한다.
images.forEach(function(image){
imageList.push(image.src);
})
storeItems.forEach(function(item) {
// 클릭 시 모달
// css display: none; 에서 display: block; 으로
item.addEventListener('click', function(e){
// 클릭한 이미지를 가져오기
let image = e.target.src;
lightBoxItem.style.backgroundImage = `url(${image})`;
lightBox.classList.add('show');
// 선택한 이미지의 배열 인덱스 번호를 가져오기
imageCounter = imageList.indexOf(image);
});
});
// 좌우 화살표
// 왼쪽 버튼
let btnLeft = document.querySelector('.btnLeft');
btnLeft.addEventListener('click', function(){
imageCounter--;
if (imageCounter < 0){
imageCounter = imageList.length -1;
}
lightBoxItem.style.backgroundImage = `url(${imageList[imageCounter]})`
});
// 오른쪽 버튼
let btnRight = document.querySelector('.btnRight');
btnRight.addEventListener('click', function(){
imageCounter++;
if (imageCounter >= imageList.length){
imageCounter = 0;
}
lightBoxItem.style.backgroundImage = `url(${imageList[imageCounter]})`;
});
// 닫기 버튼
let lightBoxClose = document.querySelector('.lightbox-close');
lightBoxClose.addEventListener('click', function(){
lightBox.classList.remove('show');
});
})();
위 코드는 아래 링크에 있는 자바스크립트 프로젝트를 활용 및 참고하여 작업하였습니다.
https://jsbeginners.com/javascript-projects-for-beginners/#below-list
728x90
'코딩도 합니다 > JS' 카테고리의 다른 글
| [자바스크립트 / js] alert 중복 실행 시 해결 방법 / ajax 중복 실행 시 해결 방법 (0) | 2021.07.28 |
|---|---|
| [자바스크립트 js / 프로젝트7 ] 리스트 만들기 / localStorage (0) | 2021.07.20 |
| [자바스크립트 에러 Js Error] Cannot read property 'slice' of null (0) | 2021.07.14 |
| [자바스크립트 js / 프로젝트 7] to do list 만들기 (0) | 2021.07.13 |
| [자바스크립트 js / 프로젝트 6] 계산기 만들기 / eval() (0) | 2021.07.13 |
