帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery可触摸式灯箱Lightbox插件(TopBox),支持手机端

帝国模板之家 2020-11-23 网页特效 评论

插件介绍 

TopBox是Nivo Lightbox插件的升级版本,它为现代网络和移动设计提供了一个全功能的Lightbox解决方案。

主要特点:

  1. 反应灵敏。

  2. 支持触摸事件。

  3. 支持Youtube和Vimeo视频。

  4. 支持iframe内容。

  5. 支持更多文件格式:PDF、SVG、GIF、WebP图像等。

  6. 自动从标题属性中提取标题。

  7. 键盘导航。

  8. 内容加载指示器。

  9. 7个额外的皮肤。

  10. 6个平滑过渡效果。

  11. 画廊灯箱模式。

还有更多。

使用说明:

1. 在html页面中加载jQuery TopBox插件和最新的jQuery库。

<link rel="stylesheet" href="topbox.css">
<script src="jquery.min.js"></script>
<script src="topbox.js"></script>

2.在文档中加载您选择的皮肤CSS。

<link rel="stylesheet" href="/skins/blue_hue/styles.css">
<link rel="stylesheet" href="/skins/galaxy/styles.css">
<link rel="stylesheet" href="/skins/impact/styles.css">
<link rel="stylesheet" href="/skins/intense_kiss/styles.css">
<link rel="stylesheet" href="/skins/monospace/styles.css">
<link rel="stylesheet" href="/skins/real_estate/styles.css">
<link rel="stylesheet" href="/skins/whiteout/styles.css">

3.初始化lightbox插件。

$(function(){
  $('.lightbox').topbox();
});

4.将CSS类lightbox添加到媒体链接中。

<a href="1.jpg" class="lightbox" title="Image Caption">Image</a>
<a href="1" data-lightbox-hidpi="1@2x.jpg" class="lightbox" title="Retina Image">Retina Image</a>
<a href="1.mp3" class="lightbox" title="HTML5 Audio">HTML5 Audio</a>
<a href="1.mp4" class="lightbox" title="HTML5 Video">HTML5 Video</a>
<a href="1.html" class="lightbox" title="Iframe Contnet" data-lightbox-type="iframe">Iframe Contnet</a>
<a href="https://youtu.be/2xX7RrxyRac" class="lightbox" title="YouTube Video">YouTube Video</a>
<a href="https://vimeo.com/143418951" class="button lightbox" title="Vimeo Video">Vimeo Video</a>
<a href="#inline" class="lightbox" data-lightbox-type="inline" title="Inline Content">Inline HTML Content</a>
<div id="inline" style="display: none;">
  <h3>Inline Content</h3>
</div>

<a href="ajax.txt" class="lightbox" data-lightbox-type="ajax" title="AJAX Content">AJAX Content</a>

5. 可用的插件选项。

$('.lightbox').topbox({
  // fade, fadeScale, slideLeft, slideDown, slideUp or fall
  effect: 'fade',
  // blurs the background
  backgroundBlur: false,
  // skin name
  skin: 'darkroom',
  // enable keyboard navigation
  keyboardNav: true,
  // closes lightbox by clicking on image
  clickImgToClose: false,
  // closes lightbox by clicking on background overlay
  clickOverlayToClose: true,
  // close text
  closeToolTip: 'Close',
  // previous text
  previousToolTip: 'Previous',
  // next text
  nextToolTip: 'Next',
  // exacts caption text from title attribute
  titleSource: 'title',
  // loading message
  loadingMessage: 'Loading...',
  // PDF message
  pdfMessage: 'View the PDF in a new window:',
  // PDF button
  pdfButton: 'Tap Here',
  // error message
  errorMessage: 'The requested content cannot be loaded. Please try again later.'
});

6. 可用的回调函数。

$('.lightbox').topbox({
  onInit: function() {},
  beforeShowLightbox: function() {},
  afterShowLightbox: function(lightbox) {},
  beforeHideLightbox: function() {},
  afterHideLightbox: function() {},
  beforePrev: function(element) {},
  onPrev: function(element) {},
  beforeNext: function(element) {},
  onNext: function(element) {},

});
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言