File Size: 654KB
Total Views: 603
Date Created:
Last Modified Date:
Official Website: Go to website
License: MIT
VenoBox is responsive touch and swipe-friendly JavaScript lightbox plugin that can be used for any type of lightbox gallery easily. It is suitable for images, inline content, iframes, and videos.
Features:
- Responsive and very easy to implement.
- Works with jQuery and Vanilla JavaScript.
- Youtube, Vimeo, HTML5 videos supported.
- Iframes and google maps supported.
Installation
npm install venoboxcomposer require nicolafranchini/venoboxHow to use it:
1. Include the Javascript venobox.min.js at the bottom of the web page.
<script src="js/venobox.min.js"></script>2. Include the CSS venobox.min.css in the header of the page.
<link rel="stylesheet" href="css/venobox.min.css">3. Add the basic HTML to the page.
<a class="my-image-links" data-gall="gallery01" href="image01-big.jpg"><img src="image01-small.jpg"></a>4. Initialize the plugin and we’re ready to go.
new VenoBox({
selector: '.my-image-links',
numeration: true,
infinigall: true,
share: true,
spinner: 'rotating-plane'
});Plugin’s default options:
| Option | Description | Default |
|---|---|---|
| selector | Items selector | '.venobox' |
| autoplay | Automatic play for videos | false |
| bgcolor | Background color of the item (also affects border color, if has a border) | '#ffffff' |
| border | Border thickness of the modal window | '0px' |
| customClass | Set an additional custom class to the main .vbox-overlay wrapper, can be overridden by single items with data-customclass=""Accepts single class name without .dot |
false |
| infinigall | Infinite gallery, jumps from last to first item and vice versa | false |
| maxWidth | Custom max window width, can be overridden by single items with data-maxwidth=""Accepts any standard css length unit |
'100%' |
| navigation | Show navigation arrows | true |
| navKeyboard | Enable navigation with keyboard keys | true |
| navTouch | Enable swipe touch / drag | true |
| navSpeed | Gallery transition speed (milliseconds) | 300 |
| numeration | Show navigation number and total items in current gallery | false |
| overlayClose | Set false to disable the overlay click-close and keep enabled only the [×] close button |
true |
| overlayColor | Backdrop color | 'rgba(255,255,255,0.85)' |
| popup | Show automatic popup on page load. (e.g. “#my-link”) | false |
| ratio | Aspect ratio applied to iframes and videos Available: '1x1' | '4x3' | '16x9' | '21x9' | 'full' |
'16x9' |
| share | Sharing buttons for images and videos | false |
| shareStyle | Sharing buttons style available: 'block' | 'pill' | 'transparent' | 'bar' |
'bar' |
| spinColor | Preloader color | '#d2d2d2' |
| spinner | Preloader type Available: 'plane' | 'chase' | 'bounce' | 'wave' | 'pulse' | 'flow' | 'swing' | 'circle' | 'circle-fade' | 'grid' | 'fold | 'wander' |
'bounce' |
| titleattr | Specific attribute to display a title (e.g. ‘data-title’) | 'title' |
| titlePosition | Title position, available: 'top' or 'bottom' |
'top' |
| titleStyle | Title style. Available: 'block' | 'pill' | 'transparent' | 'bar' |
'top' |
| toolsBackground | UI background color (Title and Share buttons) | '#1C1C1C' |
| toolsColor | UI color (Title, Share buttons and gallery navigation) | '#d2d2d2' |
