适用于手机和台式机的触摸友好图像灯箱

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选项

<表格>

属性

默认

类型

描述

来源收件人

href公司

字符串

用于大型图像的属性

覆盖

真实的

布尔

是否显示覆盖

覆盖不透明度

0.7

浮子

覆盖的不透明度

旋转器

真实的

布尔

是否显示微调器

导航

真实的

布尔

是否显示箭头导航

导航文本

['←','→']

阵列

用于导航箭头的文本或html

标题

真实的

布尔

显示字幕(如果可用)

标题选择器

'img'

字符串或函数

设置标题所在的元素。将A-Tag本身设置为“self”,或者使用返回元素的回调

标题类型

'属性'

字符串

如何获取标题。您可以在属性、数据或文本之间进行选择

标题数据

所有权

字符串

从给定属性中获取标题

标题位置

“底部”

字符串

标题的位置。选项有顶部、底部或外部(请注意,外部可以在可见视口之外!)

字幕延迟

0个

整数

在字幕显示之前添加延迟(以毫秒为单位)

标题类别

“”

字符串

在sl标题中添加一个附加类

关闭

真实的

布尔

是否显示关闭按钮

关闭文本

'×'

字符串

关闭按钮的文本或html

刷卡关闭

真实的

布尔

向上或向下滑动以关闭多媒体资料

显示计数器

真实的

布尔

是否显示当前图像索引

文件扩展名

'png|jpg|jpeg|gif'

regexp或false

插件使用的文件扩展名列表,或false以禁用检查

动画速度

250个

整数

幻灯片动画需要多长时间

动画幻灯片

真实的

布尔

是否可以在新照片中滑动,禁用以淡出

预加载

真实的

布尔

允许预加载下一个和上一个图像

启用键盘

真实的

布尔

允许键盘箭头导航并使用ESC键关闭

环路

真实的

布尔

启用图像循环

相对湿度

虚假的

混合的

默认情况下,false表示灯箱会自动按rel进行分组。此选项可以用作Simplelightbox的锚rel替代方案。它允许用户将库中的任何元素组合组合在一起,或者覆盖现有的rel,使元素不分组在一起。注意:该值也可以设置为“nofollow”以禁用分组

文档关闭

真实的

布尔

单击外部时关闭灯箱

刷卡容忍度

50个

整数

在下一张或上一张图像之前必须滑动的像素数

类名称:

'简单灯箱'

字符串

将类添加到灯箱的包装中

宽度比例:

0.8

浮子

图像宽度与屏幕宽度之比

高度比:

0.9

浮子

图像高度与屏幕高度的比率

缩放图像比例:

虚假的

<标准差

>布尔

将图像放大到定义的比例大小

禁用右键单击

虚假的

布尔

是否禁用右键单击图像

禁用滚动

真实的

布尔

如果灯箱打开,则停止滚动页面

alert错误

真实的

布尔

如果找不到图像,则显示警报。如果false错误将被忽略

警报错误消息

'找不到图像,将加载下一个图像'

字符串

如果找不到图像,则显示消息

附加Html

虚假的

字符串

在每张图片中显示额外的HTML。用于水印等。如果为false,则不添加任何内容

下载

虚假的

字符串

图片下方的下载链接文本。如果为false,则不添加任何内容

历史

真实的

布尔

启用历史后台关闭灯箱,而不是重新加载页面

节流间隔

0个

整数

幻灯片之间的等待时间

双击缩放

2个

整数

双击图像时的缩放级别

最大缩放

10个

整数

收缩时的最大缩放级别

html类

'有灯箱'

字符串或false

如果lightbox处于打开状态,则将类添加到html元素中。如果为空或为false,则不设置类

rtl公司

虚假的

布尔

从右向左改变方向

固定类别

'sl固定'

字符串

具有此类的元素是固定的,并在lightbox打开时获得正确的填充

音量控制器速度

300

整数

淡入淡出的持续时间(以毫秒为单位)。也用于字幕淡入/淡出。如果小于100,则应与animationSlide:false一起使用

unique图像

真实的

布尔

是否取消图像的资格

焦点

真实的

布尔

将灯箱聚焦到打开状态以启用选项卡控制

滚动缩放

真实的

布尔

可以通过鼠标滚轮滚动缩放图像

滚动缩放因子

真实的

布尔

通过鼠标滚轮滚动时的缩放程度

事件

<表格>

名称

描述

显示简易照明盒

灯箱打开前点火

shown.simple灯箱

灯箱打开后起火

关闭简易照明盒

灯箱关闭前点火

封闭式简易灯箱

灯箱关闭后起火

更改简易照明盒

在图像更改之前激发

已更改。简单灯箱

更改图像后激发

下一个简单灯箱

在下一个图像到达之前激发

nextOne.simpelightbox

下一张图片到达后起火

上一个简易工具箱

在上一个图像到达之前激发

上一篇Done.simple灯箱

上一张图像到达后起火

nextImageLoaded.简单灯箱

加载下一个映像后激发(如果预加载已激活)

prevImageLoaded.简单灯箱

加载上一个映像后激发(如果预加载已激活)

错误。简单框

图像加载错误时激发

实例

公共方法

<表格>

名称

描述

打开

打开具有给定元素的灯箱

打开位置

将灯箱打开到特定位置

关闭

关闭当前打开的和灯箱

下一个

转到下一个图像

上一个

转到上一张图片

破坏

销毁灯箱的实例

刷新

销毁并重新初始化灯箱,例如Ajax调用或dom操作后需要

获取邻居数据

获取一些有用的灯箱数据

实例

一页上有多个灯箱

如果你给它们不同的选择器,你可以在一个页面上有多个灯箱。下面是一个小例子:

自定义

您可以通过更改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博士

适用于台式机平板电脑和移动设备的网站的最佳尺寸

Windows 10 中的触摸屏友好文件选择器

适用于iOS网络应用的多个“苹果触摸启动图像”分辨率(尤其适用于iPad)?

在带有触摸屏的 Windows 8 上检测 Chrome 中的触摸事件

适用于 Iphone 6 和 Iphone 6 plus 的媒体 CSS

获得手机屏幕相关参数