웹페이지를위한 간단하고 가볍고, 크로스 브라우저 라이트 박스
단 몇 라이트 박스의 때 Google은 당신이 찾아내는 수있다 않지만. 내가 찾은 lightboxes 대부분 가진 문제는 그들이 모두 하나 이상 JQUERY, 프로토 타입, MOOTOOLS 그리고 저자와 같은 다른 중량 자바 스크립트 프레임 워크를 사용하는 것 같았다는 것이었습니다. 그들은 모두 근사하고 멋진 찾고 있습니다. 당신의 요구는 "하지만 내가 내 사이트에 대한 간단하고 가벼운 라이트 박스 스크립트 싶다"라면, 그럼 여기 있네요;
이 라이트 박스의 일부 멋진 기능
- 매우 가벼운
. 포장 스크립트 4킬로바이트 (8킬로바이트은 풀었)
나. CSS의 2킬로바이트
다. 라이트 박스 컨테이너를위한 HTML의 몇 줄 - 이해하고 구현할 단순
- 같은 페이지에 여러 Lightboxes 수 있습니다.
- 같은 라이트 박스 컨테이너는 클릭할 링크 / 옵션에 따라 다양한 컨텐츠를 (별도 페이지에 숨겨진 사업부로 포함되는), 표시하는 데 사용됩니다.
- 자동으로 고려와 같은 윈도우의 높이와 넓이 (화면 해상도), 페이지 스크롤 금액 및 라이트 박스 내용의 높이가 같은 모든 요인을 복용 자체 되잖아
- IE 7과 FF에서 테스트
데모보기 |
다운 라이트 박스 소스 우편 (1792 회 다운로드)
[zip 파일에 파일] 라이트 박스 사용하기
jo.js, jo_pack.js [포장 버전] : - JAVASCRIPT 객체의 간단한 세트 [조], 요소, 창 및 문서 위치 스크립트가 포함되어 있습니다. 당신은 추상 함수를 작성하는 일부 고급 Javascripting와 당신의 손을 더럽히는하려는 경우 요소 속성과 같은 확대 JO.JS를 열 수 있습니다. Javascripting의 당신이 너무 많이하지 않으면 냅둬.
lightbox.js, lightbox_pack.js [팩킹된 버전] : - 라이트 박스 관리자가 스크립트를 포함합니다. 당신이 페이지에서 라이트 박스를 구현에도 책임이 페이지 디자이너, 경우 LightBoxManager를 이해해야합니다. LightBoxManager은 기본적으로 두 함수 showLightBox 및 closeLightBox가 포함되어 있습니다.
lightbox.css : - 당신이 CSS를 알고있다면, 당신이 모양-N-느낌 lightbox.css을 사용자 지정하는 lightbox.css와 주변 놀 수
index.html 페이지 : 두 개의 다른 콘텐츠로 라이트 박스의 샘플 구현
lb_underlay_bkg.png : - [라이트 박스가 열려있는 동안, 밑받침이 페이지의 다른 개체를 클릭으로부터 사용자를 방지 lighbox 아래 레이어입니다] 이것이 라이트 박스의 밑받침에 대한 배경을 사용하는 시미 / 빛이 투명 이미지입니다. 당신은 페이지 디자인 및 요구 사항에 따라이 목적도 어떤 이미지나 단색을 사용할 수 있습니다.
icon_lb_close.gif : - 빛의 상자의 오른쪽 상단에있는 가까운 라이트 박스 핸들에 대한 이미지입니다. 디자인에 따라 어떤 이미지를 사용할 수
데모보기 |
다운 라이트 박스 소스 우편 (1792 회 다운로드)
귀하의 의견과 피드백을 해주세요 ...
