Swipebox is a jquery Lightbox plugin that supports desktop, mobile touch phones and tablets. The Lightbox plugin supports touch gestures on your phone, supports keyboard navigation on your desktop, and supports video playback.
Online preview Source Download
Brief tutorialsSwipebox is a jquery Lightbox plugin that supports desktop, mobile touch phones and tablets. The Swipebox features are:
First in<body>标签之前或标签中引入jquery和swipebox js文件。
<script src= "Lib/jquery-2.0.3.js" ></script><script src= "Src/js/jquery.swipebox.js" ></script >
introduce the Swipebox.css file in the label.
<link rel= "stylesheet" href= "Src/css/swipebox.css" >
HTML StructureUse the specified class for the hyperlink label, and use the title property to specify the caption of the picture:
<a href= "big/image.jpg" class= "Swipebox" title= "My Caption" > </a>
calling plug-ins.swipeboxto bind the Swipebox event of the Lightbox through a selector:
<script type= "Text/javascript" > ;(Function ($) { $ ('. Swipebox '). Swipebox (); }) (jQuery);</script>
Advanced ConfigurationGalleryYou can add a property to the hyperlink tag rel to split the gallery picture
<!--Gallery 1--><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>
Video SupportYou can put a youtube or Vimeo video URL into a href property, and the Lightbox plugin automatically detects if it's a YouTube or Vimeo video and opens it with a swipebox.
<a class= "Swipebox-video" rel= "Vimeo" href= "http://vimeo.com/29193046" >my videos</a>
Dynamic Call GalleryYou can use an array to dynamically call your gallery:
$ (' #gallery '). Click (function (e) { e.preventdefault (); $.swipebox ([ {href: ' big/image1.jpg ', title: ' My Caption '}, {href: ' big/image2.jpg ', title: ' My Second Caption ' } ] );} );
Detection Statusif ($.swipebox.isopen) { //do stuff}
Available Parameters<script type= "text/javascript" >;(function ($) {$ ('. Swipebox '). Swipebox ({ Usecss:true,//False would force the use of a jQuery for animations usesvg:true,//False to force the Use of PNG for buttons initialindexonarray:0,//which image index to init when an array is passed Hideclosebuttononmobile:false,//True would hide the close button on mobile devices hidebarsdelay:3000,// Delay before hiding bars on desktop videomaxwidth:1140,//Videos max width beforeopen:function ( ) {},///called before opening Afteropen:null,//called after opening afterclose:function () {}// Called after closing Loopatend:false//True would return to the first image after the last image is reached } ); }) (JQuery);</script>
- USECSS: Set to False forces Lightbox to animate using jquery.
- Usesvg: Set to Flase will lightbox use PNG to make the button.
- Initialindexonarray: Use this parameter to set the subscript when Lightbox uses the array.
- Hideclosebuttononmobile: When set to True Lightbox will hide the Close button on the mobile device.
- Hidebarsdelay:lightbox hide the delay time of the Information Bar on the desktop device.
- Videomaxwidth:lightbox the maximum width of the video.
- Beforeopen:lightbox the callback function before opening.
- Afteropen:lightbox the callback function after opening.
- Afterclose:lightbox the callback function after closing.
- Loopatend: When set to True Lightbox will then return to the first picture when playing to the last picture.
Browser compatibleChrome, Safari, Firefox, Opera, ie9+, ios4+, Android, Windows Phone.
via:http://www.w2bc.com/article/21873
Lightbox plug-in that supports mobile touch devices based on jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
