建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

Swipebox高度可定制可触屏的jQuery灯箱画廊插件

来源:易助科技网浏览量:36收藏

简介


swipebox是一个jQuery插件,它可以为台式机、移动设备和平板电脑创建一个高度可定制和可触摸的灯箱。它支持滑动手势、键盘导航、CSS转换、视网膜屏幕retina。

(下载的附件中附有DEMO)


更多灯箱画廊插件:👉  [ 详情 ]


Swipebox高度可定制可触屏的jQuery灯箱画廊插件


兼容情况


与Chrome、Safari、Firefox、Opera、IE8+、iOS+、Android和Windows Phone兼容。


插件特点


支持移动设备的触屏方式滑动

PC电脑键盘导航

带有jQuery回退的CSS转换

Retina对UI图标的支持

简单的CSS自定义

视频、图像和内联内容



使用


1. 引入


<link rel="stylesheet" href="src/css/swipebox.css">

<script src="path/jquery-3.5.2.js"></script>
<script src="path/jquery.swipebox.js"></script>



2. HTML


对于单个图片,可以向缩略图添加链接,并在标题属性中定义图像标题:


<a href="big/image.jpg" class="swipebox" title="My Caption">
  <img src="/path/to/thumb.jpg" alt="Image Alt">
</a>


如果要创建图片集灯箱,请确保所有链接都具有相同的 rel 值:


<a href="/path/to/full-1.jpg" class="swipebox" title="Caption Here" rel="gallery">
  <img src="/path/to/thumb-1.jpg" alt="Image Alt">
</a>

<a href="/path/to/full-2.jpg" class="swipebox" title="Caption Here" rel="gallery">
  <img src="/path/to/thumb-2.jpg" alt="Image Alt">
</a>

<a href="/path/to/full-3.jpg" class="swipebox" title="Caption Here" rel="gallery">
  <img src="/path/to/thumb-3.jpg" alt="Image Alt">
</a>

...


插件不仅支持图像,同时还支持Youtube或Vimeo视频:


<a class="swipebox" rel="viemo" href="/path/to/vimeoVideo">
  Vimeo Video
</a>

<a class="swipebox" href="/path/to/youtubeVideo">
  Vimeo Video
</a>



3. 调用


调用图像或视频链接上的插件即可完成:


jQuery(function($) {
  $(".swipebox").swipebox();
});


您还可以通过将数组对象传递到滑动框来动态设置图库:


$( '#gallery' ).click( function( e ) {
	e.preventDefault();
	$.swipebox( [
		{ href:'image1.jpg', title:'My Caption' }, 
		{ href:'image2.jpg', title:'My Second Caption' }
	] );
} );


检查打开状态


if ( $.swipebox.isOpen ) {
	// do stuff
}



4. 配置


$(".swipebox").swipebox({

  // false将强制对动画使用jQuery
  useCSS : true, 

  // false强制按钮使用png
  useSVG: true,

  // 传递数组时要初始化的映像索引
  initialIndexOnArray: 0, 

  // false将在移动设备上显示顶部导航栏
  removeBarsOnMobile : true, 

  // true将隐藏移动设备上的关闭按钮
  hideCloseButtonOnMobile : false, 

  // 在台式机上隐藏条之前的延迟
  hideBarsDelay : 3000, 

  // 视频最大宽度
  videoMaxWidth : 1140, 

  // true将支持循环播放
  loopAtEnd: false, 

  // true将自动播放Youtube和Vimeo视频
  autoplayVideos: false,

  // 带有自定义查询字符串参数的普通对象,用于传递/覆盖视频URL
  queryStringData: {},

  // 加载幻灯片时可以切换的CSS类 (like 'hidden' of <a href="https://www.jqueryscript.net/tags.php?/Bootstrap/">Bootstrap</a>)
  toggleClassOnLoad: '',

  // callbacks
  // called before opening
  beforeOpen: function(){} , 

  // called after opening
  afterOpen: null, 

  // called after closing
  afterClose: function(){}, 

  // called after media is loaded
  afterMedia: function(){}, 

  // called after going to next/prev slide
  nextSlide: null,
  prevSlide: null
  
});



5. 作者寄语


我想保持这个插件尽可能简单。我不会合并其他功能的拉取请求,如下载按钮、社交类按钮、IE8兼容性等……但请随意分叉项目并根据您的需求进行自定义。最想要的公关是为了修复错误。此外,未来的改进将是允许在可触摸设备上进行缩放。



相关链接


GitHub 地址 :  https://github.com/brutaldesign/swipebox

易助科技网效果演示地址 :  http://demo.easyzone.net.cn/plugin/swipebox/index.html