Lightbox는 특별히 설계된 창에 이미지 또는 기타 콘텐츠를 표시하는 데 사용되는 jQuery 플러그인으로, 일반적으로 페이지의 기본 콘텐츠 위에 반투명 음영 배경으로 표시됩니다.
페이지에 플러그인을 설치하고 구성하기 전에 몇 가지 예를 살펴보겠습니다.
라이트박스 시작하기
최신 플러그인을 다운로드하십시오(Bower를 통해서도 사용 가능: bower install lightbox2 --save). 그런 다음 zip 파일의 압축을 풀고 폴더에 있는 제거된 작업 예제를 살펴봅니다. 예.
페이지에 Lightbox를 설치할 준비가 되셨습니까? CSS와 Javascript를 연결하여 시작합니다. 폴더에서 이 두 파일을 모두 가져올 수 있습니다. 거리... 웹 페이지의 head 태그 사이에 다음 코드를 붙여넣습니다.
닫는 본문 태그 앞에 다음 플러그인 코드를 삽입합니다.
Lightbox에 필요한 jQuery도 로드되었는지 확인합니다. 페이지에서 이미 JQuery(JQuery 1.7 이상 필요)를 사용하고 있다면 로드하기 전에 lightbox.js... jQuery가 연결되어 있지 않다면 이미 이 라이브러리가 있는 dist / js / lightbox-plus-jquery.js를 사용하거나 사무실에서 최신 버전을 다운로드하세요. 대지. 에 쓰여진 4개의 이미지를 확인하십시오. lightbox.css지정된 위치의 위치. 폴더에서 이미지를 가져올 수 있습니다. / dist / 이미지.
이제 HTML 코드로 넘어갑시다. 이미지를 포함하고 플러그인을 적용하려는 링크에 data-lightbox 속성을 추가합니다. 품질 속성 값으로 각 이미지에 고유한 이름을 사용합니다. 예를 들어:
이미지 # 1
제목을 표시하려면 data-title 속성을 추가하십시오. 세트로 결합하려는 관련 이미지 그룹이 있는 경우 필수 이미지에 대해 data-lightbox 속성에서 동일한 값을 사용하십시오. 예를 들어:
이미지 2 이미지 3 이미지 4
라이트박스 설정
기본 옵션을 변경하려면 option: 메서드를 호출합니다.
- alwaysShowNavOnTouchDevices 기본값: false
만약에 진실, 이미지 세트 위로 마우스를 가져갈 때 나타나는 왼쪽 및 오른쪽 탐색 화살표는 터치 지원 장치에서 항상 표시됩니다.
- fadeDuration 기본값: 500
컨테이너가 사라지는 데 걸리는 시간(밀리초)입니다.
- fitImagesInViewport 기본값: true
만약에 진실, 그런 다음 그림이 보기 영역에 맞도록 이미지 크기를 비례적으로 줄입니다. 이렇게 하면 사용자가 전체 이미지를 보기 위해 스크롤하지 않아도 됩니다.
- 최대 너비
주어진 경우 이미지 높이는 이 값(픽셀 단위)으로 제한됩니다. 가로 세로 비율은 존중되지 않습니다.
- 최대 높이
지정하면 이미지 너비가 이 값(픽셀 단위)으로 제한됩니다. 종횡비는 존중되지 않습니다.
- positionFromTop 기본값: 50
뷰포트 상단에서 라이트박스 컨테이너까지의 거리(픽셀)입니다.
- 크기 조정 기간 기본값: 700
다른 크기의 이미지를 변경할 때 라이트박스 컨테이너가 너비와 높이를 변경하는 시간(밀리초)입니다.
- showImageNumberLabel 기본값: true
만약에 거짓, 텍스트에는 현재 이미지 번호와 세트의 총 이미지 수가 포함됩니다(예: "이미지 2/4").
- wrapAround 기본값: false
만약에 진실, 마지막 이미지를 표시할 때 다음 이미지를 표시하기 위한 버튼이 사라지지 않습니다. 클릭하면 첫 번째 이미지가 표시됩니다.
스크립트는 팝업 창에서 이미지 보기를 구성합니다. 보기는 하나의 이미지로 구성하거나 갤러리별로 구성하여 팝업 창에서 사진을 스크롤할 수 있습니다.
가장 간단하고 빠른 설치 스크립트. 단 몇 분 만에 설치 및 구성됩니다.
라이트박스 설치 방법
아카이브를 다운로드하고 압축을 풀고 서버에 업로드합니다.그런 다음 스크립트를 사이트에 포함합니다. V HTML 코드코드를 작성하는 페이지
그리고 마지막 단계. 이미지를 표시합니다.
다음과 같이 이미지 출력을 수행합니다.
작은 이미지와 큰 이미지에 대한 링크를 표시하기 위한 표준 코드는 두 개의 매개변수만 링크에 추가됩니다.
다음은 이 코드의 예입니다. 사진을 클릭하면 큰 이미지가 나타납니다.
매개변수는 이 효과를 담당합니다. 데이터 라이트박스 = "이미지".
페이지에 많은 이미지가 있는 경우 팝업 창에서 스와이프하지 않고 이미지를 열거나 이미지를 결합하여 팝업 창에서 스크롤할 수 있습니다.
이미지를 결합하려면 각 이미지 그룹에 대해 하나의 이름을 사용해야 합니다.
보시다시피 팝업 창에서 모든 사진을 스크롤할 수 있습니다. 데이터 라이트박스모두 같은.
스크롤되지 않도록 사진을 분할하려면 유사한 코드를 사용하십시오.
이제 각 사진이 별도로 열립니다. 즉, 다음으로 스크롤할 방법이 없습니다.
업그레이드된 버전의 내용
이미지를 실제 크기로 확대하는 버튼입니다. 모든 예에서 볼 수 있습니다. 원래 버전에는 없습니다.스크립트 자체에 설정이 있으며 이 버튼을 끌 수 있습니다.
그리고 두 번째는 사람이 매우 적습니다. 필요한 추가, 중복 이미지 제외입니다.
기본적으로 비활성화되어 있으며 실제 크기 버튼이 활성화된 동일한 위치에서 스크립트에서 직접 활성화할 수 있습니다.
스크립트의 일반적인 사용 이 기능해를 끼칠 뿐이며 완전히 절망적인 상황에서만 사용할 수 있습니다.
세 개의 링크는 비어 있습니다. 즉, 큰 이미지로 연결되지만 태그 사이에는 아무 것도 없으며 하나의 링크는 이미지로 채워져 있습니다.
결과적으로 브라우저에는 하나의 그림만 표시되며, 이를 클릭하면 큰 그림이 열리고 채워지지 않은 링크의 모든 그림이 당겨지고 스크롤할 수 있습니다.
그리고 여기 링크에 두 개의 동일한 사진(빨간색으로 강조 표시됨)이 있으며 스크롤하면 두 개의 동일한 사진이 표시됩니다.
만약에 구체적인 예중복 삭제를 활성화하면 중복 이미지가 없습니다.
물론, 그런 상황이 있어서는 안 되는데 왜 똑같은 사진 두 장을 표시하고 삭제해야 합니까? 그런데 이상하게도 한 온라인 스토어에서 제품에 대해 중복 사진이 표시되어야 하고(스크립트를 통한 까다로운 사진 대체가 있음), 라이트박스를 통해 볼 때 중복 사진이 매우 잘못 보이는 상황에 직면했습니다. 여기에서 중복 제거가 유용했습니다.
댓글 (1)
2014년 11월 12일 빅터
대본이 아주 좋습니다. data-title을 사용하여 그림을 설명할 수도 있습니다. 그런데 문제가 있었는데 연결했을 때 옆으로 블록을 밀어내는 스크립트가 페이지에 있었습니다. 이 스크립트그것은 나에게서 사라집니다. 그리고 js 스크립트가 연결되면 사라집니다. 나는 버전 때문에 충돌이 없다고 생각했습니다. 그들 때문이 아닙니다.
2015년 5월 23일 빅터
그것은 나를 위해 작동하지 않습니다
href = "http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
이렇게 보입니다. 없음? Ver = 20150523142822
공장
2015년 5월 25일 카하
정말 감사합니다
2015년 6월 29일 안드레이
당신의 노고에 진심으로 감사드립니다! 모든 것이 거의 처음으로 작동했습니다)
2015년 8월 26일 알렉산더
다양한 아날로그를 시도했습니다. 충돌없이 이것은 즉시되었습니다. 원점으로 증가합니다. 크기 창자. 여전히 마우스를 사용하여 사진의 필드를 찍고 이동하는 경우 일반적으로 kapets
2015년 11월 1일 이고르
여보세요!
훌륭한 갤러리입니다. 매우 감사합니다.
그냥 그런 질문:
위의 예(3장의 사진)에서 이미지는 루프로 표시됩니다. 그리고 다운로드한 라이트박스-2.7.1 버전에서는 이 기능이 작동하지 않습니다. 마지막 이미지를 볼 때 버튼이 더 이상 나타나지 않습니다.
이유가 무엇인지 말씀해 주시겠습니까?
2015년 11월 14일 안톤
2015년 11월 15일 안톤
IOS 및 Android에서는 전체 페이지에서 화면 디밍이 발생하지 않습니다!!! 무엇이 문제가 될 수 있습니다. 일반 LightBox에서는 모든 것이 정상입니다!
2015년 11월 15일 안톤
IOS 및 Android에서는 전체 페이지에서 화면 디밍이 발생하지 않습니다!!! 무엇이 문제가 될 수 있습니다. 일반 LightBox에서는 모든 것이 정상입니다!
2016년 3월 30일 안톤
여보세요!
사진을 더 높은 해상도로 열 수 있습니까?
2016년 11월 18일 유라
정말 감사합니다! 모든 것이 완벽하게 작동합니다!
2017년 5월 4일 이고르
대본 정말 감사합니다! 오랫동안 나는 유사하고 설치하기 쉬운 것을 찾고 있었습니다.
어떤 이유로 든 사진 아래에 이해할 수없는 비문이 나타납니다.
인코딩을 수정해야 하는 곳이 있습니까?
2017년 9월 12일 바르숙
전에 어디 있었어! 중복 제거를 수정하는 데 하루 종일 보냈습니다))
난 그냥 홈페이지기본 이미지의 썸네일과 그 하단에는 추가 이미지의 썸네일이 훨씬 적기 때문에 갤러리에 중복이 있습니다.
Lightbox는 상단에 큰 이미지를 표시하는 데 사용되는 작은 JavaScript 라이브러리입니다. 현재 페이지... 설치가 쉽고 모든 곳에서 작동합니다. 최신 브라우저.
스크립트를 사용하면 팝업 창 내에서 전환하여 이미지를 단일로 표시할 수 있습니다.
사용 지침.
파트 I: 라이브러리 연결.
1. 여기에서 스크립트가 포함된 아카이브를 다운로드하고 압축을 풉니다.
2. JS 폴더에서 파일을 찾습니다. jquery-1.10.2.min.js그리고 라이트박스-2.6.min.js웹사이트의 스크립트가 있는 폴더에 복사합니다.
3. 태그 사이에 작성하여 이 스크립트를 페이지에 연결합니다.
다음 줄:
|
4. css 폴더에서 lightbox.css 파일을 찾아 스타일 파일 폴더에 복사합니다.
5. 태그 사이에 작성하여 이 파일을 페이지에 연결합니다.
다음 줄:6. img 폴더에서 다음 파일을 서버의 웹사이트 디자인 이미지가 있는 폴더로 복사합니다. 다음.png... 이 파일은 스타일시트에서 사용됩니다. lightbox.css... 기본적으로 스타일 파일은 css 폴더와 부모가 동일한 img 폴더에 있는 이미지를 참조합니다. 이미지 폴더와 스타일 폴더가 완전히 다른 폴더에 있는 경우 lightbox.css 파일의 이미지 경로를 적절한 경로로 변경해야 합니다.
PART II: 페이지에 그림 삽입하기.
이 스크립트는 링크를 클릭할 때 트리거됩니다. 링크는 텍스트 또는 그림일 수 있습니다. 스크립트에 어떤 링크가 처리되어야 하는지 알려주려면 링크에 속성을 추가해야 합니다. 데이터 라이트박스그리고 그것에 어떤 가치를 부여하십시오.
싱글 사진.
링크 텍스트 1 링크 텍스트 2 링크 텍스트 3
* 제목 속성은 임의로 채울 수 있습니다. 가득 찬 경우 해당 내용이 팝업 이미지 아래에 표시됩니다.
사진의 그룹입니다.
이미지 그룹이 있고 링크 중 하나를 클릭하면 팝업 창을 닫지 않고도 팝업 창에서 이 그룹의 모든 이미지를 스크롤할 수 있기를 원한다고 가정해 보겠습니다.
링크 텍스트 1 링크 텍스트 2 링크 텍스트 3
* 이전에는 LiteBox 스크립트에 rel = "lightbox" 속성을 사용했습니다. 지금 사용할 수 있으며 작동하지만 더 많은 가능성을 제공하므로 새 속성을 사용하는 것이 좋습니다.
모든 것이 완료된 것처럼 보이지만 모든 것이 작동해야 하지만:
이미지에서 사진 그룹을 구성하면 팝업 창에서 볼 때 사진 아래에 표시됩니다 "이미지 1/8"? 하지만 나는 이런 것을 보고 싶다. "이미지 1/8".
이렇게 하려면 13행의 lightbox-2.6.min.js 파일에서 다음을 대체해야 합니다.
반환 "이미지" + b + "of" + c
반환 "이미지" + b + "of" + c |
반환 "이미지" + b + "에서" + c
반환 "이미지" + b + "에서" + c |
마지막으로 이 스크립트를 사용했을 때 캐러셀 스크립트와 함께 사용해야 했기 때문에 하나의 결함을 발견했습니다.
다음은 결함에 대한 설명과 해결 방법입니다.
페이지에 2개의 서로 다른 이미지 그룹이 있고, 예를 들어 첫 번째 그룹에는 그림에 캡션이 있고(제목 속성이 채워짐) 두 번째 그룹에는 제목 속성에 빈 값이 있거나 전혀 지정되지 않은 경우 설명 없이 사진을 볼 때(설명이 있는 사진을 하나 이상 본 경우) 마지막으로 본 사진에 대한 설명이 계속 표시됩니다. 즉, 스크립트는 팝업 창의 제목 지우기를 거부하고 새 제목이 있는 경우 이를 대체합니다. 그것을 고치는 방법?
Title 속성을 지우지 않는 오류를 수정하려면 219행에서 lightbox-2.6.min.js 파일의 텍스트를 교체합니다.
if (typeof this.album.title! == "undefined" amp; amp; amp; amp; amp; amp; this.album.title! == "") (this.$ lightbox.find(".lb-caption) ") .html(this.album.title) .fadeIn("빠른 "))
if (typeof this. album [this. currentImageIndex]. title! == "undefined" & amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; & amp; amp; amp; & amp; amp; amp ; amp; amp; amp; amp; amp; amp; amp; this.앨범 [this.currentImageIndex].title! == "") (this.$ lightbox. find(".lb-caption").html(이 . 앨범 [this.currentImageIndex].제목).페이드인("빠른")) |
가장 널리 사용되는 라이브러리는 Lightbox Javascript로, 데스크톱에서는 오랫동안 사용했지만 데스크톱에서는 사용하지 않았습니다. 모바일 플랫폼오.
다음은 모바일 플랫폼을 지원하는 14개의 라이트박스 플러그인입니다.
포토스와이프
PhotoSwipe - 가볍고, 터치가 가능하며, 가장 중요하게는 필요하지 않은 불필요한 부분을 제거할 수 있는 모듈식 플러그인입니다. 그것은 잘 작동합니다 모바일 브라우저... 손가락을 스와이프하여 이미지를 변경할 수 있습니다. 표준 응용 프로그램, 부드러운 전환.
- 필요한 라이브러리:아니요.
- 브라우저 지원: IE8 +, Chrome, Firefox, Safari, Opera 및 기타 모바일 브라우저.
- 특허: MIT 라이선스
멋진 팝업
Magnific Popup은 PhotoSwipe, Dmitry Semenov와 같은 작성자가 개발한 또 다른 라이트박스 플러그인입니다. 플러그인은 jQuery/Zepto 플러그인으로 제공되며 비디오, 지도 및 Ajax 지원과 같이 PhotoSwipe에 없는 지원도 포함합니다. 이것은 더 많은 옵션을 원하는 사람들에게 훌륭한 대안입니다.
- 필요한 라이브러리: JQuery 1.9.1 이상 또는 Zepto.js
- 브라우저 지원: IE7(부분적으로),.
- 특허: MIT 라이선스
스와이프박스
모바일 플랫폼용 터치 제스처를 지원하는 Swipebox jQuery 플러그인. 이미지 외에도 Youtube 및 Vimeo 동영상도 지원합니다. Swipebox는 설치가 쉽고 구성을 조정할 수 있는 몇 가지 옵션이 있습니다. Swipebox는 JavaScript를 모르는 사람들에게 너무 어수선한 라이트박스 플러그인이라고 생각합니다.
부트스트랩용 라이트박스
처음에는 Lightbox 플러그인이 Bootstrap에 없습니다. Lightbox for Bootstrap은 이 문제를 해결합니다. Bootstrap을 사용하는 경우 이 라이브러리를 사용하는 것이 좋습니다. 플러그인은 Bootstrap과 잘 통합됩니다.
- 필수 라이브러리: JQuery 및 부트스트랩 모듈
- 브라우저 지원: IE8+, 크롬, 파이어폭스, 사파리, 오페라
- 특허: GNU 라이선스
니보 라이트박스
Nivo Lightbox는 사용자 정의가 가능한 라이트박스 플러그인입니다. 다양한 옵션을 통해 변경할 수 있습니다. 모습... 예: 테마, 모양 애니메이션 및 탐색 유형.
- 필수 라이브러리: 제이쿼리
- 브라우저 지원:
- 특허: MIT 라이선스
이미지라이트박스
ImageLightbox는 종소리와 휘파람이 없는 간단한 라이트박스 플러그인입니다. 이미지에만 사용되므로 이름이 지정됩니다. 비디오나 다른 유형은 모두 지원되지 않습니다. 또한 추가 HTML 마크업이 필요하지 않습니다. 꼬리표 충분하다. 이 플러그인은 사용하기 쉽습니다.
- 필수 라이브러리: 제이쿼리
- 브라우저 지원: IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 특허:지정되지 않음
미니 라이트박스
추가 기능이 없는 또 다른 라이트박스 플러그인. 라이브러리의 무게는 2킬로바이트에 불과하며 이미지에서만 작동합니다. 다음을 위해 개발하는 경우 완벽한 플러그인입니다. 최신 버전브라우저 및 비디오 또는 기타 형식을 지원할 필요가 없습니다.
- 필수 라이브러리: 아니요
- 브라우저 지원: 인터넷 익스플로러 10+, 크롬, 파이어폭스, 사파리, 오페라
- 특허: MIT 라이선스
라이트케이스
Lightcase는 훌륭한 라이트박스 플러그인입니다. 페이드, 탄성, 확대/축소 및 스크롤과 같은 여러 종류의 애니메이션을 지원합니다. 이 외에도 Youtube Embed, HTML 비디오, SWF 및 입력 형식을 포함한 다양한 미디어를 지원합니다.
- 필요한 라이브러리:제이쿼리
- 브라우저 지원: IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 특허: GPL 라이선스
깃털처럼 가벼운
Featherlight는 정통한 개발자를 위한 기본 6KB 플러그인이며 필수 요소만 포함합니다. 예를 들어 갤러리의 이미지 그룹에 대해 라이트박스 효과가 필요한 경우 갤러리 확장을 활성화할 수 있습니다. 프로젝트에서 사용할 플러그인 확장을 개발할 수도 있습니다.
- 필수 라이브러리: 제이쿼리
- 브라우저 지원: IE8+, 크롬, 파이어폭스, 사파리, 오페라
- 특허: MIT 라이선스
라이트레이어
LightLayer는 사용하기 쉬운 라이트박스 플러그인입니다. 플러그인은 많은 옵션을 지원합니다. 맞춤 자바스크립트메소드 및 사용자 정의 이벤트. 플러그인은 이미지, 비디오, 지도와 함께 작동합니다.
- 필요한 라이브러리:제이쿼리
- 브라우저 지원: IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 특허: MIT 라이선스
라이트갤러리
LightGallery, 다른 라이트박스 플러그인 큰 금액기능. 여기에는 라이트박스 효과의 다양한 세부사항을 사용자 정의하기 위한 20개 이상의 옵션이 포함되어 있습니다.
- 필수 라이브러리: 제이쿼리
- 브라우저 지원: IE7+, 크롬, 파이어폭스, 사파리, 오페라, IOS, 안드로이드, 윈도우 폰
- 특허: MIT 라이선스
플루이드박스
Fluidbox 라이트박스 플러그인은 이미지와 함께 작동합니다. 플로팅 이미지, 절대 위치의 이미지, 테두리 및 패딩이 있는 이미지, 갤러리를 비롯한 다양한 디스플레이에 대한 지원을 포함합니다. 워드프레스 플러그인도 있습니다.
- 필요한 라이브러리:제이쿼리
- 브라우저 지원: IE9+, 크롬, 파이어폭스, 사파리, 오페라
- 특허: MIT 라이선스
스트립JS
StripJS는 독특한 라이트박스 플러그인입니다. 이미지를 오버레이하는 대신 라이트박스 모듈이 이미지와 함께 좌우로 미끄러져 이미지가 모든 콘텐츠를 차단하지 않도록 합니다. StripJS는 이미지와 비디오를 모두 지원합니다.
- 필수 라이브러리: 제이쿼리
- 브라우저 지원: IE7 이상, 크롬, 파이어폭스, 사파리, 오페라, IOS 5 이상, 안드로이드 3 이상
- 특허:크리에이티브 커먼즈 BY-NC-ND 3.0 라이선스
점점 더 많은 최신 웹 기술을 사용할 수 있게 되어 정말 기쁩니다. 덕분에 작업이 훨씬 쉬워졌습니다. 모달 창은 사용자 친화적인 디자인과 인터페이스를 만드는 데 중점을 둔 모든 유형의 HTML 콘텐츠를 표시하기 위한 기능적 요소입니다.
이 정리에서는 개발자와 디자이너가 더 우수하고 전문적인 웹 사이트를 만드는 데 도움이 되도록 jQuery 라이트박스 라이브러리 및 스크립트 목록을 작성했습니다.
아래 스크립트를 사이트에 쉽게 추가할 수 있습니다. 따라서 더 이상 고민하지 않고 바로 들어가서 무기고에 추가할 수 있는 이러한 슈퍼 jQuery 라이트박스 라이브러리를 살펴보겠습니다.
1. 포토스와이프
PhotoSwipe는 HTML 사진 갤러리입니다. CSS 기반특히 모바일 장치를 대상으로 하는 JavaScript. 개발할 때 저자는 모바일용 이미지 보기 서비스를 모델로 삼았습니다. iOS 기기그리고 구글. PhotoSwipe는 모바일 사이트에서 이미지 작업을 더 쉽게 해주는 친숙하고 직관적인 인터페이스를 가지고 있습니다.
다음 또는 이전 이미지로 이동, 확대, 드래그, 축소 또는 닫기 등 모든 주요 기능이 지원됩니다.
2. 스와이프박스
Swipebox는 데스크탑, 스마트폰 및 태블릿용 jQuery 플러그인입니다. 그것은 지원 터치 컨트롤모바일용, 데스크탑용 키보드 탐색, jQuery 컨트롤로 CSS 폴백 전환, 설정이 매우 쉽습니다.
플러그인은 Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4+, Android, Windows Phone에서 테스트되었습니다. MIT 라이선스에 따라 출시되었습니다.
3.아이라이트박스
iLightBox를 사용하면 jQuery를 사용하여 매우 아름다운 반응형 모달을 쉽게 만들 수 있습니다. 다양한 미디어 콘텐츠에 대한 지원과 멋진 스킨 및 사용자 친화적인 API를 결합한 iLightBox는 가능한 한 완벽한 라이트박스를 만들기 위해 노력합니다. iLightBox는 다음에서 볼 수 있는 기능을 제공합니다. 전체 화면으로보기, Retina 호환 스킨, 터치 이벤트 제어, 강력한 JavaScript API인 HTML5 비디오용 YouTube 및 Vimeo 통합 기능. 플러그인에는 무료 지원및 버전 업데이트.
4. 이미지 라이트박스
Image Lightbox는 IOS, Android 및 Windows Phone을 위한 최소한의 확장 가능하고 사용자 정의 가능한 플러그인입니다. CSS 변환 및 전환을 사용하여 키보드로 다음 이미지를 간단히 로드할 수 있습니다.
5. 멋진 팝업
Magnific Popup은 제공하는 데 중점을 둔 무료 반응형 jQuery 플러그인입니다. 최고의 상호 작용사용자와 장치 사이. 대부분의 라이트박스 플러그인의 경우 JS를 사용하여 창 크기를 조정해야 합니다. Magnific Popup에서는 EM과 같은 상대 단위를 사용하거나 CSS 미디어 쿼리로 라이트박스의 크기를 조정할 수 있습니다.
6. 니보 라이트박스
Nivo Lightbox는 유연한 라이트박스 플러그인입니다. 라이트박스의 모양을 쉽게 변경할 수 있는 많은 옵션이 있습니다. 예를 들어 테마, 전환 효과 및 탐색 방법을 변경합니다.
7. 라이트케이스
Lightcase는 유연하고 반응이 빠르며 확장 가능한 라이트박스 플러그인입니다. jQuery를 사용하여... Internet Explorer 7+, Firefox, Opera, Webkit 등과 같은 모든 인기 있는 브라우저에서 훌륭하게 작동합니다. 플러그인은 사진, 비디오, HTML5 비디오, Iframe, SWF 및 AJAX 호출을 지원합니다.
8. Lightlayer.js
LightLayer는 반응형 라이트박스를 표시하기 위한 스크립트이며 모든 화면의 다른 구성 요소와 잘 작동합니다. 이 스크립트는 정말 사용하기 쉽습니다. LightLayer는 배경 색상 및 불투명도, 라이트박스 위치, 열기/닫기 전환 및 기타 많은 사용자 정의 기능과 같은 많은 매개변수에 대한 제어를 제공합니다.
9. 스트립.js
스트립은 페이지의 일부로만 확장되는 라이트박스입니다. 이렇게 하면 방해가 덜하고 페이지의 다른 요소와 상호 작용할 수 있습니다. 대형 스크린; ~에 모바일 기기라이트 박스는 고전적인 모양을 가지고 있습니다. Strip은 jQuery를 사용하며 모든 주요 브라우저에서 지원됩니다.
10. 플루이드박스
Fluidbox는 다음과 같은 이미지에 완벽한 눈에 거슬리지 않고 반응이 빠른 라이트박스를 제공하도록 설계된 jQuery 플러그인입니다. 높은 해상도... 모바일 장치에서 잘 작동하며 이미지를 아름답게 표시하기 위해 고해상도 화면에도 적용할 수 있습니다.
11. 페더라이트
Featherlight는 400라인의 JavaScript, 100라인의 CSS 및 6Kb 미만의 크기를 가진 매우 가벼운 플러그인입니다. 스마트한 반응형 라이트박스는 기본적으로 이미지, AJAX 및 iframe을 지원합니다. 필요에 맞게 조정할 수도 있습니다. Featherlight는 IE8 +, 모든 최신 브라우저 및 모바일 플랫폼에서 작동합니다.
12. 얄브
Yalb는 Yet Another Lightbox의 약자이지만 그렇지 않습니다. Yalb는 상태( 열린, 닫힌).
