灯箱 MDB Pro组件

灯箱-Bootstrap 5和Material Design 2.0组件

MDB灯箱是在一个响应式图库中组合的一组图像。元素分组 缩略图网格,可以显示为幻灯片。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

灯箱的基本示例,具有最常用的自举网格。


图像优化

为了确保页面的正常性能,建议包括以下内容的缩略图 src属性中的图像。然后在 data-mdb-img 属性将路径添加到具有更高分辨率的图像。如果 省略了 data-mdb-img 属性,灯箱将显示与 缩小的尺寸。


阴影和圆角

您可以通过添加来改善图像的外观 阴影圆角


不同大小

加载的图像可以具有任何纵横比。它们的大小将自动调整为 打开灯箱的窗口。


缩放等级

data-mdb-zoom-level 属性可让您定义单个缩放的大小 放大/缩小。


残影

通过将 lightbox-disabled 类添加到任何图像,您可以将其从您的图像中排除 灯箱。在下面的示例中,第三张图像已被禁用。


字幕

可以使用 data-mdb-caption 属性添加图像标题。如果不是 设置后,数据取自 alt 属性。当您要禁用字幕时, 将 data-mdb-caption 保留为空。


外部通道

灯箱可以通过JavaScript成功操作。有许多公共方法 可用,例如 open slide zoomIn zoomOut close 。所有内容均在“ API”标签中进行了描述。

灯箱 - API


用法

通过数据属性


        <div class="lightbox" data-mdb-zoom-level="0.5">
          <img
            src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
            data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp"
            alt="Lightbox image 1"
            class="w-100"
          />
        </div>
      

通过JavaScript


      const lightbox = document.getElementById('lightbox');
      const instance = mdb.Lightbox.getInstance(lightbox);
      instance.open();
    

通过jQuery

注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加到项目中。

 $('#lightbox').lightbox('open'); 

选件

可以通过数据属性,JavaScript或jQuery传递选项。对于数据属性,附加 选项名称为 data-mdb-,就像我n data-mdb-zoom-level="". 的 img caption 属性应直接固定到 缩略图,而不是灯箱包装元素。

Name Type Default Description
zoomLevel Number / String 1 Defines zoom level while zooming in or out.
fontAwesome String 'free' Defines version of Font Awesome library. Available options are 'free' and 'pro'.
img String Defines regular image to load when gallery is open. If not set, the value of src attribute is taken.
caption String Defines caption of the image. If not set, the value of alt attribute is taken.

方法

Name Parameters Description Example
open target Opens the gallery and activates image set by the target key. Default is the first image. instance.open(1)
slide target Slides an image in the gallery. Available options: left, right, first, last. Dafault is right direction. instance.slide('last')
zoomIn Zooms in active image by one level. instance.zoomIn()
zoomOut Zooms out active image by one level. instance.zoomOut()
toggleFullscreen Toggles fullscreen. instance.toggleFullscreen()
reset Resets changed parameters such as position, zoom or fullscreen. instance.reset()
close Closes the gallery. instance.close()
dispose Removes the mdb.Lightbox instance. instance.dispose()
getInstance element Static method which allows to get the lightbox instance associated with a DOM element. mdb.Lightbox.getInstance(element)

      const lightbox = document.getElementById('lightbox');
      const instance = mdb.Lightbox.getInstance(lightbox);
      instance.open(1);
    

大事记

Name Description
open.mdb.lightbox Emitted when a lightbox has been toggled.
opened.mdb.lightbox Emitted when a lightbox is opened.
slide.mdb.lightbox Emitted when a lightbox has been slided.
slided.mdb.lightbox Emitted after an image slide.
zoomIn.mdb.lightbox Emitted when an image has been zoom in.
zoomedIn.mdb.lightbox Emitted after an image is zoomed in.
zoomOut.mdb.lightbox Emitted when an image has been zoom out.
zoomedOut.mdb.lightbox Emitted after an image is zoomed out.
close.mdb.lightbox Emitted when a lightbox has been toggled.
closed.mdb.lightbox Emitted when a lightbox is closed.

        window.addEventListener('opened.mdb.lightbox', () => alert('Lightbox opened'));
      

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


      import { Lightbox } from 'mdb-ui-kit';