Html5添加支持桌面、移动触摸手机和平板电脑的Lightbox插件教程

最新推荐文章于 2021-06-23 01:11:41 发布

Angel19951012

最新推荐文章于 2021-06-23 01:11:41 发布

阅读量907

点赞数

本文链接：https://blog.csdn.net/Angel19951012/article/details/50483108

版权

一、使用方法
首先在<body>标签之前或<header>标签中引入jquery和swipebox js文件。
<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>

在<header>标签中引入swipebox.css文件。
<link rel="stylesheet" href="src/css/swipebox.css">

二、Html结构
<a href="big/image.jpg" class="swipebox" title="My Caption">
<img src="small/image.jpg" alt="image">
</a>

三、调用插件
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox();
} )( jQuery );
</script>

四、高级配置
(1)画廊
<a rel="gallery-1" href="big/image1.jpg" class="swipebox">
<img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox">
<img src="small/image2.jpg" alt="image">
</a>


<a rel="gallery-2" href="big/image3.jpg" class="swipebox">
<img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox">
<img src="small/image4.jpg" alt="image">
</a>

(2)视频支持
<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>

(3)动态调用画廊
$( '#gallery' ).click( function( e ) {
e.preventDefault();
$.swipebox( [
{ href:'big/image1.jpg', title:'My Caption' },
href:'big/image2.jpg', title:'My Second Caption' }
] );
} );

(4)检测状态
if ( $.swipebox.isOpen ) {
}

(5)可用参数
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox( {
useCSS : true,
useSVG : true,
initialIndexOnArray : 0,
hideCloseButtonOnMobile : false,
hideBarsDelay : 3000,
videoMaxWidth : 1140,
beforeOpen: function(){},
afterOpen : null,
afterClose: function(){}
loopAtEnd : false
} );
} )( jQuery );
</script>

KeyMob移动端广告平台广告展现形式丰富，高99%的填充率。KeyMob移动端广告平台还能帮助应用开发者把应用推广到庞大的目标群体中。给开发者带来持续、稳定和丰厚的收益回报。

Angel19951012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html5添加支持桌面、移动触摸手机和平板电脑的Lightbox插件教程

一、使用方法首先在标签之前或标签中引入jquery和swipebox js文件。在标签中引入swipebox.css文件。二、Html结构三、调用插件;( function( $ ) {$( '.swipebox' ).swipebox();} )( jQuery );四、高级配置(1)画廊
复制链接

扫一扫