描述
Lightbox小部件实现了一个常见的界面约定,通过单击图像,可以在页面上的弹出框中以更大的尺寸查看它们。此外,相关图像被分组,以便在弹出窗口内滚动。IPS4的lightbox还支持内置评论。
例子
@todo
使用
lightbox可以在单个图像上初始化,简单如下:
< imgsrc=“http://url/to/image”data-ipsLightbox>
然而,它可能需要额外的功能。一种常见的做法是链接到一个大的图像,但在页面上显示一个小的拇指图像。在这种情况下,lightbox是在链接上初始化的:
<一个href=“http://url/to/image”data-ipsLightbox> < imgsrc=“http://url/to/thumb”> < / >
在上面的两个例子中,lightbox中都会显示一个图像。还可以将图像分组在一起,例如在相册中,或针对单个内容项的一组图像。在这种情况下,您应该初始化一个lightbox所有,并包括集团选项之间应该是一致的:
< a href = " http://url/to/image1 " data-ipsLightbox data-ipsLightbox-group =“例子”> < img src = " http://url/to/thumb1 " > < / > < a href = " http://url/to/image2 " data-ipsLightbox data-ipsLightbox-group =“例子”> < img src = " http://url/to/thumb2 " > < / > < a href = " http://url/to/image3 " data-ipsLightbox data-ipsLightbox-group =“例子”> < imgsrc = " http://url/to/thumb3 " > < / >
选项
集团
(字符串;可选)
如果提供,该小部件将在lightbox中显示来自同一组的其他图像。
fullURL
(字符串;可选)
默认情况下,完整大小的图像将从href属性一个标签。如果提供了此选项,则将从此URL加载完整大小的图像。
类名称
(字符串;可选的;默认的ipsLightbox)
允许您提供一个classname前缀,该前缀将在构建lightbox UI时使用,从而允许显示自定义UI。
预加载
(布尔;可选的;默认的真正的)
确定在打开lightbox时是否应该预加载lightbox中的图像,其设计目的是减少用户在滚动图像时的等待时间。
由ips.ui.lightbox触发的事件
lightboxImageShown
当灯箱显示新图像时触发。
事件数据:
- 图像
- 初步的
引用该图像的小部件元素(如果链接启动了lightbox,可能与imageElem不同) - imageElem
引用实际的图像元素 - largeImage
URL到完整尺寸的图像 - originalImage之下
指向页面上已经存在的图像的URL(例如缩略图) - 元
图像的元信息(如果有的话)
- 初步的
- triggerElem
的小部件元素的引用最初打开灯箱,可能是也可能不是正在查看的图像。
报告指南