适用于手机和台式机的触摸友好图像灯箱
Posted
tags:
中文标题:适用于手机和台式机的触摸友好图像灯箱 原文标题:Touch-friendly image lightbox for mobile and desktop 项目评级:Star:980 Fork:158 下载地址:https://github.com/andreknieriem/simplelightbox 详情介绍简易灯箱
适用于手机和台式机的触摸友好图像灯箱
特征
安装
在那之后,在你的页面中包括简单的lightbox(.min).css和简单的lightbox(.miin).js。
用法
独立插件
使用独立变体时(simple-lightbox(.min).js
)
与jQuery兼容(simple-lightbox.jquery(.min).js
)的变体与以前一样工作(v1.x):
使用Webpack/Browserify/Packle等。。。
选择要导入或需要的模块文件。
巴别塔转换模块
无Babel的普通ES模块
加成
对于默认设置,您只需要指向图像的链接。
<div class="gallery">
<a href="images/image1.jpg"><img src="images/thumbs/thumb1.jpg" alt="" title=""/></a>
<a href="images/image2.jpg"><img src="images/thumbs/thumb2.jpg" alt="" title="Beautiful Image"/></a>
</div>
A-Tags内部的标记可以是您想要的任何内容。在这个例子中,大图像的缩略图。默认情况下,“title”标记用于显示标题。
要获得完整的示例,只需查看演示文件夹即可。
JavaScript选项
<表格>
属性 默认 类型 描述
<标准差
>布尔
表格>
事件
<表格>
名称 描述
表格>
实例
公共方法
<表格>
名称 描述
表格>
实例
一页上有多个灯箱
如果你给它们不同的选择器,你可以在一个页面上有多个灯箱。下面是一个小例子:
自定义
您可以通过更改Simplelightbox.css中的样式来自定义Simplelightbox。
如果您正在使用SASS,您可以使用以下变量自定义Simplelightbox
贡献
大口喝
运行gulp watch
,可以连续监视src/simple-lightbox.js和src/simple-lightbox.scss。这两个文件将分别编译为dist/simple-lightbox.js和dist/simple-lightbox.css。打开dist/in
在浏览器中使用dex.html来检查您的更改。。。
建筑物
只需调用gulp build
即可在dist中创建所有文件和变体!
变更日志
2.14.0-合并#309-感谢@romain25,修复#305-如果覆盖选项被禁用,则removeChild错误。
2.13.0-修复#281加载时关闭灯箱,#311字幕不工作,#307第二次打开时不使用下载选项,#310-控制台中的被动滚动事件默认警告。
2.12.1-固定#292。下载链接出错
2.12.0-合并#283。正在修复className空白错误。感谢@MVogg。合并#287,由于@majid-1xinternet修复了#286。添加了下载选项。感谢@cnotin
2.11.0-增加了在标题#280中添加多个类的可能性,增加了更好的选择器的可能性,再次修复了#62,修复了#268灯箱不以滚动为中心
2.10.4-修复了#277-为滚动事件添加被动侦听器,#276错误z索引
2.10.3-修复了#264-修复了滚动页面时错误的鼠标缩放
2.10.2-修复了258号叠加不透明度闪烁的问题。为此,将样式选项captionOpacity移动到js插件
2.10.1-修复了255张快速切换照片和256张隐藏循环上的后退和下一步按钮的问题:错误
2.10.0-修复#254-导航按钮消失并添加新方法getLighborxData,以便为#251获得一些有用的数据
2.9.0-增加了鼠标滚动功能,新增了mousescroll和mouseScrllFactor选项
2.8.1-固定#250-如果图像加载失败,则不关闭#249禁用Mac上的滚动现在工作
2.8.0-修复了#235-遗留文件太大的问题#236坏的package.json,并添加了对被动事件侦听器的支持#240。感谢@coderars提供的问题和一些代码
2.7.3-已修复#232-sourceAttr不工作。感谢@bivisual发布此问题
2.7.2-已修复#231-disableRightClick没有。感谢@DrMint的修复
2.7.1-修复了#228-在firefox中没有鼠标滑动的问题。感谢@DrMint的修复
2.7.0-合并了#206,修复了#205。感谢@ocean90的创意和公关
2.6.0-为#156添加了新选项uniqueImages,为#190添加了焦点,并修复了动画期间关闭的200号错误
2.5.0-添加了新选项fadeSpeed。这将修复#147和#186
2.4.1-添加了新的simple-lightbox.legacy.js,支持IE 11。修复了2.4.0中的#175、#178、#183和其他一些错误
2.4.0-为固定元素类#195添加了新选项
2.3.0-ESM模块的合并功能。感谢Dmytro Hrynevych#180
2.2.2-固定负载直接闭合错误#182
2.2.1-修复了174号错误和ES模块问题
2.2.0-增加了对ES模块的支持,这要归功于@seralichtenahn的PR。这修复了#164
2.1.5-修复了在移动设备上平移时使用jQuery打开方法的169号错误和171号错误
2.1.4-修复了触摸设备上的168双击缩放错误
2.1.3-修复了destroy方法#167中的错误和navText#165中html的错误
2.1.2-修复了额外的Html错误#163
2.1.1-修复了字幕错误#162
2.1.0-增加了rel分组功能#16和rtl支持#161
2.0.0-完全重写。现在使用现代ES6 javascript,而不需要jQuery。无论如何都可以使用jQuery。开发人员可以将gullow与babel一起使用来做出贡献。感谢Mtillmann#129的实施
1.17.3-修复了新的chrome被动错误#155
1.17.2-固定标题在双击#139时消失,并添加了更好的关闭符号#133
1.17.1-在fileExt列表#135中添加了webp,在isValidLink函数#134中删除了硬编码的a标记
1.17.0-合并的拉取请求#132。增加了双击缩放桌面浏览器-感谢coderkan
1.16.3-合并的拉取请求#126,#127-感谢jieter
1.16.2-添加了功能#124-如果lightbox打开,则向html元素添加一个类
1.16.1-修复了滚动#123时的缩放偏移错误
1.16.0-用于触摸设备的Pinch to Zoom功能,具有新选项doubleTapZoom和maxZoom#79
1.15.1-合并的拉取请求#113、#114、#115-感谢RaphaelHaettich和celsius jochen
1.15.0-合并了拉取请求#111,修复了#101,并增加了在负载#74时关闭灯箱的可能性
1.14.0-合并的拉取请求#107和#108。感谢拉斐尔·海蒂奇
1.13.0-添加了#92功能,并合并了#98和#99拉取请求。感谢拉斐尔·海蒂奇
1.12.2-89号错误修复
1.12.1-修复#88、#87的错误,并删除绑定/解除绑定#84
1.12.0-新选项标题Class#81,针对#82的错误修复
1.11.1-合并的拉取请求#76。多亏了walterebert,增加了对带有参数和文件扩展名检查的图像的支持#59
1.11.0-图像src的新选项。例如数据属性#70
1.10.7-增加了引导程序兼容性#69
1.10.6-合并的拉取请求#65。感谢mstaniuk
1.10.5-合并的拉取请求#60和#61。多亏了斯拉万加
1.10.4-58号漏洞修复
1.10.3-合并的拉取请求#55、#56和#57。多亏了卡兰德
1.10.2-对齐导航和关闭按钮#51,修复图像错误错误#52
1.10.1-增加了对jQuery 3.x#50的支持
1.10.0-实现了功能请求#48,返回历史记录,一些错误修复和代码样式
1.9.0-实现了功能请求#16,添加了用于分组图像的rel选项
1.
.8.6-实现了功能请求#46,添加了刷新方法
1.8.5-已执行的功能请求#44
1.8.4-修复了#41的错误,并添加了#40图像中额外html的选项
1.8.3-针对#38的错误修复和针对循环错误选项的其他小修复
1.8.2-对#33进行了更好的错误修复,最终修复了一页中多个灯箱的缓慢问题!
1.8.1-修复#31、#32和#33的错误
1.8.0-Geoffrey Crofte带来的新API事件(改为open to show)和函数open()中的小修复以及其他一些小错误修复
1.7.2-25号和27号漏洞修复
1.7.1-使用新选项alertError和合并的pull请求#23修复了von#22的错误
1.7.0-增加了对照片之间淡入淡出的支持,修复了单图像导航的Bugfix,增加了字幕延迟选项
1.6.0-字幕位置选项。如果循环为false并且位置为第一个或最后一个,则禁用上一个或下一个箭头。
1.5.1-在一个页面上修复多个灯箱
1.5.0-添加了禁用右键单击和滚动的选项,更改了默认的上一个和下一个按钮文本
1.4.6-fileExt的选项现在可以为false,以启用example.com/pic/200/1000等图片
1.4.5-Bugfix灯箱打开在移动设备上不起作用
1.4.4-Bugfix无拖动&;插入FF,更改默认关闭文本,仅在灯箱打开时输出数据
1.4.3-将微调器的z索引修正为较低,添加了sass文件
1.4.2-问题#2的错误修复-鼠标离开窗口时不会触发Drop事件
1.4.1-整个标题选择器被重写。现在可以选择一个元素并获取其文本、使用数据或属性
1.4.0-标题属性现在可以是您想要的内容或数据标题。修复了一些小问题
1.3.1-错误修复:如果灯箱关闭,则禁用键盘控制
1.3.0-增加了当前索引指示器/计数器
1.2.0-添加了标题属性选项(标题或数据标题)
1.1.2-修复循环图像的错误
1.1.1-修复了加载指示器的错误,并删除了一个日志事件
1.1.0-增加了灯箱包装和宽高比的类名
1.0.0-首次发布
著者
安德烈·里纳斯-Github
贡献者
马丁·蒂尔曼
尼奇维人
你好
比特星
杰弗里·克罗夫特-Github
Karl Anders-Github公司
拉斐尔·海蒂奇
塞拉芬·利希滕哈恩
Jochen Sengier-Github
德米特罗·赫里涅维奇
多米尼克·席林-Github
Mint博士
适用于iOS网络应用的多个“苹果触摸启动图像”分辨率(尤其适用于iPad)?
在带有触摸屏的 Windows 8 上检测 Chrome 中的触摸事件