跳转到内容

ips.ui.lightbox

描述

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
    的小部件元素的引用最初打开灯箱,可能是也可能不是正在查看的图像。

报告指南


×
×
  • 创建新的…
Baidu