기사 유형 웹 페이지를 만들 때 큰 사진을 보려면 클릭 해야하는 경우가 종종 있습니다. Lightbox2는 많은 제품들 사이에서 비교적 우수한 JQuery 플러그인입니다. 구성에 대한 자세한 내용은 없습니다. 오늘은 주로 공유하고 싶습니다. 큰 그림을 클릭 한 후 마우스 스크롤 휠을 통해 사진을 확대하는 방법.
1. 스크롤 휠 스케일링을 지원하기 위해 Lightbox 소스 코드 수정
지원 마우스 휠 지원 전체 팝업 상자를 Mousewheel 이벤트에 묶고 Lightbox.js를 열고 Lightbox.Prototype.Build = function () {...}를 찾으십시오. 예를 들어, LightBox가 초기화 될 때 원하는 스크롤 휠 이벤트를 여기에서 바인딩 할 수 있습니다. 예를 들어 기능 끝에 다음 코드를 추가하십시오.
코드 사본은 다음과 같습니다.
// 사진 휠 줌
this.img = this. $ container.find ( '. lb-Image');
this.label = this. $ lightbox.find ( '. lb-datacontainer');
$ ([this. $ 오버레이 [0], this. $ lightbox [0]). bind ( "mousewheel", function (e) {
var flag = e.originalevent.wheeldelta <0;
var imgh = self.img.height ();
var imgw = self.img.width ();
var nw = math.round (20*imgw/imgh);
var cth = self. $ outercontainer.height ();
var ctw = self. $ outercontainer.width ();
var layh = self. $ 오버레이.height () -20;
var layw = self. $ 오버레이.width () -20;
// 아래에
if (flag && imgh> 20 && imgw> 20) {
self.img.css ( '높이', imgh -20);
self.img.css ( 'width', imgw -nw);
self. $ autercontainer.css ( '높이', cth -20);
self. $ autercontainer.css ( 'width', ctw -nw);
if (ctw-nw> 240) {
self.label.css ( 'width', ctw -nw);
}
} else if (! flag && imgh <layh && imgw <layw) {
self.img.css ( '높이', imgh + 20);
self.img.css ( 'width', imgw + nw);
self. $ autercontainer.css ( '높이', cth + 20);
self. $ autercontainer.css ( 'width', ctw + nw);
self.label.css ( 'width', ctw + nw);
}
E.StopPropagation ();
거짓을 반환합니다.
});
코드는 이해하기 쉽습니다. 마우스 휠 모니터링을 백그라운드 및 전면 이미지에 추가 한 다음 높이와 너비를 비례 적으로 확장하는 것입니다 (확대하기 위해 롤업하고 아래로 스크롤하여 확대). 매번 높이 변경을 20 픽셀로 설정 한 다음 너비가 비례 적으로 변합니다. 주목해야 할 것은 그림의 최소 크기를 줄여야하며 사진 확대가 화면 범위 제한을 초과 할 수 없다는 것입니다. 동시에, 더 나은 경험을 얻으려면 E.StopPropagation ()을 추가하고 False를 반환하여 브라우저가 스크롤하지 않도록해야합니다.
2. Base64 그림을 지원하기 위해 Lightbox 소스 코드 수정
여기서 이야기하는 것이 더 번거 롭을 수 있습니다. 먼저 Native Lightbox를 사용할 때 HTML 코드 형식 요구 사항을 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<a href = "img/image.jpg"data-lightbox = "test"> image #1 </a>
이것은 가장 쉬운 팝업 이미지입니다. 이미지 #1을 클릭하면 Lightbox가 팝업되어 IMG/Image.jpg (요소 <IMG SRC = "IMG/Image.jpg"/>)의 내용을 표시합니다.
이제 이미지가 서버의 Base64에서 인코딩되어 데이터베이스에 저장된 경우이 상황을 고려해 봅시다. 다음과 같아야합니다.
코드 사본은 다음과 같습니다.
<a href = "data : image/png; base64, ivborw ..."data-lightbox = "test"> image #1 </a>
문제는 HREF의 길이가 IE에 따라 제한된다는 것입니다. 큰 그림은 HREF 필드에 배치 할 수 없으며 그림은 거세됩니다 (상부 만 표시됩니다).
또 다른 일반적인 상황이 있습니다. 작은 그림을 먼저 표시하고 작은 그림을 클릭하면 큰 그림을 볼 경우 다음과 같아야합니다.
코드 사본은 다음과 같습니다.
<a href = "data : image/png; base64, ivborw ..."data-lightbox = "test">
<img src = "data : image /png; base64, ivborw ..." />
</a>
자, 두 개의 중복 Base64 데이터가 있으며 서버 측에서 전송되어 시간과 대역폭이 소비됩니다.
그래서 내 필요에 따라 수정했습니다. 코드는 매우 간단하고 Lightbox.prototype.start = function ($ link) {...} addtoalbum에서 하위 기능을 수정합니다.
코드 사본은 다음과 같습니다.
함수 AddToAlbum ($ link) {
self.album.push ({
// link : $ link.attr ( 'href'),
링크 : $ link.children (). attr ( "src"),
제목 : $ link.attr ( 'data-title') || $ link.attr ( 'title')
});
}
주석은 부분이 원본입니다. $ 링크는 이전 HTML 코드의 A 태그입니다. 수정 후, AddToAlbum 함수의 기능은 다음과 같습니다. 그림을 팝업하기 위해 SRC를 설정할 때 더 이상 원래 HREF의 문자를 IMG 태그를 팝업하기위한 SRC로 가져 가지 않지만 A 태그의 자식 요소에서 SRC 속성을 직접 찾습니다. SRC 속성의 길이는 무제한이므로 이미지 자르기 문제가 없습니다.
3. 기존 기사에 Lightbox를 적용하십시오
섹션 2는 이미 HTML이 LightBox를 사용할 때 특정 형식을 가지고 있다는 사실에 대해 이미 이야기했습니다. 기존 기사의 그림이 <img src = "img/image.jpg"> 인 경우 하나의 레이어로 캡슐화해야합니다.
코드 사본은 다음과 같습니다.
함수 initlightbox () {
var imgs = $ ( ". lightbox-container"). 찾기 ( 'img');
$ .Each (imgs, function (i) {
var img = $ (imgs [i]);
img.wrap ( "<a href = ''data-lightbox = 'test'> </a>");
});
}
그 중 "Lightbox-Container"는 기사가있는 컨테이너 클래스입니다. Page Load가 준비되면 Initlightbox 기능을 배치해야하며 기사의 모든 IMG 태그를 Lightbox 형식으로 캡슐화합니다.
이 기사의 전부입니다. 포인트 2 및 3 : 자체 사용 시나리오에서 사용할 수 있습니다. 라이트 박스 변경의 초점은 스크롤 휠 스케일링을 지원하는 것입니다.
수정 된 Lightbox http://xiazai.vevb.com/201412/yuanma/lightbox(Vevb.com).rar를 첨부했습니다