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

网页特效

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

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

jquery响应式触摸图像灯箱lightbox插件

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

插件介绍

这是一款灵活、响应迅速、兼容移动端的jquery灯箱lightbox插件, 可以帮助您在pc站和移动网站上创建图像lightbox和gallery lightbox。

特征:

  • 反应灵敏,触感友好。
  • 支持图像预加载。
  • 支持CSS3动画。
  • 支持键盘/触摸式滑动导航。
  • 支持自定义图像纵横比。
  • 支持收缩或双击/单击以缩放。

使用方法

1. 在网页的页脚部分加载插件需要用的到样式和js文件。

<link href="dist/simple-lightbox.min.css" rel="stylesheet" />
<!-- As A Vanilla JavaScript Plugin -->
<script src="dist/simple-lightbox.min.js"></script>
<!-- For legacy browsers -->
<script src="dist/simple-lightbox.legacy.min.js"></script>
<!-- As A jQuery Plugin -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/simple-lightbox.jquery.min.js"></script>

2.将所有图像插入容器。插件会自动从img标签的alt属性生成标题。要对图像进行分组,只需将rel属性添加到链接中,如下所示:

<div class="gallery"> 
  <a href="1.jpg" class="big" rel="rel1">
    <img src="thumb1.jpg" alt="" title="Image 1">
  </a>

  <a href="2.jpg" class="big" rel="rel1">
    <img src="thumb2.jpg" alt="" title="Image 2">
  </a>

  <a href="3.jpg" class="big" rel="rel2">
    <img src="thumb3.jpg" alt="" title="Image 3">
  </a>

  <a href="4.jpg" class="big" rel="rel2">
    <img src="thumb4.jpg" alt="" title="Image 4">
  </a>
  
</div>

3. 使用默认选项调用插件以启用lightbox。

// As A Vanilla JavaScript Plugin
var gallery = new SimpleLightbox('.gallery a', { 
    /* options */ 
});

// As A jQuery Plugin -->
var gallery = $('.gallery a').simpleLightbox({
    /* options */
});

4. 默认选项

// default source attribute
sourceAttr: 'href',

// shows fullscreen overlay
overlay: true,

// shows loading spinner
spinner: true,

// shows navigation arrows
nav: true,

// text for navigation arrows
navText: ['&larr;','&rarr;'],

// shows image captions
captions: true,
captionDelay: 0,
captionSelector: 'img',
captionType: 'attr',
captionPosition: 'bottom',
captionClass: '',

// captions attribute (title or data-title)
captionsData: 'title',

// shows close button
close: true,

// text for close button
closeText: 'X',

// swipe up or down to close gallery
swipeClose: true,

// show counter
showCounter: true,

// file extensions
fileExt: 'png|jpg|jpeg|gif',

// weather to slide in new photos or not, disable to fade
animationSlide: true,

// animation speed in ms
animationSpeed: 250,

// image preloading
preloading: true,

// keyboard navigation
enableKeyboard: true,

// endless looping
loop:  true,

// group images by rel attribute of link with same selector
rel: false,

// closes the lightbox when clicking outside
docClose:  true,

// how much pixel you have to swipe
swipeTolerance: 50,

// lightbox wrapper Class
className: 'simple-lightbox',

// width / height ratios
widthRatio: 0.8,
heightRatio: 0.9,

// scales the image up to the defined ratio size
scaleImageToRatio: false,

// disable right click
disableRightClick: false,

// disable page scroll
disableScroll: true,

// show an alert if image was not found
alertError:  true,

// alert message
alertErrorMessage: 'Image not found, next image will be loaded',

// additional HTML showing inside every image
additionalHtml: false,

// enable history back closes lightbox instead of reloading the page
history: true,

// time to wait between slides
throttleInterval: 0,

// Pinch to Zoom feature for touch devices
doubleTapZoom: 2,
maxZoom: 10,

// adds class to html element if lightbox is open
htmlClass: 'has-lightbox',

// RTL mode
rtl: false,

// elements with this class are fixed and get the right padding when lightbox opens
fixedClass: 'sl-fixed',

// fade speed in ms
fadeSpeed: 300,

// whether to uniqualize images
uniqueImages: true,

// focus the lightbox on open to enable tab control
focus: true,

5. API方法。

// Opens the lightbox
gallery.open(); 

// Closes the lightbox
gallery.close(); 

// Goto next image
gallery.next(); 

// Goto previous image
gallery.prev(); 

// re-init the lightbox
gallery.refresh(); 

// Destroys the lightbox
gallery.destroy(); 

6. 事件

$('.gallery a').on('open.simplelightbox', function () {
  // do something…
});
  • open.simplelightbox: 在灯箱打开前
  • opened.simplelightbox: 灯箱打开后
  • close.simplelightbox: 在灯箱关闭前
  • closed.simplelightbox: 灯箱关闭后
  • change.simplelightbox: 在图像更改之前
  • changed.simplelightbox : 在图像更改之后
  • next.simplelightbox: 在下一个图像到达之前
  • nextDone.simplelightbox: 在下一个图像到达后
  • prev.simplelightbox: 在上一个图像到达之前
  • prevDone.simplelightbox: 在上一个图像到达后
  • nextImageLoaded.simplelightbox : 在加载下一个图片后(如果预加载已激活)
  • prevImageLoaded.simplelightbox : 在加载上一个图片后
  • error.simplelightbox : 在图像加载错误时
人生不要怕失败,因为失败连着成功。只有那些有勇气的人,才敢不断挑战人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

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

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

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