Author: | henrygd |
---|---|
Views Total: | 152 views |
Official Page: | Go to website |
Last Update: | March 5, 2023 |
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:
1. Import the bigpicture into your project or directly load the JavaScript file in your document as this:
import BigPicture from 'bigpicture'
<script src="BigPicture.js"></script>
2. Create a new BigPicture object and specify the image/video sources you want 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' });
3. Gallery mode is supported as well.
<div id="image_container"> <img src="thumb.jpg" data-bp="photo1.jpg" class="example" data-caption="Image Caption" /> <img src="thumb.jpg" data-bp="photo2.jpg" /> <img src="thumb.jpg" data-bp="photo3.jpg" class="example" /> </div>
BigPicture({ el: e.target, gallery: '#image_container', })
4. Available options.
BigPicture({ // attribute used to find gallery elements galleryAttribute: 'data-bp', // set custom dimensions for embeds / videos dimensions: [1920, 1080], // show or hide default loading indicator noLoader: false, // customize the overlay color (any valid css color value) overlayColor: 'rgba(0, 0, 0, .8)', // open animation callback animationStart: () => {}, // open animation callback animationEnd: () => {}, // close callback onClose: () => {}, // gallery image change callback onChangeImage: () => {}, })
5. API methods.
var bp = BigPicture({ // options here }) // close bp.close() // next gallery image bp.next() // previous gallery image bp.prev() // access to active display element (img, video, iframe wrapper div) bp.display // options of active instance bp.opts
Changelog:
v2.6.2 (03/05/2023)
- Add definable container color in options obj
wtf is npm? don’t understand it. why not just copy n paste into head or body n customise script?