jQeury
featherlight.js 적용방법
밍블리-셔
2022. 8. 31. 08:01
공식 웹사이트
https://noelboss.github.io/featherlight/
Featherlight – The ultra slim jQuery lightbox.
Featherlight with custom styles It's easy to override the styling of Featherlight. All you need to do is specify an additional class in the data-featherlight-variant of the triggering element. This class will be added and you can then override everything.
noelboss.github.io
featherlight.js
> 결과물 목록에서 상세 결과물을 보여주기 위한 풀스크린 모달
> 디자인 상세 결과물 및 퍼블리싱 상세 결과물을 새 탭으로 띄우지 않고 세련되게 풀스크린 모달로 보여주는 필수 플러그인
활용용도
- 일반적인 모달
- 이미지 모달
- 풀스크린 모달
- iframe 모달
장점
- 스크립트 옵션 조절하지 않고 간단하게 a태그에 속성 추가
<a href="http://www.example.com" data-featherlight="iframe">Open example.com in an iframe</a>* a태그 안에 data-featherlight="iframe"만 추가하면 사용 가능
특징
- 기본 CSS가 별로이기 때문에 custom CSS로 디자인 조정해야 함
- 개인 포트폴리오 페이지에서 필수적으로 사용하면 좋음 (사용자가 해당 페이지를 떠나지 않게 도와줌)