jQuery Magnifyプラグインの使い方を詳しく解説

今回は、jQuery Magnify プラグインの使用方法について詳しく説明します。jQuery Magnify プラグインを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

いくつかの特別なビジネス ニーズのため、1 か月以上休眠して考えた後、Windows を実装するこの jQuery 画像ビューア プラグイン Magnify を開発しました。 モーダル ウィンドウのドラッグ、サイズ変更、最大化、画像のズーム、回転、パン、キーボード コントロールなど、フォト ビューアーのすべての機能。プラグインのスタイルはすべて基本的なものです css はカスタマイズが非常に簡単で、好みのスタイルに簡単に変更できます。 React と Vue は今後リリースされる予定です。 プラグインの関連バージョン。この記事ではプラグインの特徴や使い方を中心に紹介し、プラグイン開発の詳細については以降の具体的な記事で解説していきます。

最近は仕事が忙しくて、ほぼ毎日夜の10時に帰宅してからプラグインを書き始めて、寝るのはもう0時を過ぎてしまい、体力的にも疲れ果ててしまいました。精神的に。該当するプラグインが見つからなかったので、マウスを中心とした画像の拡大縮小、ポップアップウィンドウのサイズ変更時の画像の移動制限、ポップアップウィンドウのサイズ変更後の拡大縮小やパンなど、独自に知恵を絞って考えました。プラグインの開発中に最も厄介なのは細部であり、ほとんどの時間は 1 つの機能の修復に費やされます。 バグ。

また、プラグインの開発で最も難しいのは、機能の実装ではなく、プラグインをどのように設計するか、そしてプラグインをいかに使いやすくするかということです。プラグインの設計方法はこの記事の焦点では​​ありません。プラグインの設計アイデアを紹介する特別な記事を後で書きます。

プラグインのほぼすべてのコードはポップアップ ウィンドウまたは画像の幅、高さ、左端、および上端を調整するため、互換性の問題は大きくありません。主に IE 9 以前で必要となるのは 2D 回転の問題です。これを実現するにはフィルターを使用します。スタイルの調整を容易にするために、多くの相対位置の計算が行われます。

Magnify はファイル分離方式で記述され、npm プラグインを使用してパッケージ化されます。新しい構文や一般的なパッケージ化ツールは使用しません。 npm ツールの使用は、プロジェクト開発とリリースのためのパッケージ化におけるトレンドになっています。

デモ

URL をクリックしてサンプルを表示したくない場合は、以下の CodePen を使用してプラグイン効果を表示できます。ただし、ウィンドウのサイズを除き、2 つの方法に違いはありません:

ネットワーク速度などの理由で CodePen を開けない場合は、以下の画像デモをご覧ください。

主な機能

Magnify の機能は、基本的に実現できるすべての機能を備えた Windows フォト ビューアーと比較できます。

1. モーダルウィンドウのドラッグ

画像サイズが表示領域より大きくない場合は、ポップアップ ウィンドウを画像表示領域内でドラッグすることもできます。 QQピクチャビューアと同様の操作方法です。

2. モーダルウィンドウのサイズ変更

現在のサイズ変更には小さなバグがありますが、全体的な使用には影響しません。

3. モーダルウィンドウを最大化します

開発初期にはポップアップウィンドウの最大化の他に最小化機能も設計されていましたが、少々野暮ったい感じがしたため、現在は追加されていません。

4. 画像ズーム

マウスホイール、ボタン、キーボードなどで操作可能

5. 画像の回転

現在の画像回転機能には、IE9 より前のバージョンをサポートするコードが追加されていません。

6.キーボードコントロール

拡大と Windows フォト ビューアーのボタンは同じです

右に回転 7. 全画面表示 ← 上一张 → 下一张 + 放大 - 缩小 ctrl + alt + 0 实际尺寸 ctrl + , 向左旋转 ctrl + .

Magnify の全画面表示は基本的な表示機能のみを実装しており、スライドの自動回転はまだ実装されていません。全画面環境でキーボードを使用して画像を制御します。

使い方

Magnify の使用方法は、他のほとんどのライトボックス プラグインの使用方法と何ら変わりません。

他のプラグインの使用に慣れている場合は、Magnify の使用に何の障害もありません。

1. 引用

<link>
<script></script>
<script></script>

が必要な文書 Magnify はデフォルトで font-awesome アイコンを使用するため、font-awesome CSS を参照する必要があります 書類。他のアイコンを使用したい場合は、オプションのアイコンパラメータを変更できます。新しいバージョンでは、カスタム フォント アイコン ファイルを追加するか、svg を使用する可能性があります。 アイコン。

りー

2.HTML構造

Magnify はデフォルトで次の構造を使用します。この構造は互換性のために処理でき、ほとんどのライトボックスで使用される構造でもあります。

りー

以下のより単純な構造を使用することもできます

<link>

Magnify の HTML 構造には次のオプションが含まれています

src 属性可以链接到大图。如果在 <a></a> 标签中使用，它会覆盖 href 属性的值。添加 data-caption 属性可以显示标题。如果你不使用这个属性，插件会显示 URL 中的图片名。添加 data-group 属性をグループ画像に追加します。 3.プラグインの初期化

HTMLにdata-magnify属性を追加すると、プラグインは自動的に初期化されます。

プラグインを手動で初期化する方法は、すべての jQuery プラグインと同じです:

<a>
 <img  src="/static/imghwm/default1.png" data-src="small-1.jpg" class="lazy" alt="jQuery Magnifyプラグインの使い方を詳しく解説" >
</a>
<a>
 <img  src="/static/imghwm/default1.png" data-src="small-2.jpg" class="lazy" alt="jQuery Magnifyプラグインの使い方を詳しく解説" >
</a>
<a>
 <img  src="/static/imghwm/default1.png" data-src="small-3.jpg" class="lazy" alt="jQuery Magnifyプラグインの使い方を詳しく解説" >
</a>

パラメータ設定

<img  src="/static/imghwm/default1.png" data-src="big-1.jpg" class="lazy" alt="jQuery Magnifyプラグインの使い方を詳しく解説" >
<img  src="/static/imghwm/default1.png" data-src="big-2.jpg" class="lazy" alt="jQuery Magnifyプラグインの使い方を詳しく解説" >
<img  src="/static/imghwm/default1.png" data-src="big-3.jpg" class="lazy" alt="jQuery Magnifyプラグインの使い方を詳しく解説" >

プラグインパラメータの具体的な意味については、ここではコピー＆ペーストしません。詳細な手順については、公式ドキュメントを参照してください。ご質問がある場合は、ここにメッセージを残してください。

カスタムスタイル

プラグインのスタイルは比較的シンプルなので、変更も非常に簡単です。 Windows フォト ビューアに加えて、QQ の画像ビューアも非常に高度です。簡単な修正で QQ 画像ビューアの効果を実現できますが、サムネイル などの一部の機能はまだ実装されていません。こちらがライブデモです:

こういう画像ビューアと向き合うと新鮮ですね〜

まとめ

現時点では、プラグイン全体は完成していますが、特にモバイル端末のサポートなど、細部にはまだ修正や追加が必要な部分が多くあります。 プロジェクトの最新情報をお待ちください。プラグインの導入については詳しく説明しませんが、バグを見つけた場合は、 より良い提案がある場合は、GitHub で質問するか、ここにメッセージを残してください。あなたのサポートが、前進するための最大の動機です。このプラグインが役に立った場合、またはプロジェクトでこのプラグインを使用している場合は、メッセージを残してお知らせください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSを使用して60秒後に確認コードを再送信する関数

JSはモバイル側で無制限のロードとページング機能を実現します

以上がjQuery Magnifyプラグインの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。