Minimal Image & Video LigthtBox In Pure JavaScript – BigPicture.js

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