Lightbox 지원 휠 확대/축소 및 Base64 Images_jquery를 만드는 방법

기사 형식의 웹페이지를 만들다 보면 큰 그림을 보기 위해 핵심 내용을 열어야 하는 경우가 종종 있습니다. LightBox2는 많은 제품 중에서 뛰어난 Jquery 플러그인입니다. 오늘 제가 주로 공유하고 싶은 내용은 큰 이미지를 클릭한 후 마우스 휠을 통해 이미지를 확대 및 축소하는 방법입니다.

1. 휠 줌을 지원하도록 라이트박스 소스 코드를 수정합니다

마우스 휠을 지원하는 주요 방법은 전체 팝업 상자를 mousewheel 이벤트에 바인딩하는 것입니다. lightbox.js를 열고 Lightbox.prototype.build = function() {...} 섹션을 찾으세요. 여기에서 찾을 수 있습니다(라이트박스 초기화 시간). 원하는 스크롤 휠 이벤트를 바인딩합니다. 예를 들어 함수 끝에 다음 코드를 추가합니다.

코드 복사 코드는 다음과 같습니다.

// 이미지 스크롤 휠 줌
This.img = this.$container.find('.lb-image');
This.label = this.$lightbox.find('.lb-dataContainer');
         $([this.$overlay[0],this.$lightbox[0]]).bind("마우스휠", function(e){
          var flag= e.originalEvent.wheelDelta
          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();
          varlayH = self.$overlay.height()-20;
          varlayW = self.$overlay.width()-20;
                                  // 아래로
If(플래그 && imgH>20 && imgW>20) {
                   self.img.css('height', imgH - 20);
                    self.img.css('width', imgW - nw);
                    self.$outerContainer.css('height', ctH - 20);
                    self.$outerContainer.css('width', ctW - nw);
If(ctW-nw > 240){
                              self.label.css('width', ctW - nw);
                }
                  } else if(!flag && imgH                     self.img.css('height', imgH 20);
                    self.img.css('width', imgW nw);
                    self.$outerContainer.css('height', ctH 20);
                    self.$outerContainer.css('width', ctW nw);
                   self.label.css('width', ctW nw);
~              e.stopPropagation();
            false를 반환합니다.
});

코드는 배경과 전면 이미지 모두에 마우스 휠 모니터링을 추가한 뒤, 높이와 너비를 비례적으로 조정(위로 스크롤하면 확대, 아래로 스크롤하면 축소)되도록 설정한 것입니다. 각 높이는 20픽셀로 변경되고 너비도 이에 비례하여 변경됩니다. 주의할 점은 이미지의 축소 크기를 최소화해야 하며, 이미지 확대는 화면 범위의 한계를 초과할 수 없습니다. 동시에 더 나은 경험을 위해서는 e.stopPropagation()을 추가하고 false를 반환하여 브라우저가 스크롤되지 않도록 해야 합니다.

2. Base64 이미지를 지원하도록 라이트박스 소스 코드를 수정합니다.

여기서 이야기하기가 번거로울 수 있습니다. 먼저 네이티브 라이트박스 사용 시 HTML 코드 형식 요구 사항을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

이미지 #1

이것은 가장 간단한 팝업 이미지입니다. Image #1을 클릭하면 img/image.jpg의 내용을 표시하는 라이트박스가 나타납니다( ;).
이제 이런 상황을 고려해 보겠습니다. 이미지가 서버에서 Base64로 인코딩되면 데이터베이스에 저장됩니까? 이렇습니다:

코드 복사 코드는 다음과 같습니다.

이미지 #1

여기서 문제가 발생합니다. IE에서는 href 길이가 제한되어 있습니다. href 필드에 큰 그림을 넣을 수 없으며 그림이 거세됩니다(상단 부분만 표시됩니다).
또 다른 일반적인 상황이 있습니다. 작은 그림을 먼저 표시하고 작은 그림을 클릭하여 큰 그림을 보려면 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.

네, 두 개의 중복된 Base64 데이터가 있고 둘 다 서버에서 전송되므로 시간이 많이 걸리고 대역폭이 많이 소모됩니다.
그래서 필요에 따라 코드를 수정했습니다. Lightbox.prototype.start = function($link) {...}에서 addToAlbum:

하위 함수를 수정하세요.

코드 복사 코드는 다음과 같습니다.

함수 addToAlbum($link) {
          self.album.push({
// 링크: $link.attr('href'),
            링크: $link.children().attr("src"),
제목: $link.attr('data-title') || $link.attr('title')
        });
}

주석 처리한 부분이 원본이고 $link는 이전 HTML 코드의 a 태그이며 변경 후 addToAlbum 함수의 기능은 다음과 같습니다. 팝업 이미지의 src 설정 시 더 이상 문자가 찍히지 않습니다. img 태그의 팝업 src로 원본 href에서 가져오되 a 태그의 하위 요소에서 src 속성을 직접 찾으면 src 속성의 길이가 무제한이므로 이미지 잘림 문제가 발생하지 않습니다. .

3. 기존 글에 라이트박스 적용

섹션 2에서는 라이트박스를 사용할 때 HTML이 특정 형식을 갖는다고 이미 언급했습니다. 기존 기사의 그림이 와 같은 경우 레이어 캡슐화를 수정해야 합니다.

코드 복사 코드는 다음과 같습니다.

함수 initLightbox(){
var imgs = $(".lightbox-container").find('img');
$.each(imgs,function(i) {
        var img = $(imgs[i]);
img.wrap(""); });
}

그 중 "lightbox-container"는 기사가 위치한 컨테이너의 클래스입니다. initLightbox 기능은 페이지를 로드할 준비가 되면 배치되어야 하며 기사의 모든 img 태그를 라이트박스 형식으로 캡슐화합니다.

이 기사에서는 2번과 3번을 각자의 사용 시나리오에 따라 사용할 수 있습니다. 라이트박스 변경의 초점은 스크롤 휠 확대/축소를 지원하는 것입니다.

수정된 라이트박스 첨부http://xiazai.jb51.net/201412/yuanma/lightbox(jb51.net).rar