Lightbox plug-in based on jQuery that supports mobile touch devices, jquerylightbox
Swipebox is a jquery Lightbox plug-in that supports desktops, mobile phones, and tablets. The lightbox plug-in supports Mobile Phone Touch gestures, keyboard navigation for desktop computers, and video playback.
Download Online Preview source code
Brief tutorialSwipebox is a jQuery Lightbox plug-in that supports desktops, mobile phones, and tablets. Swipebox features:
First<Body> before the tag orLabel to introduce jquery and swipebox js files.
<script src="lib/jquery-2.0.3.js"></script><script src="src/js/jquery.swipebox.js"></script>
InLabel to import the swipebox.css file.
<link rel="stylesheet" href="src/css/swipebox.css">
HTML Structure Use the specified class for the hyperlink label andtitleAttribute to specify the image title:
<a href="big/image.jpg" class="swipebox" title="My Caption"> </a>
Call plug-ins Pass.swipeboxSelector to bind the lightbox swipebox event:
<script type="text/javascript"> ;( function( $ ) { $( '.swipebox' ).swipebox(); } )( jQuery );</script> Advanced Configuration Gallery You can addrelAttribute to separate gallery Images
<!-- 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 Support You can put a youtube or vimeo video URLhrefAttribute, the lightbox plug-in will automatically detect whether it is a video of youtube or vimeo, and open it with swipebox.
<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>
Dynamic call Gallery You 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 Status if ( $.swipebox.isOpen ) { // do stuff} Available Parameters <script type="text/javascript"> ;( function( $ ) { $( '.swipebox' ).swipebox( { useCSS : true, // false will force the use of jQuery for animations useSVG : true, // false to force the use of png for buttons initialIndexOnArray : 0, // which image index to init when a array is passed hideCloseButtonOnMobile : false, // true will 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 will return to the first image after the last image is reached } ); } )( jQuery );</script>
- UseCSS: setting false forces lightbox to use jQuery for animation.
- UseSVG: Set to flase to use png to create a button for lightbox.
- InitialIndexOnArray: this parameter is used to set subscript when lightbox uses an array.
- HideCloseButtonOnMobile: when it is set to true, lightbox hides the close button on the mobile device.
- HideBarsDelay: the delay time when lightbox hides information bars on a desktop device.
- VideoMaxWidth: the maximum width of a lightbox video.
- BeforeOpen: the callback function before lightbox is enabled.
- AfterOpen: callback function after lightbox is opened.
- AfterClose: callback function after lightbox is closed.
- LoopAtEnd: when it is set to true, lightbox returns the first image for playing when it is played to the last image.
Browser compatibility Chrome, Safari, Firefox, Opera, IE9 +, IOS4 +, Android, and windows phone.
Via: http://www.w2bc.com/Article/21873
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
