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:

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.3 (11/24/2023)

• svg should be intentionally displayed inline

v2.6.2 (03/05/2023)

• Add definable container color in options obj