wwwmgm8001:jQuery图片查看插件Magnify开发详解,jQuery实现等比例缩放大图片让大图片自适应页面布局

  其它,还有二个在线体验地方,当网址无法用时,笔者会把那句话从博客中去除。

jQuery图片查看插件Magnify开发详解

因为有个别特殊的事务要求,经过1个多月的蛰伏及思想,笔者付出了那款 jQuery
图片查看器插件 Magnify,它完毕了 Windows
照片查看器的保有机能,比如模态窗的拖拽、调整大小、最大化,图片的缩放、旋转,平移、键盘控制等。插件的体裁都以最基础的
css,定制非凡简单,能够轻松修改成温馨喜好的体制。随后会陆续揭橥 React 及
Vue
相关版本的插件。本文首要介绍插件的表征及运用格局,而至于插件开发的底细将会在以后的实际作品中验证。

Github:

Website: 

wwwmgm8001:jQuery图片查看插件Magnify开发详解,jQuery实现等比例缩放大图片让大图片自适应页面布局。付出小记

由于近来干活无暇,大致每日皆以夜晚十点到家,然后开端编写制定插件,睡觉时已过凌晨,近期身心俱疲。因为从没找到有关的插件,所以广大题材都是冥思遐想独立思想,比如以鼠标为主干缩放图片、改变弹窗大小时对图片移动的限定、图片旋转之后的缩放、平移等题材,而支付插件最令人咳嗽的就是细节,甚至大部分时日是在修补单一功效的
bug 。

其它,开发插件的最大难度不是作用完结,而是什么统一筹划插件,怎样让插件的接纳更简便、更有益于。关于如何布置插件并不是本篇小说的重庆大学,小编会在后来专门写一篇介绍插件设计思想的文章。

插件全部的代码大约都以在调动弹窗或然图片的 width、height、left、top
,所以包容性难题非常小,主若是 2D 旋转难点,IE 9
以下供给运用滤镜完成。为了便利调全部制,在那之中有那3个针锋相对地点的预计。

Magnify 接纳了文件分其余法门编写,使用 npm
插件打包,并没有运用新语法,也没有行使今后风行的包装工具。使用 npm
工具已经是种类开发打包公布的2个大方向。

演示

如果您不想点开网址查看示例的话,可以经过上面包车型大巴 CodePen
查看插件效果,除了视窗的轻重缓急之外,两种艺术没有别的分化:

若是你的网速和其他原因不能够开拓 CodePen 的话,能够查看上边包车型客车图样演示。

最主要成效

Magnify 的功效能够参考 Windows
照片查看器,基本完毕了足以兑现的保有功效。

1.模态窗拖拽

若是图片尺寸不超过体现区域,通过图片展现区域也得以拖拽弹窗。那和 QQ
图片查看器的操作格局是均等的。

wwwmgm8001 1

2.模态窗调整大小

现阶段的调整大小存在一些 bug,但不影响总体的选拔。

wwwmgm8001 2

3.模态窗最大化

而外弹窗最大化,开发初期也筹划了最小化的成效,但感觉有个别鸡肋,所以一时并未增进。

wwwmgm8001 3

4.图纸缩放

能够由此鼠标滚轮、按钮、键盘等操作

wwwmgm8001 4

5.图片旋转

如今的图样旋转功效还未曾增长帮忙 IE9 以下版本的代码。

wwwmgm8001 5

6.键盘控制

Magnify 和 Windows 照片查看器的按键是平等的

上一张 下一张 + 放大 -wwwmgm8001:jQuery图片查看插件Magnify开发详解,jQuery实现等比例缩放大图片让大图片自适应页面布局。wwwmgm8001:jQuery图片查看插件Magnify开发详解,jQuery实现等比例缩放大图片让大图片自适应页面布局。 缩小 ctrl + alt + 0 实际尺寸
ctrl + , 向左旋转 ctrl + . 向右旋转 7.全屏展现

Magnify
的全屏显示只兑现了基本的显示效果,还未曾落到实处幻灯片自动轮播的成效。全屏环境下行使键盘控制图片。

行使方法

Magnify 的使用和其余超过二分之一 lightbox
插件的用法并不曾例外,若是你习惯了其他插件的采取,使用 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
文件。借使你想行使其余图标,能够修改 options 的 icons
参数。在此后的本子中,作者大概会增加定制的字体图标文件大概利用 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="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" >
 <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" >
 <img src="small-3.jpg">
</a>

也可以运用下边更不难的结构

<img data-magnify="gallery" data-src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" data-src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" data-src="big-3.jpg" src="small-3.jpg">

Magnify 的 HTML 结构蕴含以下多少个选用

添加 data-src 属性能够链接到大图。如若在 <a> 标签中使用,它会覆盖
href 属性的值。添加 data-caption
属性能够来得标题。要是你不应用这些性格,插件会议及展览示 UPRADOL 中的图片名。添加
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'
  }
}

关于插件参数的实际意思,笔者就不在此复制黏贴了,请大家参考 官方文档的事无巨细表明。如非凡,能够在此留言。

自定义样式

wwwmgm8001 6

因为插件的体制相比不难,所以修改起来也格外简单。除了 Windows
照片查看器,QQ 的图片查看器也要命的皇圣上。大家只要不难修改就足以兑现 QQ
图片查看器的效能,不过部分机能比如缩略图还未曾兑现。以下是实时演示:

直面这么的图样查看器足以让人热情洋溢~

总结

日前插件全体已经趋于完善,但依然有成都百货上千急需修改及拉长的底细,特别对运动端的支持,大家可以star
一下整日关怀项目标翻新动态。关于插件的介绍就不再赘言了,若是大家发现了
Bug
只怕有更好的建议,能够在GitHub中提问,也能够在此留言,大家的支撑是本身发展的最大引力!固然那款插件对您有赞助可能您在类型中使用了那款插件,欢迎留言告知!

因为有的优异的事务必要,经过3个多月的蛰伏及思维,作者付出了那款 jQuery
图片查看器插件 Magnify,它实…

$(function(){
$(“#demo2”).autoIMG();
});

课后作业标题

2.未知图片尺寸

  光做个查看器好像也没怎么看头,笔者苦思冥想想出了一个图形拾取器,PicturePicker,缩写为PicPicker。效率首借使翻开图片,然后能够把相中的图片拖到本人的包裹中,然后一键打包下载。

复制代码 代码如下:

总结

autoIMG能够长足对作品图片进行尺寸自适应,它使用浏览器获取图片文件头尺寸数据,无需等待图片加载成功。

  请从底下八个难题中专断行选购取一道题完成。

调用autoIMG插件方法相当简单:

  好吧,小编不假思索采取了第①题,然后把温馨的简历放在了图片查看器的图样中,真是机智啊。上面进入正题。

您大概感兴趣的篇章:

  • 据说jquery落成鼠标滚轮驱动的图形切换效果
  • JQuery完结鼠标滚轮滑动到页面节点
  • 依照jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用来新浪、空间、论坛
    )
  • jQuery达成鼠标滚轮动态改变样式或效益
  • jquery横向纵向鼠标滚轮全屏切换
  • jquery 图片预加载
    自动等比例缩放插件
  • 用jquery完结等比例缩放图片效果插件
  • jquery完成图片按比例缩放示例
  • JQuery
    图片延迟加载并等比缩放插件
  • jQuery图片预加载
    等比缩放达成代码
  • 据说jquery完毕图片相关操作(重绘、获取尺寸、调整大小、缩放)
  • jQuery达成的鼠标滚轮控制图片缩放功效实例

  @图表滑动框:根据图片数量总结滑动框长度,当所点击图片为当前可视区域最后或最前一个图片时,自动滑动突显越来越多图片。

autoIMG兼容:Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | …