移动访问友好的图像灯箱库 - Parvus.js
栏目分类:模态 / 弹出窗口   发布日期:2021-10-03   浏览次数:

一个可访问的、支持触摸的、用户友好的图像灯箱组件,用纯 JavaScript 编写。

特征:

  • 悬停时放大/缩小图像。

  • 图像加载指示器。

  • 滚动或滑动以关闭就像 Medium.com 的灯箱一样。

  • 有用的 API 方法和事件处理程序。

  • 图像计数器。

使用:

1. 您也可以使用 NPM 安装和下载软件包。

# NPM
$ npm i react-spinners-css

2. 添加对 Parvus JavaScript 和 CSS 文件的引用。

<link rel="stylesheet" href="dist/css/parvus.min.css" />
<script src="dist/js/parvus.min.js"></script>

3. 创建 Parvus.js 的新实例并传递如下选项:

const prvs = new parvus({
      // defaults
      selector: '.lightbox',
      gallerySelector: null,
      docClose: true,
      swipeClose: true,
      scrollClose: true,
      threshold: 100,
      backFocus: true,
      transitionDuration: 300,
      transitionTimingFunction: 'cubic-bezier(0.2, 0, 0.2, 1)',
      reducedTransitionDuration: 0.1,
      lightboxIndicatorIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>',
      previousButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="15 6 9 12 15 18" /></svg>',
      nextButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path stroke="none" d="M0 0h24v24H0z"/><polyline points="9 6 15 12 9 18" /></svg>',
      closeButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 6L6 18M6 6l12 12"/></svg>',
      lang: 'en',
      i18n: {
        en: {
          lightboxLabel: 'This is a dialog window which overlays the main content of the page. The modal shows the enlarged image. Pressing the Escape key will close the modal and bring you back to where you were on the page.',
          lightboxLoadingIndicatorLabel: 'Image loading',
          previousButtonLabel: 'Previous image',
          nextButtonLabel: 'Next image',
          closeButtonLabel: 'Close dialog window'
        }
      },
      fileTypes: /\.(png|jpe?g|webp|avif|svg)(\?.*)?$/i
});

4. 将图像灯箱应用于图像元素。就是这样。

<a href="full.jpg" class="image-lightbox" data-caption="Caption Here">
  <img src="thumb.jpg" alt="Image Alt" />
</a>
imageSelector = document.querySelector('.image-lightbox');
prvs.add(imageSelector);

5. 通过使用“data-group”属性或“gallerySelector”选项对图像进行分组来创建画廊灯箱。

<a href="1.jpg" class="lightbox" data-group="Berlin">
  <img src="1.jpg" alt="">
</a>
<a href="2.jpg" class="lightbox" data-group="Berlin">
  <img src="2.jpg" alt="">
</a>
<a href="3.jpg" class="lightbox" data-group="Kassel">
  <img src="3.jpg" alt="">
</a>

6、更多的API方法。

// 添加一个图像元素
prvs.add(element); 
 
// 移除一个图像元素
prvs.remove(element); 
 
// 打开灯箱
prvs.open(el); 
 
// 关闭灯箱
prvs.close(); 
 
// 销毁实例
prvs.destroy(destroy); 
 
// 检查是否打开
prvs.isOpen(); 
 
// 获取当前索引
prvs.currentIndex(); 
 
// 转到上一张图片
prvs.previous(); 
 
// 转到下一张图片
prvs.next(); 
 
// 选择一张幻灯片
prvs.select(index);

7. 绑定/解绑事件监听器。

// prvs.on(eventName, listener)
// prvs.off(eventName, listener)
prvs.on('open', listener);
prvs.on('close', listener);
prvs.on('destroy', listener);


官方网站:https://github.com/deoostfrees/Parvus

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库