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

Category: Javascript , Modal & Popup , Recommended | September 25, 2018
Author: henrygd
Views Total: 2,439
Official Page: Go to website
Last Update: September 25, 2018
License: MIT

Preview:

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

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

You Might Be Interested In:


One thought on “Minimal Image & Video LigthtBox In Pure JavaScript – BigPicture.js

Leave a Reply