jQueryで画像表示プラグインを使用する方法

この記事では主に jQuery 画像表示プラグイン Magnify の開発の詳細な分析について説明します。必要な友人は参考にしてください。

前書き

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

Github: https://github.com/nzbin/magnify

Website: https://nzbin.github.io/magnify

開発ノート

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

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

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

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

デモ

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

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

主な機能

Magnify の機能は Windows フォト ビューアーを参照することができ、基本的に実現できるすべての機能を完了します。

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

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

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

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

3. モーダルウィンドウの最大化

開発の初期段階ではポップアップウィンドウの最大化に加えて、最小化機能も設計されましたが、少し味気ない感じがしたため、まだ開発されていません。まだ追加されました。

4. 画像のズーム

はマウスホイール、ボタン、キーボードなどで操作できます。

5. 画像の回転

現在の画像回転機能はありません次のバージョンの IE9 コードのサポートが追加されました。

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

Magnify と Windows Photo Viewer のキーは同じです

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

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

使用方法

Magnify の使用方法は、他のほとんどのライトボックス プラグインの使用方法と変わりません。他のプラグインの使用に慣れている場合は、Magnify の使用に何の障害もありません。

1.参照が必要なファイル

<link href="/path/to/magnify.css" rel="external nofollow" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

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

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">

2.HTML構造

Magnify 默认使用以下结构，这样的结构可以做兼容处理，也是大多数 lightbox 使用的结构。

<a data-magnify="gallery" href="big-1.jpg" rel="external nofollow" >
 <img  src="/static/imghwm/default1.png"  data-src="small-1.jpg"  class="lazy"   alt="jQueryで画像表示プラグインを使用する方法" >
</a>
<a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" >
 <img  src="/static/imghwm/default1.png"  data-src="small-2.jpg"  class="lazy"   alt="jQueryで画像表示プラグインを使用する方法" >
</a>
<a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" >
 <img  src="/static/imghwm/default1.png"  data-src="small-3.jpg"  class="lazy"   alt="jQueryで画像表示プラグインを使用する方法" >
</a>

也可以使用下面更简洁的结构

<img  src="/static/imghwm/default1.png"  data-src="big-1.jpg"  class="lazy"  data-magnify="gallery"   alt="jQueryで画像表示プラグインを使用する方法" >
<img  src="/static/imghwm/default1.png"  data-src="big-2.jpg"  class="lazy"  data-magnify="gallery"   alt="jQueryで画像表示プラグインを使用する方法" >
<img  src="/static/imghwm/default1.png"  data-src="big-3.jpg"  class="lazy"  data-magnify="gallery"   alt="jQueryで画像表示プラグインを使用する方法" >

Magnify 的 HTML 结构包含以下几个选项

添加 src 属性可以链接到大图。如果在 <a></a> 标签中使用，它会覆盖 href 属性的值。添加 data-caption 属性可以显示标题。如果你不使用这个属性，插件会显示 URL 中的图片名。添加 data-group 属性可以对图片分组。 3.初始化插件

如果在 HTML 中添加 data-magnify 属性，插件会自动初始化。

手动初始化插件的方法和所有 jQuery 插件一样：

$('[data-magnify=gallery]').magnify(options);

参数配置

options = {
  draggable: true,
  resizable: true,
  movable: true,
  keyboard: true,
  title: true,
  modalWidth: 320,
  modalHeight: 320,
  fixedContent: true,
  fixedModalSize: false,
  initMaximized: false,
  gapThreshold: 0.02,
  ratioThreshold: 0.1,
  minRatio: 0.1,
  maxRatio: 16,
  headToolbar: [
   'maximize',
   'close'
  ],
  footToolbar: [
   'zoomIn',
   'zoomOut',
   'prev',
   'fullscreen',
   'next',
   'actualSize',
   'rotateRight'
  ],
  icons: {
   maximize: 'fa fa-window-maximize',
   close: 'fa fa-close',
   zoomIn: 'fa fa-search-plus',
   zoomOut: 'fa fa-search-minus',
   prev: 'fa fa-arrow-left',
   next: 'fa fa-arrow-right',
   fullscreen: 'fa fa-photo',
   actualSize: 'fa fa-arrows-alt',
   rotateLeft: 'fa fa-rotate-left',
   rotateRight: 'fa fa-rotate-right'
  }
}

关于插件参数的具体含义，我就不在此复制黏贴了，请大家参考 官方文档 的详细说明。如有问题，可以在此留言。

自定义样式

因为插件的样式比较简单，所以修改起来也非常容易。除了 Windows 照片查看器，QQ 的图片查看器也非常的高大上。我们只要简单修改就可以实现 QQ 图片查看器的效果，但是部分功能比如缩略图还没有实现。以下是实时演示：

面对这样的图片查看器足以令人心旷神怡~

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue框架中有关goods组件开发

JS运动特效

MVVM框架如何解析双向绑定

JS中链式运动（详细教程）

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