I. Methods of Use
First introduce jquery and Swipebox js files before <body> tags or <script src= "Lib/jquery-2.0.3.js" ></script>
<script src= "Src/js/jquery.swipebox.js" ></script>
Introduce the Swipebox.css file in the <link rel= "stylesheet" href= "Src/css/swipebox.css" >
Second, HTML structure
<a href= "big/image.jpg" class= "Swipebox" title= "My Caption" >
</a>
Third, call the plug-in
<script type= "Text/javascript" >
;(function ($) {
$ ('. Swipebox '). Swipebox ();
}) (JQuery);
</script>
Iv. Advanced Configuration
(1) Gallery
<a rel= "gallery-1" href= "big/image1.jpg" class= "Swipebox" >
</a>
<a rel= "gallery-1" href= "big/image2.jpg" class= "Swipebox" >
</a>
<!--Gallery 2--
<a rel= "gallery-2" href= "big/image3.jpg" class= "Swipebox" >
</a>
<a rel= "gallery-2" href= "big/image4.jpg" class= "Swipebox" >
</a>
(2) Video support
<a class= "Swipebox-video" rel= "Vimeo" href= "http://vimeo.com/29193046" >my videos</a>
(3) Dynamic Call Gallery
$ (' #gallery '). Click (function (e) {
E.preventdefault ();
$.swipebox ([
{href: ' big/image1.jpg ', title: ' My Caption '},
HREF: ' big/image2.jpg ', title: ' My Second Caption '}
] );
} );
(4) Detection status
if ($.swipebox.isopen) {
}
(5) Available parameters
<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 Mobile advertising Platform advertising display form rich, high 99% of the fill rate. The Keymob mobile advertising platform can also help application developers to extend their applications to large target groups. Bring sustainable, stable and lucrative returns to developers.
HTML5 Add Lightbox plugin tutorials that support desktop, mobile touch phones, and tablets
