ライトボックスでホイールズームとBase64のimages_jqueryをサポートする方法

記事タイプの 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]]).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(flag && 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();
return false;
});

コードは、背景と正面の画像の両方にマウス ホイール モニタリングを追加し、高さと幅を比例して拡大縮小するように設定しています (上にスクロールするとズームインし、下にスクロールするとズームアウトします)。各高さが 20 ピクセルに変更され、幅も比例して変更されます。注意が必要なのは画像の最小縮小サイズであり、画面範囲の制限を超えて画像を拡大することはできません。同時に、エクスペリエンスを向上させるために、必ず e.stopPropagation() を追加し、ブラウザーがスクロールしないように false を返します。

2. Base64 画像をサポートするようにライトボックスのソース コードを変更します

ここで話すのは面倒かもしれませんが、まずネイティブ Lightbox を使用する場合の HTML コード形式の要件を見てみましょう。

コードをコピーします コードは次のとおりです:

画像 #1

これは最も単純なポップアップ画像です。画像 #1 をクリックすると、ライトボックスがポップアップして img/image.jpg の内容を表示します (要素 ;)。
次に、この状況を考えてみましょう。画像がサーバー上で Base64 でエンコードされている場合、画像はデータベースに保存されますか?これはそうあるべきです:

コードをコピーします コードは次のとおりです:

画像 #1

ここで問題が発生します。IE では href の長さに制限があり、href フィールドに大きな画像を入れることはできず、画像は去勢されてしまいます (上部のみが表示されます)。
もう 1 つのよくある状況として、最初に小さな画像を表示し、その小さな画像をクリックすると大きな画像が表示されます。

コードをコピーします コードは次のとおりです:

重複する Base64 データが 2 つあり、どちらもサーバーから送信されるため、時間と帯域幅が大量に消費されます。
そこで、必要に応じてコードを変更しました。Lightbox.prototype.start = function($link) {...} のサブ関数 addToAlbum:

を変更します。

コードをコピーします コードは次のとおりです:

関数 addToAlbum($link) {
self.album.push({
// リンク: $link.attr('href'),
リンク: $link.children().attr("src"),
タイトル: $link.attr('データタイトル') || $link.attr('タイトル')
});
}

コメントアウトした部分はオリジナル、$linkは前のHTMLコードのaタグ、変更後のaddToAlbum関数の機能は、ポップアップ画像のsrcを設定する際に文字が取られなくなりました元の href から img タグのポップアップ src として取得しますが、 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