您的位置：首页 > Web前端 > HTML5

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

2016-01-08 15:13 706 查看

一、使用方法

首先在<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移动端广告平台还能帮助应用开发者把应用推广到庞大的目标群体中。给开发者带来持续、稳定和丰厚的收益回报。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航