라이트박스는 웹에서 이미지 를 오버레이하는 인기 있는 방법 중 하나 입니다. 이미지를 클릭하면 라이트박스가 어떤 형태의 애니메이션과 함께 팝업되고 배경을 어둡게 하여 초점이 이미지 자체에 있도록 합니다. 이미지의 크기도 커집니다. 우리가 수년 동안 알고 있는 가장 인기 있는 Lightbox JavaScript 라이브러리를 사용하면 데스크톱에서는 이 작업을 잘 수행할 수 있지만 모바일 플랫폼에서는 그렇지 않습니다.
이것을 무시하고 반응성에 대한 필요성을 무시하는 것은 오늘날 좋은 생각이 아닙니다. 이것이 15개의 반응형 Lightbox 라이브러리 컬렉션을 체크아웃해야 하는 이유입니다.
PhotoSwipe 는 지금까지 내가 가장 좋아하는 ligthbox 플러그인입니다. 가볍고 터치가 가능하며 가장 중요한 모듈식이어서 필요하지 않은 몇 가지 부품을 버릴 수 있습니다. 모바일 브라우저에서 잘 실행됩니다. 네이티브 앱에서와 같이 손가락으로 이미지를 스와이프하면 전환이 정말 매끄럽게 진행됩니다.
- 종속성 : 없음
- 브라우저 지원 : IE8+, Chrome, Firefox, Safari, Opera 및 몇 가지 모바일 브라우저.
- 라이선스 : MIT 라이선스
MagnificPopup 은 PhotoSwipe를 제공한 Dmitry Semenov와 같은 사람이 개발한 또 다른 라이트박스 플러그인입니다. jQuery/Zepto 플러그인 형태로 제공되며 비디오, 지도 및 Ajax 콘텐츠 지원과 같이 PhotoSwipe에서 누락된 기능도 제공합니다. 이것은 더 많은 기능을 원하는 사람들에게 훌륭한 대안입니다.
- 종속성 : jQuery 1.9.1+ 또는 Zepto.js
- 브라우저 지원 : IE7(일부), IE8+, Chrome, Firefox, Safari 및 Opera.
- 라이선스 : MIT 라이선스
Swipebox 는 모바일 플랫폼용 터치 제스처를 지원하는 jQuery 플러그인입니다. 또한 이미지 외에도 Youtube 및 Vimeo의 비디오를 지원합니다. Swipebox는 구현하기도 쉽고 동작을 사용자 정의할 수 있는 몇 가지 옵션이 있습니다. Swipebox는 JavaScript 멍청이를 위한 훌륭한 라이트박스 플러그인이라고 생각합니다.
- 종속성 : jQuery
- 브라우저 지원 : IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android 및 Windows Phone.
- 라이선스 : 정의되지 않음
iLighbox 는 동영상, Flash/SWF, Ajax 콘텐츠, iframe 및 지도를 비롯한 다양한 미디어 유형을 지원하는 jQuery 라이트박스 플러그인입니다. 또한 이 플러그인은 미디어 상단에 소셜 미디어 버튼을 추가하여 사용자가 Facebook, Twitter 또는 Reddit에 공유할 수 있도록 합니다. 또한 고급 섹션 을 확인하여 다양한 시나리오에서 iLightbox를 적용할 수 있는 방법을 확인하십시오.
- 종속성 : jQuery
- 브라우저 지원 : IE7+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : 정의되지 않음
Lightbox 는 Bootstrap에서 눈에 띄게 누락된 부분 중 하나입니다. 이 플러그인은 그것을 수정합니다. Bootstrap을 사용하는 경우 이 라이브러리를 사용하는 것이 좋습니다. 플러그인은 Bootstrap의 코드 기반과 잘 통합되어 있습니다.
- 종속성 : jQuery 및 부트스트랩 모달
- 브라우저 지원 : IE8+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : GNU 라이선스
Nivo Lightbox 는 유연한 라이트박스 플러그인입니다. 테마 변경, 전환 효과, 탐색 전환 등 원하는 대로 모양을 변경할 수 있는 몇 가지 옵션이 포함되어 있습니다.
- 종속성 : jQuery
- 브라우저 지원 : IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : MIT 라이선스
ImageLightbox 는 팽창이 없는 라이트박스 플러그인입니다. 이미지용으로 특별히 제작되었으므로 비디오나 기타 미디어 유형이 지원되지 않습니다. 또한 관련 없는 HTML 마크업이 필요하지 않습니다. <img>요소에 충분하다. 플러그인이 작동합니다.
- 종속성 : jQuery
- 브라우저 지원 : IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : 정의되지 않음
팽창이 없는 또 다른 라이트박스 플러그인. 라이브러리는 2kb에 불과하며 이미지에서만 작동합니다. 최신 브라우저용으로만 지정하고 비디오와 같은 다른 미디어 유형을 오버레이할 필요가 없는 경우 완벽한 플러그인입니다.
- 종속성 : 없음
- 브라우저 지원 : IE10+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : MIT 라이선스
Lightcase는 멋진 라이트박스 플러그인입니다. 페이드, 탄력적 확대/축소 및 스크롤과 같이 사용자 상호 작용을 생생하게 만드는 여러 애니메이션이 함께 제공됩니다. 또한 Youtube Embed, HTML 비디오, SWF 및 입력 형식을 포함한 다양한 유형의 미디어도 지원합니다. 플러그인은 또한 미디어에 연결할 수 없거나 오류를 찾을 수 없습니다.
- 종속성 : jQuery
- 브라우저 지원 : IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : GPL 라이선스
6kb Featherlight 는 정통한 개발자를 위한 베어 플러그인이며 필수 기능만 제공합니다. 예를 들어 갤러리에서 이미지 라이트박스를 그룹화해야 하는 경우 갤러리 확장을 포함할 수 있습니다 . 프로젝트 요구 사항에 맞게 이 플러그인에 대한 자체 확장을 개발할 수도 있습니다.
- 종속성 : jQuery
- 브라우저 지원 : IE8+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : MIT 라이선스
LightLayer는 사용하기 쉬운 라이트박스 플러그인입니다. 여기에는 몇 가지 옵션, 사용자 정의 JavaScript 메소드 및 사용자 정의 이벤트가 있습니다. 플러그인은 이미지, 비디오, 지도 및 외부 콘텐츠와 함께 작동합니다. 무엇을 더 물어볼 수 있습니다.
- 종속성 : jQuery
- 브라우저 지원 : IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : MIT 라이선스
LightGallery , 많은 기능이 추가된 또 다른 라이트박스 플러그인. 라이트박스의 가장 작은 세부 사항을 사용자 지정할 수 있는 20개 이상의 옵션이 제공됩니다.
- 종속성 : jQuery
- 브라우저 지원 : IE7+, Chrome, Firefox, Safari, Opera, iOS, Android 및 Windows Phone
- 라이선스 : MIT 라이선스
Fluidbox 는 Medium에서 영감을 받은 이미지 라이트박스 플러그인입니다. 플로팅 이미지, absolute위치가 있는 이미지, 테두리와 패딩이 있는 이미지, 갤러리 등 다양한 상황에서 이미지와 함께 작동합니다 . WordPress 플러그인이 필요한 경우 하나가 있습니다.
- 종속성 : jQuery
- 브라우저 지원 : IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 라이선스 : MIT 라이선스
StripJS 는 독특한 라이트박스 플러그인입니다. 플러그인은 이미지를 오버레이하는 대신 이미지를 측면에서 밀어 넣어 전체 콘텐츠를 차단하지 않습니다. StripJS는 이미지와 비디오를 모두 지원합니다.
- 종속성 : jQuery
- 브라우저 지원 : IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ 및 Android 3+
- 라이선스 : 크리에이티브 커먼즈 BY-NC-ND 3.0 라이선스
'Study > Dev／Library' 카테고리의 다른 글
| [Eclipse] 이클립스 최적화 하는 방법 (0) | 2022.07.18 |
|---|---|
| 오픈소스 라이브러리 (0) | 2022.02.10 |
| Linux Go Install / 리눅스 Go 설치 (0) | 2022.02.01 |
| 개발자를 위한 유용한 타이포그래피 라이브러리 및 프레임워크 (0) | 2021.08.02 |
| Netmap.Js | 빠른 브라우저 기반 네트워크 검색 모듈 (0) | 2021.08.02 |
|
|
|
|
|