HTML, CSS 및 Vanilla Javascript를 사용한 반응형 이미지 라이트박스 디자인
10759 단어 htmljavascriptincodercss
많은 웹사이트에서 이미지 라이트박스를 본 적이 있을 것입니다. 라이트박스는 웹사이트 화면의 80%를 가리고 페이지의 나머지 부분을 어둡게 하여 이미지와 동영상을 보여줍니다. 라이트박스에는 슬라이드 컨트롤이 있어 한 이미지에서 다른 이미지로 쉽게 전환할 수 있습니다. 라이트박스용 자바스크립트 라이브러리가 많이 있지만 이 블로그에서는 자바스크립트나 jquery 라이브러리를 사용하지 않고 라이트박스를 만드는 방법을 보여드리겠습니다.
당신은 다음을 좋아할 수 있습니다 :-
이 프로젝트 [반응형 이미지 라이트박스]에는 웹 페이지에 6개의 이미지가 있습니다. 이미지 위로 마우스를 가져가면 크기가 커지며 축소 효과를 의미하고 특정 이미지 라이트박스를 클릭하면 부드러운 전환과 함께 나타납니다. 라이트박스에는 위의 이미지에서 볼 수 있듯이 왼쪽 상단 모서리에 전체 이미지 번호와 현재 이미지 번호가 있고 오른쪽 상단 모서리에 십자가 아이콘이 있는 닫기 버튼이 있습니다. 이미지를 변경하는 프레셔스 버튼과 다음 버튼도 있습니다. 닫기 버튼을 클릭하면 라이트박스가 사라집니다.
이 이미지 갤러리와 라이트박스는 모든 장치에서 완전히 반응합니다. PC에서는 한 줄에 3개의 이미지가 있지만 모바일 장치에서는 한 줄에 하나의 이미지만 있습니다. 내 말을 이해하기 어렵다면 소스 코드를 확인하고 미리보기도 할 수 있습니다.
미리보기를 사용할 수 있습니다here.
HTML 코드
<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="container">
<div class="gallery">
<div class="image">
<img src="https://drive.google.com/uc?id=1W_YHw1ky5GScu_oFR3Fa2xsA77Mi037B&export=view" alt="watch">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=1EkzGCReXAqdi0dcat2WWdioU0MM09STD&export=view" alt="laptop">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=1hTezbGNnjK54_jprSLrbNxF6gQIHFqqc&export=view" alt="laptop">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=1mSCh-fkpC31MTIyu63ylxZJ-12Wib2e5&export=view" alt="laptop">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=12Fs0GeOk0x8yr38Nepackc4dju3fKuLa&export=view" alt="laptop">
</div>
<div class="image">
<img src="https://drive.google.com/uc?id=1sBpjjw_FjIPu0uwAX0IEI9RHUxF3NPsf&export=view" alt="laptop">
</div>
</div>
</div>
<div class="lightBoxContainer">
<div class="wrapper">
<div class="header">
<div class="count">
<p><span class="current"></span> <span class="total"></span></p>
</div>
<button class="closeBtn">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="body">
<i class="fa-solid fa-angle-left pre"></i>
<img src="">
<i class="fa-solid fa-angle-right next"></i>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 코드
/* --------------------- Created By InCoder --------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background-color: #ff5757;
font-family: 'Poppins', sans-serif;
}
.container{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.gallery{
display: flex;
flex-wrap: wrap;
max-height: 100%;
margin-top: 2rem;
align-items: center;
justify-content: center;
}
.image {
margin: 1rem;
cursor: pointer;
max-width: 18rem;
overflow: hidden;
max-height: 11rem;
border-radius: .5rem;
}
.image img{
max-width: 18rem;
transition: transform .3s ease-in-out;
}
.image:hover img{
transform: scale(1.1);
}
.lightBoxContainer{
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
display: flex;
position: fixed;
align-items: center;
pointer-events: none;
justify-content: center;
backdrop-filter: blur(2px);
background: rgb(0 0 0 / 60%);
transition: opacity 0.3s ease-in-out;
}
.lightBoxContainer.show{
opacity: 1;
pointer-events: auto;
}
.lightBoxContainer .wrapper{
display: flex;
max-width: 40rem;
align-items: center;
flex-direction: column;
justify-content: center;
}
.lightBoxContainer .body{
display: flex;
margin-bottom: 1rem;
align-items: center;
flex-direction: column;
justify-content: center;
}
.lightBoxContainer .header{
width: 100%;
display: flex;
padding: 0 2rem;
margin-top: 1rem;
align-items: center;
margin-bottom: 1rem;
justify-content: space-between;
}
.lightBoxContainer .header .count{
color: #fff;
}
.lightBoxContainer .header .closeBtn{
border: 0;
color: #fff;
width: 2.6rem;
height: 2.6rem;
cursor: pointer;
font-size: 1.5rem;
border-radius: 50%;
background: transparent;
transition: background .3s ease-in-out;
}
.lightBoxContainer .header .closeBtn:hover{
background: rgb(255 255 255 / 20%);
}
.lightBoxContainer .body img{
max-width: 80%;
margin: 0 1rem;
}
.lightBoxContainer .body{
display: flex;
flex-direction: row;
}
.lightBoxContainer .body :is(.fa-angle-left, .fa-angle-right){
border: 0;
color: #fff;
width: 2.6rem;
display: grid;
height: 2.6rem;
cursor: pointer;
font-size: 1.8rem;
border-radius: 50%;
place-items: center;
background: transparent;
transition: background .3s ease-in-out;
}
.lightBoxContainer .body :is(.fa-angle-left, .fa-angle-right):hover{
background: rgb(255 255 255 / 20%);
}
자바스크립트 코드
// --------------------- Created By InCoder ---------------------
let images = document.querySelectorAll('.image')
lightBoxContainer = document.querySelector('.lightBoxContainer')
containerBody = document.querySelector('.lightBoxContainer .body')
nextBtn = document.querySelector('.next')
preBtn = document.querySelector('.pre')
image = containerBody.querySelector('img')
wrapper = document.querySelector('.wrapper')
closeBtn = document.querySelector('.closeBtn')
totalImg = document.querySelector('.total')
currentImg = document.querySelector('.current')
for (let i = 0; i < images.length; i++) {
let newindex = i
images[i].addEventListener('click', () => {
function openPreview() {
let imageURL = images[newindex].querySelector('img').src
image.src = imageURL
currentImg.innerText = `Image ${newindex + 1} of ${images.length}`
if(newindex == 0){
preBtn.style.display = 'none';
}else{
preBtn.style.display = 'grid';
}
if(newindex >= images.length - 1){
nextBtn.style.display = 'none';
}else{
nextBtn.style.display = 'grid';
}
lightBoxContainer.classList.add('show')
}
preBtn.addEventListener('click', () => {
newindex--
if(newindex == 0){
openPreview()
preBtn.style.display = 'none';
}else{
openPreview()
}
})
nextBtn.addEventListener('click', () => {
newindex++
if(newindex >= images.length - 1){
openPreview()
nextBtn.style.display = 'none';
}else{
openPreview()
}
})
openPreview()
closeBtn.addEventListener('click', () => {
preBtn.style.display = 'grid';
nextBtn.style.display = 'grid';
lightBoxContainer.classList.remove('show')
})
lightBoxContainer.addEventListener('click', (e) => {
if(e.target !== e.currentTarget) return
preBtn.style.display = 'grid';
nextBtn.style.display = 'grid';
lightBoxContainer.classList.remove('show')
})
})
}
Reference
이 문제에 관하여(HTML, CSS 및 Vanilla Javascript를 사용한 반응형 이미지 라이트박스 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/incoderweb/responsive-image-lightbox-design-using-html-css-and-vanilla-javascript-1mhn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
