BaguetteBox.js가 포함 된 반응 형의 아름다운 전체 페이지 라이트 박스 만들기

있다 수십개의 라이트 박스 플러그인 그들은 모두 위대하다. 다른 이유로. 일부는 포트폴리오 사이트에서 더 잘 작동하고 다른 일부는 응답 성있는 레이아웃에 가장 적합합니다..

하지만, 내가 가장 좋아하는 새 플러그인 중 하나는 baguetteBox.js, JavaScript 개발자 Marek Grzybek이 (가) 작성했습니다..

물론이 플러그인은 코드를 수동으로 파고 들기를 원할 경우 GitHub에서 완전히 자유롭게 사용할 수 있습니다..

도서관 의존성이 없다., 그래서 당신은 jQuery, Zepto, 또는 다른 어떤 것도없이 실행할 수 있습니다. 그것은 정말 간단한 설정으로 순수한 JavaScript 라이브러리.

그것은 모바일 장치에서 완벽하게 작동합니다., 그래서 데스크톱 및 랩톱의 기본 동작과 함께 스 와이프 및 탭을 지원할 수 있습니다. 전체 화면으로 구성된 몇 개의 갤러리 중 하나입니다. 완전한 모달 효과와 함께 모바일 상호 작용을 지원합니다..

체크 아웃 데모 페이지 그것이 행동에서 살아가는 것을보기 위해서. 그것은 완벽한 기능을 갖춘 갤러리와 함께 한 줄의 코드가 작동하도록 요구:

 baguetteBox.run ( '. baguetteBoxOne'); 

그래서 이건 클래스가있는 컨테이너 요소를 대상으로합니다. .baguetteBoxOne 전체 갤러리가 작동합니다..

너는 할 수 있었다. 사용자 정의 옵션 설정 onclick / onchange 이벤트에 캡션, 버튼 스타일, 미리로드 기능 및 콜백 메소드 등을 원할 경우 이 옵션들은 모두 GitHub에 잘 문서화되어있다. 에 잠수하고 싶으면.

그러나 컨테이너 요소와 몇 가지 기본 이미지 요소를 넘어서이 작업을 수행하는 데 많은 시간이 걸리지는 않습니다..

당신 완전히 통제 할 수있다. 애니메이션, 이미지 크기, 스 와이프 효과 및 제목 / 캡션과 같은 갤러리 내용 이 자바 스크립트가 필요하다., 그래서 그것은 모달에 대한 순수한 CSS 대안을 가지고 있지 않습니다. 하지만 대부분의 브라우저는 JavaScript를 지원하므로 문제가되지 않습니다..

자세한 내용을 보려면 baguetteBox.js 기본 페이지를 방문하고 Twitter @feimosi의 작성자와 의견을 공유 할 수도 있습니다..