ライトボックスでホイールズームと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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

<🎜>：庭を育てる - 完全な突然変異ガイド

3週間前 By DDD

<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

KB5055612を修正する方法Windows 10にインストールできませんか？

3週間前 By DDD

ブループリンス：地下室への行き方

1 か月前 By DDD

Nordhold：Fusion System、説明

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル

1664

14

CakePHP チュートリアル

1423

52

Laravel チュートリアル

1321

25

PHP チュートリアル

1269

29

C# チュートリアル

1249

24

もっと見る