视频/iframe/图库/内嵌内容灯箱库 – Tobii
栏目分类:模态 / 弹出窗口   发布日期:2021-09-02   浏览次数:

Tobii 是一个功能丰富、响应迅速、可访问、移动友好的灯箱库,它可以在模式弹出窗口中显示任何内容类型(HTML5/Youtube 视频、iframe 内容、内嵌 HTML 甚至图片库)。

更多功能:

  • 图片说明。

  • 智能导航控件。

  • 物品计数器。

  • 键盘交互。

  • 图像加载指示器。

  • 在外部滑动并单击以关闭。

  • 自动播放视频。

安装和下载:

# NPM
$ npm i @midzer/tobii

使用:

1. 首先,在页面上包含 Tobii 库的文件。

<link href="dist/css/tobii.css" rel="stylesheet" /> 
<script src="dist/js/tobii.js"></script>
// 或
import Tobii from './dist/tobii.modern.js';

2. 初始化 Tobii 库,我们就可以开始了。

const tobii = new Tobii();

3. 制作一个元素来切换从内联 HTML 元素加载内容的基本灯箱。全HTML data属性:

  • data-type: html、iframe 或 youtube。

  • data-id: Youtube 媒体 ID。

  • data-target: “iframe”和“html”类型的目标。

  • data-group:自定义组。

  • data-width: iframe 或 youtube 类型的容器宽度。

  • data-height: iframe 或 youtube 类型的容器高度。

  • data-controls:是否显示视频播放器控件:0 不显示,1 显示播放器中的控件。

  • data-allow:允许在 iframe 上设置允许属性。

  • data-srcset:允许响应图像或视网膜图像。

  • data-zoom:允许启用或禁用缩放图标。值:“true”或“false”

<button type="button" data-type="html" data-target="#modal" class="lightbox">
  切换
</button>
<div id="modal" class="modal">
  <div class="modal__inner">
    模态内容在这里
  </div>
</div>


4. 将 iframe 嵌入灯箱。

<button type="button" data-type="iframe" data-height="600" data-width="400" data-target="https://example.jpg" class="lightbox">
  打开 Example.com
</button>


5. 将 Youtube 视频嵌入灯箱。

<button type="button" data-type="youtube" data-id="VIDEO ID HERE" data-height="600" data-controls="1" class="lightbox">
播放 Youtube 视频
</button>

6. 使用data-group属性对图像进行分组,并将它们显示为灯箱中的内嵌滑块。

<a href="1.jpg" class="lightbox" data-group="gallery"> 
  <img src="1.jpg" alt="Alt" width="200"> 
</a> 
<a href= "2.jpg" class="lightbox" data-group="gallery"> 
  <img src="2.jpg" alt="Alt" width="200"> 
</a> 
<a href="3.jpg " class="lightbox" data-group="gallery"> 
  <img src="3.jpg" alt="Alt" width="200"> 
</a>

7. 使用以下选项配置灯箱。

var tobii = new Tobii({
  
    // 默认选择
    selector: '.lightbox',
  
    // 显示图片标题
    captions: true,
    captionsSelector: 'img',
    captionAttribute: 'alt',
    captionText: null, // 返回标题文本当前元素
  
    // 'auto' = auto 在移动设备上隐藏导航控件
    nav: 'auto',
  
    // 自定义导航控件
    navText: [
      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14 18l-6-6 6-6"/></svg>',
      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M10 6l6 6-6 6"/></svg>'
    ],
    navLabel: [
      'Previous image',
      'Next image'
    ],
  
    // 显示关闭按钮
    close: true,
    closeText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6l12 12M6 18L18 6"/></svg>',
    closeLabel: 'Close lightbox',
  
    // 图像加载指示器
    loadingIndicatorLabel: 'Image loading',
  
    // 显示图像计数器
    counter: true,
      
    // 启用键盘交互
    keyboard: true,
  
    // 在图像上显示缩放图像
    zoom: true,
    zoomText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21 16v5h-5"/><path d="M8 21H3v-5"/><path d="M16 3h5v5"/><path d="M3 8V3h5"/></svg>',
  
    // 点击/点击外部关闭灯箱
    docClose: true,
  
    // 允许通过滑动事件关闭灯箱
    swipeClose: true,
  
    // 当灯箱被激活时隐藏滚动条
    hideScrollbar: true,
  
    // 启用拖动和触摸滑动事件
    draggable: true,
  
    // 以像素为单位的触摸和鼠标拖动阈值
    threshold: 100,
      
    // 自动播放视频
    autoplayVideo: false,
  
    // 模态模式
    modal: false,
  
    // 主题类
    theme: 'tobii--theme-default'
      
});

8. API 方法。

// 打开一个特定的项目
instance.open(index, callback); 
  
// 转到下一个项目
instance.next(callback); 
  
// 回到上一个项目
instance.prev(callback); 
  
// 关闭灯箱
instance.close(callback); 
  
// 添加一个新项目到灯箱
instance.add(element, callback); 
  
// 删除一个项目
instance.remove(element, callback); 
  
// 检查是否打开
instance.isOpen(); 
  
// 获取当前项目索引
instance.currentSlide(); 
  
// 选择一个特定的组
instance.selectGroup(value); 
  
// 选择一个幻灯片
instance.select(index); 
  
// 返回当前幻灯片索引
instance.slidesIndex();
  
// 返回当前幻灯片的数量
instance.slidesCount(); 
  
// 获取当前组
instance.currentGroup(); 
  
// 重置灯箱
instance.reset(); 
  
// 销毁灯箱
instance.destroy();

9. 事件。

instance.on(eventName, listener);
instance.off(eventName, listener);
instance.on('open', function(){
  // 做点什么
})
instance.on('close', function(){
  // 做点什么
})
instance.on('next', function(){
  // 做点什么
})
instance.on('previous', function(){
  // 做点什么
})


官方网站:https://github.com/midzer/tobii

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