반응 형 라이트 박스 갤러리. 웹 디자인 및 검색 엔진 최적화

Lightbox는 이미지 또는 기타 콘텐츠를 특별히 디자인 된 창에 표시하는 데 사용되는 jQuery 플러그인으로, 일반적으로 기본 페이지 콘텐츠 위에 반투명 음영 처리 된 배경에 표시됩니다.

페이지에 플러그인을 설치하고 구성하기 전에 몇 가지 예를 살펴 보겠습니다.

Lightbox 시작하기

최신 플러그인을 다운로드합니다 (Bower : bower install lightbox2 --save를 통해서도 사용 가능). 그런 다음 zip 파일의 압축을 풀고 폴더에있는 제거 된 작업 예제를 살펴보십시오. 예.

페이지에 Lightbox를 설치할 준비가 되셨습니까? CSS와 Javascript를 연결하여 시작하십시오. 폴더에서이 두 파일을 모두 가져올 수 있습니다. dist... 웹 페이지의 헤드 태그 사이에 다음 코드를 붙여 넣습니다.

닫는 본문 태그 앞에 플러그인을 연결하려면 다음 코드를 삽입하십시오.

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 속성에 동일한 값을 사용하십시오. 예를 들면 :

Img 2 Img 3 Img 4

라이트 박스 설정

기본 옵션을 변경하려면 option : 메서드를 호출합니다.

alwaysShowNavOnTouchDevices 기본값 : false
만약 진실을 클릭하면 이미지 세트를 보는 동안 마우스를 올려 놓으면 나타나는 왼쪽 및 오른쪽 탐색 화살표가 터치 지원 장치에서 항상 표시됩니다.
fadeDuration 기본값 : 500
컨테이너가 사라지는 데 걸리는 시간 (밀리 초)입니다.
fitImagesInViewport 기본값 : true
만약 진실을 클릭 한 다음 그림이보기 영역에 맞도록 이미지 크기를 비례 적으로 줄입니다. 이렇게하면 사용자가 전체 이미지를보기 위해 스크롤 할 필요가 없습니다.
maxWidth
주어진 경우 이미지 높이는이 값 (픽셀 단위)으로 제한됩니다. 종횡비는 존중되지 않습니다.
maxHeight
주어진 경우 이미지의 너비는이 값 (픽셀 단위)에 의해 제한됩니다. 종횡비는 존중되지 않습니다.
positionFromTop 기본값 : 50
뷰포트 상단에서 라이트 박스 컨테이너까지의 거리 (픽셀)입니다.
resizeDuration 기본값 : 700
라이트 박스 컨테이너가 다양한 크기 (밀리 초)의 이미지를 변경할 때 너비와 높이를 변경하는 시간입니다.
showImageNumberLabel 기본값 : true
만약 그릇된, 텍스트에는 현재 이미지 번호와 세트의 총 이미지 수가 포함됩니다 (예 : "이미지 2/4").
wrapAround 기본값 : false
만약 진실을 클릭하면 마지막 이미지를 표시 할 때 다음 이미지를 표시하는 버튼이 사라지지 않습니다. 그것을 클릭하면 첫 번째 이미지가 표시됩니다.

스크립트는 팝업 창에서 이미지보기를 구성합니다. 보기는 하나의 이미지 또는 갤러리별로 구성하여 팝업 창에서 사진을 스크롤 할 수 있습니다.
설치하는 가장 쉽고 빠른 스크립트. 단 몇 분만에 설치 및 구성됩니다.

라이트 박스 설치 방법

아카이브를 다운로드하고 압축을 풀고 서버에 업로드하십시오.
다음으로 스크립트를 사이트에 삽입합니다. 페이지의 html 코드에 코드를 작성하십시오.

그리고 마지막 단계. 이미지 표시.
다음과 같이 이미지 출력을 수행합니다.

작은 이미지와 큰 이미지에 대한 링크를 표시하기위한 표준 코드이며 두 개의 매개 변수 만 링크에 추가됩니다.
다음은이 코드의 예입니다. 사진을 클릭하면 큰 이미지가 나타납니다.

매개 변수가이 효과를 담당합니다. 데이터 라이트 박스 \u003d "이미지".
페이지에 많은 이미지가있는 경우 팝업 창에서 스 와이프하지 않고 이미지를 열거 나 이미지를 결합하여 팝업 창에서 스크롤 할 수 있습니다.
이미지를 결합하려면 각 이미지 그룹에 대해 하나의 이름을 사용해야합니다.

보시다시피 팝업 창에서 모든 사진을 스크롤 할 수 있습니다. 데이터 라이트 박스 모두 같은.
스크롤되지 않도록 그림을 분할하려면 비슷한 코드를 사용하십시오.

이제 각 그림이 개별적으로 열립니다. 즉, 다음으로 스크롤 할 수있는 방법이 없습니다.

업그레이드 된 버전의 내용

이미지를 실제 크기로 확대하는 버튼입니다. 모든 예에서 볼 수 있습니다. 원래 버전에는 없습니다.
스크립트 자체에 설정이 있으며이 버튼을 끌 수 있습니다.

그리고 소수의 사람들에게 필요한 두 번째 추가 사항은 중복 사진을 제외하는 것입니다.
기본적으로 비활성화되어 있으며 실제 크기 버튼이 활성화 된 곳에서 스크립트에서 직접 활성화 할 수 있습니다.
일반적인 스크립트 사용에서이 기능은 해를 입힐 뿐이며 완전히 절박한 상황에서만 사용할 수 있습니다.

세 개의 링크가 비어 있습니다. 즉, 큰 이미지로 연결되지만 태그 사이에는 아무 것도없고 하나의 링크는 이미지로 채워집니다.
결과적으로 브라우저에는 하나의 사진 만 표시되며, 클릭하면 큰 사진이 열리고 채워지지 않은 링크의 모든 사진이 표시되고 스크롤 할 수 있습니다.
여기 링크에는 두 개의 동일한 사진 (빨간색으로 강조 표시됨)이 있으며 스크롤하면 두 개의 동일한 사진이 표시됩니다.
특정 예에서 중복 제거를 활성화하면 중복 이미지가 없습니다.

물론 그러한 상황이 없어야합니다. 두 개의 동일한 사진을 표시 한 다음 삭제하는 이유는 무엇입니까? 하지만 이상하게도 저는 그런 상황에 직면했습니다. 한 온라인 상점에서 제품에 대해 중복 사진이 표시되어야했고 (스크립트를 통해 까다로운 사진 대체가있었습니다) 라이트 박스를 통해 볼 때 중복 사진이 매우 잘못 보였습니다. 이것은 중복 제거가 편리한 곳입니다.

코멘트

11.12.2014 빅터
대본은 아주 좋습니다. 데이터 제목을 사용하여 사진을 설명 할 수도 있습니다. 하지만 문제가 있었는데,이 스크립트가 연결되었을 때 옆에서 블록을 밀어내는 스크립트가 페이지에 있었는데, 그것은 나에게서 사라졌습니다. 그리고 js 스크립트가 연결되면 사라집니다. 나는 버전 때문에 충돌이 아니라고 생각했습니다.

2015 년 5 월 23 일 Victor
나를 위해 작동하지 않는 경우
href \u003d "http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver\u003d20150523142822"
이렇게 생겼어요. 없이? Ver \u003d 20150523142822
공장

2015 년 5 월 25 일 kaha
고마워

2015 년 6 월 29 일 Andrey
작업 해 주셔서 대단히 감사합니다! 모든 것이 거의 처음으로 작동했습니다)

2015 년 8 월 26 일 Alexander
다른 아날로그를 시도했습니다. 갈등없이 이것은 즉시되었다. 원산지로 증가합니다. size gut. 여전히 마우스를 사용하여 사진 필드 (일반적으로 kapets)를 촬영하고 이동하는 경우

11/01/2015 Igor
여보세요!
훌륭한 갤러리. 정말 고맙습니다.
바로 그런 질문 :
위의 예 (3 장)에서 이미지는 루프로 표시됩니다. 다운로드 한 lightbox-2.7.1 버전에서는이 기능이 작동하지 않습니다. 마지막 이미지를 볼 때 버튼이 더 이상 나타나지 않습니다.
이유가 무엇인지 말씀해 주시겠습니까?

2015 년 11 월 14 일 Anton

2015 년 11 월 15 일 Anton
IOS 및 Android에서는 전체 페이지에서 화면이 어두워지지 않습니다 !!! 무엇이 문제 일 수 있습니다. 일반 라이트 박스에서-모든 것이 정상입니다!

2016 년 3 월 30 일 Anton
여보세요!
사진을 더 높은 해상도로 열 수 있습니까?

2016 년 11 월 18 일 유라
대단히 감사합니다! 모든 것이 완벽하게 작동합니다!

2017 년 5 월 4 일 Igor
대본 감사합니다! 오랫동안 유사하고 설치하기 쉬운 것을 찾고있었습니다.
어떤 이유로 든 사진 아래에 이해할 수없는 비문이 나타납니다 Р˜Р · РѕР ± СЂР ° Р¶РµРЅРёРµ 8 РёР · 8

인코딩을 수정해야 할 곳이 있습니까?

12.09.2017 Barsuk
당신은 전에 어디 있었습니까! 중복 제거를 수정하기 위해 하루 종일 보냈습니다.))

메인 페이지에 메인 이미지의 미리보기가 있으며 하단에는 추가 이미지의 썸네일이 훨씬 적기 때문에 갤러리에 중복이 나타납니다.

Lightbox는 현재 페이지 상단에 큰 이미지를 표시하는 데 사용되는 작은 JavaScript 라이브러리입니다. 쉽게 설치되며 모든 최신 브라우저에서 작동합니다.

이 스크립트를 사용하면 팝업 창 내에서 전환하여 이미지를 단일로 표시 할 수 있습니다.

사용 지침.

파트 I : 라이브러리 연결.

1. 여기에서 스크립트를 사용하여 아카이브를 다운로드하고 압축을 풉니 다.

2. JS 폴더에서 파일을 찾습니다. jquery-1.10.2.min.js 과 lightbox-2.6.min.js 웹 사이트의 스크립트와 함께 폴더에 복사하십시오.

3. 태그 사이에 작성하여이 스크립트를 페이지에 연결 다음 줄 :

4. css 폴더에서 lightbox.css 파일을 찾아 스타일 파일 폴더에 복사합니다.

5. 태그 사이에 작성하여이 파일을 페이지에 연결 다음 줄 :

6. img 폴더에서 다음 파일을 웹 사이트 디자인 이미지가있는 폴더로 서버에 복사합니다. next.png... 이 파일은 스타일 시트에서 사용됩니다. lightbox.css... 기본적으로 스타일 파일은 css 폴더와 동일한 부모가있는 img 폴더에있는 이미지를 참조합니다. 이미지 폴더와 스타일 폴더가 완전히 다른 폴더에있는 경우 lightbox.css 파일의 이미지 경로를 적절한 경로로 변경해야합니다.

파트 II : 페이지에 그림 삽입.

이 스크립트는 링크를 클릭하면 트리거됩니다. 링크는 텍스트 또는 그림 일 수 있습니다. 어떤 링크를 처리해야하는지 스크립트에 알리려면 링크에 속성을 추가해야합니다. 데이터 라이트 박스 값을 할당합니다.

단일 사진.

링크 텍스트 1 링크 텍스트 2 링크 텍스트 3

* 제목 속성은 마음대로 채울 수 있습니다. 가득 차면 팝업 이미지 아래에 내용이 표시됩니다.

사진 그룹.

이미지 그룹이 있고 링크 중 하나를 클릭하면 팝업 창을 닫지 않고도 팝업 창에서이 그룹의 모든 이미지를 스크롤 할 수 있기를 원한다고 가정 해 보겠습니다.

링크 텍스트 1 링크 텍스트 2 링크 텍스트 3

* 이전에 LiteBox 스크립트에 rel \u003d "lightbox"속성을 사용했습니다. 지금 사용할 수 있으며 작동하지만 더 많은 가능성을 제공하므로 새 속성을 사용하는 것이 좋습니다.

모든 것이 완료된 것처럼 보이지만 모든 것이 작동해야하지만 :

이미지에서 그림 그룹을 형성하면 팝업 창에서 볼 때 그림 아래에 표시됩니다 "이미지 1/8"? 근데 이런 걸보고 싶어요 "이미지 1/8".

이렇게하려면 13 행의 lightbox-2.6.min.js 파일에서 다음을 대체해야합니다.

return "Image"+ b + "of"+ c

return "Image"+ b + "from"+ c

마지막으로이 스크립트를 사용했을 때 carousel 스크립트와 함께 사용해야했기 때문에 한 가지 결함을 발견했습니다.

다음은 결함에 대한 설명과 해결 방법입니다.

페이지에 2 개의 서로 다른 이미지 그룹이 있고 예를 들어 첫 번째 그룹에는 캡션이 있고 (제목 속성이 채워져 있음) 두 번째 그룹의 제목 속성이 비어 있거나 전혀 지정되지 않은 경우 설명없이 사진을 볼 때 (제발, 설명이있는 사진을 하나 이상 보았습니다), 마지막으로 본 사진에 대한 설명이 계속 표시됩니다. 즉, 스크립트는 팝업 창의 제목 지우기를 거부하고 새 제목 (있는 경우)으로 바꿉니다. 그것을 고치는 방법?

Title 속성을 지우지 않는 오류를 수정하려면 219 행에서 lightbox-2.6.min.js 파일의 텍스트를 바꿉니다.

if (typeof this.album.title! \u003d\u003d "undefined"amp; amp; amp; amp; amp; amp; this.album.title! \u003d\u003d "") (this. $ lightbox.find ( ". lb-caption ") .html (this.album.title) .fadeIn ("fast "))

if (typeof this. album [this. currentImageIndex]. title! \u003d\u003d "undefined"& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; & amp; amp; amp; amp; ; amp; amp; amp; amp; amp; amp; amp; this. album [this. currentImageIndex]. title! \u003d\u003d "") (this. $ lightbox. find ( ".lb-caption"). html (this . album [this. currentImageIndex]. title). fadeIn ( "fast"))

가장 인기있는 라이브러리는 Lightbox Javascript로, 데스크톱에서는 수년 동안 사용해 왔지만 모바일 플랫폼에서는 사용하지 않았습니다.

다음은 모바일 플랫폼을 지원하는 14 개의 라이트 박스 플러그인입니다.

PhotoSwipe

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

모바일 플랫폼을위한 터치 제스처를 지원하는 Swipebox jQuery 플러그인. 이미지 외에 Youtube 및 Vimeo 동영상도 지원합니다. Swipebox는 설치가 쉽고 구성을 조정할 수있는 몇 가지 옵션이 있습니다. 저는 Swipebox가 JavaScript를 모르는 사람들에게 너무 어수선한 라이트 박스 플러그인이라고 생각합니다.

부트 스트랩 용 라이트 박스

처음에는 Lightbox 플러그인이 Bootstrap에 없습니다. Lightbox for Bootstrap이이 문제를 해결합니다. Bootstrap을 사용하는 경우이 라이브러리를 사용하는 것이 좋습니다. 플러그인은 Bootstrap과 잘 통합됩니다.

필수 라이브러리: JQuery 및 부트 스트랩 모듈
브라우저 지원 : IE8 +, Chrome, Firefox, Safari 및 Opera
특허: GNU 라이선스

Nivo 라이트 박스

Nivo Lightbox는 고도로 맞춤 설정할 수있는 라이트 박스 플러그인입니다. 다양한 옵션을 사용하여 모양을 변경할 수 있습니다. 예 : 테마, 모양의 애니메이션 및 탐색 유형.

필수 라이브러리: JQuery
브라우저 지원 :
특허: MIT 라이선스

ImageLightbox

ImageLightbox는 종소리와 휘파람이없는 간단한 라이트 박스 플러그인입니다. 이미지에만 사용되므로 이름이 사용됩니다. 비디오 나 다른 유형은 모두 지원되지 않습니다. 또한 추가 HTML 마크 업이 필요하지 않습니다. 꼬리표 충분하다. 이 플러그인은 사용하기 쉽습니다.

필수 라이브러리: JQuery
브라우저 지원 : IE9 +, Chrome, Firefox, Safari 및 Opera
특허: 결정되지 않은

미니 라이트 박스

추가 기능이없는 또 다른 라이트 박스 플러그인. 라이브러리의 무게는 2KB에 불과하며 이미지로만 작동합니다. 최신 버전의 브라우저로만 개발하고 비디오 또는 기타 형식을 지원할 필요가없는 경우 완벽한 플러그인입니다.

필수 라이브러리: 아니
브라우저 지원 : Internet Explorer 10 이상, Chrome, Firefox, Safari 및 Opera
특허: MIT 라이선스

LightCase

Lightcase는 훌륭한 라이트 박스 플러그인입니다. 페이드, 엘라스틱, 줌 및 스크롤링과 같은 여러 종류의 애니메이션을 지원합니다. 또한 Youtube Embed, HTML 비디오, SWF 및 입력 양식 등 다양한 미디어를 지원합니다.

필수 라이브러리 : JQuery
브라우저 지원 : IE9 +, Chrome, Firefox, Safari 및 Opera
특허: GPL 라이선스

깃털처럼 가벼운

Featherlight는 지식이 풍부한 개발자를위한 6KB의 기본 플러그인이며 필수 요소 만 포함합니다. 예를 들어 갤러리의 이미지 그룹에 대해 라이트 박스 효과가 필요한 경우 갤러리 확장을 활성화 할 수 있습니다. 프로젝트에서 사용할 자체 플러그인 확장을 개발할 수도 있습니다.

필수 라이브러리: JQuery
브라우저 지원 : IE8 +, Chrome, Firefox, Safari 및 Opera
특허: MIT 라이선스

LightLayer

LightLayer는 사용하기 쉬운 라이트 박스 플러그인입니다. 플러그인은 많은 옵션, 사용자 정의 JavaScript 메소드 및 사용자 정의 이벤트를 지원합니다. 플러그인은 이미지, 비디오,지도에서 작동합니다.

필수 라이브러리 : JQuery
브라우저 지원 : IE9 +, Chrome, Firefox, Safari 및 Opera
특허: MIT 라이선스

LightGallery

LightGallery는 많은 기능을 가진 또 다른 라이트 박스 플러그인입니다. 라이트 박스 효과의 다양한 세부 사항을 사용자 지정하는 20 개 이상의 옵션이 포함되어 있습니다.

필수 라이브러리: JQuery
브라우저 지원 : IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android 및 Windows Phone
특허: MIT 라이선스

FluidBox

Fluidbox 라이트 박스 플러그인은 이미지와 함께 작동합니다. 플로팅 이미지, 절대 위치 이미지, 테두리와 패딩이있는 이미지, 갤러리를 포함한 다양한 디스플레이에 대한 지원이 포함됩니다. WordPress 플러그인도 있습니다.

필수 라이브러리 : JQuery
브라우저 지원 : IE9 +, Chrome, Firefox, Safari, Opera
특허: MIT 라이선스

StripJS

StripJS는 고유 한 라이트 박스 플러그인입니다. 이미지를 오버레이하는 대신 라이트 박스 모듈은 이미지와 함께 이미지가 모든 콘텐츠를 차단하지 않도록 좌우로 슬라이드합니다. StripJS는 이미지와 비디오를 모두 지원합니다.

필수 라이브러리: JQuery
브라우저 지원 : IE7 이상, Chrome, Firefox, Safari, Opera, IOS 5 이상 및 Android 3 이상
특허: Creative Commons BY-NC-ND 3.0 라이선스

점점 더 많은 최신 웹 기술을 사용할 수있어 작업이 훨씬 쉬워집니다. 모달은 사용자 친화적 인 디자인과 인터페이스를 만드는 데 초점을 맞춘 모든 유형의 HTML 콘텐츠를 표시하는 기능적 요소입니다.

이번 요약에서는 개발자와 디자이너가 더욱 우수하고 전문적인 웹 사이트를 만들 수 있도록 jQuery 라이브러리 및 라이트 박스 스크립트 목록을 모았습니다.

사이트에 아래 스크립트를 쉽게 추가 할 수 있습니다. 따라서 더 이상 고민하지 않고 바로 시작하여 무기고에 추가 할 수있는 슈퍼 jQuery 라이트 박스 라이브러리를 살펴 보겠습니다.

1. Photoswipe

PhotoSwipe는 특히 모바일 장치에 초점을 맞춘 CSS 및 JavaScript 기반 HTML 사진 갤러리입니다. 이를 개발할 때 저자는 모바일 장치 IOS 및 Google 용 이미지보기 서비스를 모델로 삼았습니다. PhotoSwipe에는 친숙하고 직관적 인 인터페이스가있어 모바일 사이트에서 이미지 작업을 더 쉽게 할 수 있습니다.

다음 또는 이전 이미지로 이동, 확대, 드래그, 축소 또는 닫기 등 모든 주요 기능이 지원됩니다.

2. Swipebox

Swipebox는 데스크톱, 스마트 폰 및 태블릿 용 jQuery 플러그인입니다. 모바일 용 터치 컨트롤, 데스크톱 장치 용 키보드 탐색, jQuery 컨트롤로 대체되는 CSS 전환을 지원하며 설정이 매우 쉽습니다.

플러그인은 Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4 +, Android, Windows Phone에서 테스트되었습니다. MIT 라이선스에 따라 출시되었습니다.

3.iLightbox

iLightBox를 사용하면 jQuery를 사용하여 매우 아름다운 반응 형 모달을 쉽게 만들 수 있습니다. 다양한 미디어 콘텐츠에 대한 지원과 멋진 스킨 및 사용자 친화적 인 API를 결합한 iLightBox는 라이트 박스를 최대한 완벽하게 만들기 위해 노력합니다. iLightBox는 전체 화면보기, Retina 호환 스킨, 터치 이벤트 제어, HTML5 비디오를위한 YouTube 및 Vimeo 통합, 강력한 JavaScript API를 제공합니다. 플러그인에는 무료 지원 및 버전 업데이트가 있습니다.

4. 이미지 라이트 박스

Image Lightbox는 IOS, Android 및 Windows Phone을위한 최소한의 확장 가능하고 사용자 정의 가능한 플러그인입니다. CSS 변환 및 전환을 사용하여 키보드로 다음 이미지를로드 할 수 있습니다.

5. 멋진 팝업

Magnific Popup은 가능한 최상의 사용자 장치 경험을 제공하는 데 초점을 맞춘 무료 반응 형 jQuery 플러그인입니다. 대부분의 라이트 박스 플러그인의 경우 JS를 사용하여 창 크기를 조정해야합니다. Magnific Popup에서는 EM과 같은 상대 단위를 사용하거나 CSS 미디어 쿼리로 라이트 박스의 크기를 조정할 수 있습니다.

6. Nivo 라이트 박스

Nivo Lightbox는 유연한 라이트 박스 플러그인입니다. 라이트 박스의 모양을 쉽게 변경할 수있는 많은 옵션이 있습니다. 예를 들어 테마, 전환 효과 및 탐색 방법을 변경합니다.

7. 라이트 케이스

Lightcase는 jQuery로 빌드 된 유연하고 반응이 빠르고 확장 가능한 라이트 박스 플러그인입니다. Internet Explorer 7+, Firefox, Opera, Webkit 등과 같은 널리 사용되는 모든 브라우저에서 잘 작동합니다. 플러그인은 사진, 비디오, HTML5 비디오, Iframe, SWF 및 AJAX 호출을 지원합니다.

8. Lightlayer.js

LightLayer는 반응 형 라이트 박스를 표시하기위한 스크립트이며 모든 화면에서 다른 구성 요소와 잘 작동합니다. 이 스크립트는 사용하기 정말 쉽습니다. LightLayer는 배경색 및 불투명도, 라이트 박스 위치, 열기 / 닫기 전환 및 기타 여러 사용자 정의 가능한 기능과 같은 다양한 매개 변수를 제어합니다.

9. Strip.js

스트립은 페이지의 일부로 만 확장되는 라이트 박스입니다. 이렇게하면 방해가 덜되고 큰 화면에서 다른 페이지 요소와 상호 작용할 수 있습니다. 휴대 기기에서 라이트 박스는 클래식 한 모습을하고 있습니다. Strip은 jQuery를 사용하며 모든 주요 브라우저에서 지원됩니다.

10. Fluidbox

Fluidbox는 고해상도 이미지에 이상적인 눈에 띄지 않고 반응이 빠른 라이트 박스를 제공하도록 설계된 jQuery 플러그인입니다. 모바일 장치에서 잘 작동하며 이미지를 아름답게 표시하기 위해 고해상도 화면에도 적용 할 수 있습니다.

11. 페더 라이트

Featherlight는 400 줄의 JavaScript, 100 줄의 CSS, 크기가 6Kb 미만인 매우 가벼운 플러그인입니다. 스마트하고 반응이 빠른 라이트 박스는 기본적으로 이미지, AJAX 및 iframe을 지원합니다. 필요에 맞게 조정할 수도 있습니다. Featherlight는 IE8 +, 모든 최신 브라우저 및 모바일 플랫폼에서 작동합니다.

12. 얄브

Yalb는 Yet Another Lightbox의 약자이지만 그렇지 않습니다. Yalb는 상태를 정의 할 수있는 사용자 지정 이벤트를 포함하는 대규모 인터페이스 집합과 함께 제공됩니다 ( 열림, 닫힘).