Author: | henrygd |
---|---|
Views Total: | 2,889 views |
Official Page: | Go to website |
Last Update: | September 25, 2018 |
License: | MIT |
Preview:

Description:
BigPicture.js is a lightweight, CSS-less, responsive image & video viewer/lightbox built in pure javaScript. Supports local/remote images and Youtube/Vimeo/HTML5 videos.
More features:
- Content loading spinner.
- Image captions supported.
- Custom trigger elements.
- Error handling.
Install it via NPM:
npm install bigpicture
How to use it:
Import the bigpicture into your project or directly load the JavaScript file in your document as this:
<script src="BigPicture.js"></script>
Create a new BigPicture object and specify the image/video sources you’d like to display in the lightbox.
BigPicture({ el: this, imgSrc: '1.jpg' }); BigPicture({ el: this, gallery: '#image_container' }) BigPicture({ el: this, audio: '1.mp3' }); BigPicture({ el: this, vidSrc: 'html5.mp4' }); BigPicture({ el: this, ytSrc: 'VIDEO ID HERE' }); BigPicture({ el: this, vimeoSrc: 'VIDEO ID HERE' });
Hide/show the loading spinner.
BigPicture({ noLoader: false });
Optional callback functions.
BigPicture({ animationStart: function() {}, animationEnd: function() {}, onError: function() { console.log('there was an error') } });
Changelog:
09/25/2018
- add custom error handling
wtf is npm? don’t understand it. why not just copy n paste into head or body n customise script?