2021.04.16 갤러리 페이지 수정

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지

2021.04.12 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.12 메인 페이지 만들기

2021.04.13 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.13 오시는 길 페이지 만들기

2021.04.14 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.14 서비스 페이지 만들기

2021.04.15 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.15 navigation bar 수정 및 갤러리 페이지 만들기

2021.04.15 navigation bar 수정 및 갤러리 페이지 만들기

 

 

 

어제 갤러리 페이지에 Masonry 라이브러리를 적용했습니다.

그런데 갤러리 전체 크기가 너무 꽉 차 있고, 사진들이 너무 따닥따닥 붙어있어서 조금 수정하기로 했습니다.

갤러리 전체를 bootstrap의 container에 넣어서 사이즈를 맞추고,

사진들 사이사이에도 여백을 넣었습니다.

01

웹 브라우저에서의 화면

 

그리고 모바일 화면에서도 제대로 나오는지 확인했습니다.

모바일 환경에서 확인

 

 

 

 

 

 

 

갤러리 페이지에 사진들만 올리니까 너무 단조로워 보여서

사진을 클릭하면 확대해서 보일 수 있게 하는 Lightbox 플러그인을 적용하기로 했습니다.

 

Lightbox는 선배 개발자분들이 이쁘게 만들어 놓은 게 너무 많아서

무료로, 반응형, 괜찮은 Lightbox를 골라서 적용했습니다.

이름은 Nivo-Lightbox라고 합니다.

Responsive & Flexible jQuery Lightbox Plugin - Nivo Lightbox

 

갤러리 페이지에 적용한 결과입니다.

012

갤러리 페이지의 사진들에 Nivo-Lightbox를 적용한 결과

 

Nivo-Lightbox가 반응형 웹에 맞게 만들어진 것이라 모바일 화면에서도 잘 나옵니다.

012

Nivo-Lightbox를 적용하고 모바일 화면에서의 결과

 

 

 

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

 

 

 

다음 글:

2021.04.17 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.17 사진의 모델 생성, 갤러리 페이지 코드 변경

2021.04.17 사진의 모델 생성, 갤러리 페이지 코드 변경