Shinybox
A touchable jQuery lightbox.
What is Shinybox ?
shinybox is a jQuery "lightbox" plugin for desktop, mobile and tablet.
Features
- Swipe gestures for mobile
- Keyboard Navigation for desktop
- CSS transitions with jQuery fallback
- Retina support for UI icons
- Easy CSS customization
Compatibility
Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, windows phone.
Usage
Javascript
Include jquery and the shinybox script in your head tags or right before your body closing tag.
CSS
Include the shinybox CSS style in your head tags.
HTML
Use a specific class for your links and use the title attribute as caption.
Fire the plugin
Bind the shinybox behaviour on every link with the "shinybox" class.
;
Options
id: 'shinybox-overlay' // id of the overlay elementuseCSS: true // false will force the use of jQuery for animations hideCloseButtonOnMobile: false // hide close button on mobile, you can always use swipe up or down to close the shinybox on mobileloopAtEnd: false // Play images in loop in either directions noTitleCaptionBox: false // Set true if you don't have title caption boxshowNavigationsOnMobile: false // true to always show navigation icon on mobilesort: null // a sorting function to sort the dom elements before showing in shinybox videoMaxWidth: 1140 // videos max widthautoplayVideos: false // true will autoplay Youtube and Vimeo videosvimeoColor: 'CCCCCC' // vimeo colorqueryStringData: {} // plain object with custom query string arguments to pass/override for video URLs {} // called before opening{} // called after closing{} // called after loading media{} // called after sliding to image at the index
Credits
Photos by Daniele Zedda Based on Swipebox