A Touchable jQuery Lightbox
Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.
Chrome, Safari, Firefox, Opera, Brave, IOS, Android, Windows phone.
Include jquery and the swipebox script in your head
tags or right before your body
closing tag.
<script src="lib/jquery-3.5.2.js"></script> <script src="src/js/jquery.swipebox.js"></script>
Include the swipebox CSS style in your head
tags.
<link rel="stylesheet" href="src/css/swipebox.css">
Use a specific class for your links and use the title attribute as caption.
<a href="big/image.jpg" class="swipebox" title="My Caption"> <img src="small/image.jpg" alt="image"> </a>
Bind the swipebox behaviour on every link with the "swipebox" class.
<script type="text/javascript"> ;( function( $ ) { $( '.swipebox' ).swipebox(); } )( jQuery ); </script>
You can add a rel
attribute to your links to seperate your galleries.
<!-- Gallery 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> <!-- Gallery 2 --> <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>
Simply paste a youtube or vimeo video URL in your href attribute. The script will automatically check if it's a youtube or vimeo URL and open the video in the swipebox.
<a class="swipebox-video" rel="vimeo" href="https://www.youtube.com/watch?v=TjsqpFqCf8k">My Videos</a>
You can set your gallery dynamically by passing an array object to the swipebox.
$( '#gallery' ).click( function( e ) { e.preventDefault(); $.swipebox( [ { href:'image1.jpg', title:'My Caption' }, { href:'image2.jpg', title:'My Second Caption' } ] ); } );
if ( $.swipebox.isOpen ) { // do stuff }
<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 removeBarsOnMobile : true, // false will show top bar 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>