記事タイプのWebページを作成するとき、大きな写真を見るためにクリックする必要があることがよくあります。 LightBox2は、多くの製品の中で比較的優れたJQueryプラグインです。構成の詳細については説明しません。今日、私は主に共有したい：大きな画像をクリックした後、マウススクロールホイールを通して写真をズームする方法。
1.ライトボックスソースコードを変更して、スクロールホイールスケーリングをサポートします
マウスホイールのサポートは、主にポップアップボックス全体をマウスホイールイベントに結合し、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]]）。
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。$ outourcontainer.height（）;
var ctw = self。$ outourcontainer.width（）;
var layh = self。$ overlay.height（）-20;
var layw = self。$ overlay.width（）-20;
// 下
if（flag && imgh> 20 && imgw> 20）{
self.img.css（ 'height'、imgh -20）;
self.img.css（ 'width'、imgw -nw）;
self。$ outourcontainer.css（ 'height'、cth -20）;
self。$ outourcontainer.css（ 'width'、ctw -nw）;
if（ctw-nw> 240）{
self.label.css（ 'width'、ctw -nw）;
}
} else if（！flag && imgh <layh && imgw <layw）{
self.img.css（ 'height'、imgh + 20）;
self.img.css（ 'width'、imgw + nw）;
self。$ outourcontainer.css（ 'height'、cth + 20）;
self。$ outourcontainer.css（ 'width'、ctw + nw）;
self.label.css（ 'width'、ctw + nw）;
}
e.StopPropagation（）;
falseを返します。
}）;
コードは理解しやすいです。これは、背景とフロント画像にマウスホイールの監視を追加し、高さと幅を比例してスケーリングすることです（ズームインしてズームインして、下にスクロールしてズームアウトします）。毎回高さの変化を20ピクセルに設定し、幅が比例して変化します。注意すべきことは、画像の最小サイズを縮小する必要があり、画像の拡大が画面範囲の制限を超えることはできないことです。同時に、より良いエクスペリエンスのために、e.StopPropagation（）を追加し、falseを返して、ブラウザのスクロールを防ぐ必要があります。
2。base64画像をサポートするためにライトボックスソースコードを変更する
ここで話すのはもっと面倒かもしれません。ネイティブ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>
OK、2つの重複したBase64データがあり、それらはすべてサーバー側から送信され、時間と帯域幅を消費します。
だから私は自分のニーズに応じてそれを変更しました、コードは非常にシンプルで、lightbox.prototype.start = function（$ link）{...} addtoalbum：lightbox.prototype.start = functionのサブ機能を変更します。
コードコピーは次のとおりです。
関数addtoalbum（$ link）{
self.album.push（{
//リンク：$ link.attr（ 'href'）、
リンク：$ link.children（）。attr（ "src"）、
タイトル：$ link.attr（ 'data-title'）|| $ link.attr（ 'title'）
}）;
}
コメントされた部分はオリジナルです。 $リンクは、以前のHTMLコードのAタグです。変更後、AddToAlbum関数の関数は次のとおりです。SRCを表示するためにSRCを設定する場合、IMGタグをポップアップするためのSRCとして元のHREFの文字を取得しなくなりますが、Aタグの子要素からSRC属性を直接見つけます。 SRC属性の長さは無制限であるため、画像の切り捨ての問題はありません。
3.既存の記事にライトボックスを適用します
セクション2は、HTMLがLightboxを使用するときに特定の形式を持っているという事実について既に説明しています。既存の記事の写真が<img src = "img/image.jpg">の場合、1つのレイヤーにカプセル化する必要があります。
コードコピーは次のとおりです。
関数initlightbox（）{
var imgs = $（ "。lightbox-container"）。find（ 'img'）;
$ .each（imgs、function（i）{
var img = $（imgs [i]）;
img.wrap（ "<a href = '' data-lightbox = 'test'> </a>"）;
}）;
}
その中で、「Lightbox-Container」は、記事があるコンテナのクラスです。 initlightbox関数は、ページの読み込みが準備が整ったときに配置する必要があります。記事のすべてのIMGタグをライトボックス形式にカプセル化します。
この記事はすべてです。ポイント2および3：独自の使用シナリオで使用できます。ライトボックスの変更の焦点は、スクロールホイールのスケーリングをサポートすることです。
変更されたライトボックスhttp://xiazai.vevb.com/201412/yuanma/lightbox(vevb.com).rar