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.
npm install venoboxcomposer require nicolafranchini/venobox1. 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'
});| 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' |
<a class="my-image-links" data-gall="gallery01" href="image01-big.jpg"><img src="image01-small.jpg"></a>new VenoBox({
selector: '.my-image-links',
numeration: true,
infinigall: true,
share: true,
spinner: 'rotating-plane'
});<a class="my-video-links" data-autoplay="true" data-vbtype="video" href="http://vimeo.com/xxx">Vimeo</a>
<a class="my-video-links" data-autoplay="true" data-vbtype="video" href="http://youtu.be/xxx">Youtube</a>
<a class="my-video-links" data-autoplay="true" data-vbtype="video" data-ratio="1x1" data-maxwidth="400px" href="my-video.mp4">MP4</a>new VenoBox({
selector: '.my-video-links',
});<a class="my-custom-links" data-vbtype="iframe" href="https://www.google.com/maps/embed?...">Gmaps</a>
<a class="my-custom-links" data-vbtype="iframe" href="http://example.com/">iFrame</a>
<a class="my-custom-links" data-vbtype="ajax" data-maxwidth="800px" href="ajax.php">Ajax</a>
<a class="my-custom-links" data-vbtype="inline" data-maxwidth="400px" href="#inline-content">Inline</a>
<div id="inline-content" style="display:none;">
<h1>Hello world!</h1>
</div>new VenoBox({
selector: '.my-custom-links',
});