Bigger Picture - JavaScript lightbox gallery

Image Gallery Example Code

There are two methods of supplying data -- JavaScript objects and data-* attributes. The example below uses the latter method. Event listeners are set up to open BiggerPicture when a link is clicked.

<div id="images">
	<a
		href="example.jpg"
		data-img="example.jpg"
		data-thumb="example-thumb.jpg"
		data-alt="image description"
		data-height="2000"
		data-width="3000"
	>
		<img
			src="example-thumb.jpg"
			alt="image description"
		/>
	</a>
</div>

// initialize
let bp = BiggerPicture({
	target: document.body,
})

// grab image links
let imageLinks = document.querySelectorAll('#images > a')

// add click listener to open BiggerPicture
for (let link of imageLinks) {
  link.addEventListener("click", openGallery);
}

// function to open BiggerPicture
function openGallery(e) {
	e.preventDefault()
	bp.open({
		items: imageLinks,
		el: e.currentTarget,
	})
}

Video / Embed Example Code

Like the the image gallery example, the code below uses data attributes on link elements to pass data to BiggerPicture when a link is clicked. Instead of a gallery, we just open them on their own by passing the individual node.

For native video and audio, you must provide sources -- an array of objects indicating a src and type (mime). A string may be used if it is JSON parsable. Each object will create a <source> element, and all key-value pairs in the object will be added as attributes.

Videos have a tracks option allowing you to add captions, which you can see in use below.

Note: Width / height defaults to 1920 / 1080, so those attributes aren't necessary, but are left in for clarity.

<!-- video -->
<a
	href="example.mp4"
	data-width="1920"
	data-height="1080"
	data-thumb="thumb.jpg"
	data-sources='[{"src": "example.webm", "type": "video/webm"}, {"src": "example.mp4", "type": "video/mp4"}]'
	data-tracks='[{"label": "English", "kind": "subtitles", "srclang": "en", "src": "en.vtt", "default": "true"}, {"label": "Español", "kind": "subtitles", "srclang": "es", "src": "es.vtt"}]'
>
	<img
		src="thumb.jpg"
		alt="video description"
	/>
</a>
<!-- iframe embed -->
<a
	href="https://www.youtube.com/watch?v=286jXjwdst0"
	data-width="1920"
	data-height="1012"
	data-thumb="images/uebok.jpg"
	data-iframe="https://www.youtube.com/embed/286jXjwdst0?autoplay=1&playsinline=1"
>
	<img
		src="images/uebok.jpg"
		alt="Uebok youtube embed"
	/>
</a>

// initialize BiggerPicture
let bp = BiggerPicture({
  target: document.body
});

// grab image links
let links = document.querySelectorAll("a");

// add click listener on links to open BiggerPicture
for (let link of links) {
  link.addEventListener("click", openBiggerPicture);
}

// function to open BiggerPicture
function openBiggerPicture(e) {
  e.preventDefault();
  bp.open({
    items: e.currentTarget,
    el: e.currentTarget
  });
}

Inline Gallery Example Code

The example below supplies data to BiggerPicture using a JavaScript object.

To create an inline gallery, use the inline option. You'll probably want to set the scale, intro, and noClose options like below.

<div id="inline" class="inline-gallery"></div>

// example data
let items = [
  {
    img: "https://assets.henrygd.me/bp/images/janko-ferlic-SDivo1PTBDs-unsplash.jpg",
    thumb: "https://assets.henrygd.me/bp/images/janko-ferlic-SDivo1PTBDs-unsplash_thumb.jpg",
    height: "2000",
    width: "3000",
    alt: "wildlife photography of brown bear cub"
  },
  {
    img: "https://assets.henrygd.me/bp/images/corey-agopian-5y4ljzRrDFA-unsplash.jpg",
    thumb: "https://assets.henrygd.me/bp/images/corey-agopian-5y4ljzRrDFA-unsplash_thumb.jpg",
    height: "2000",
    width: "3000",
    alt: "palm trees under clear blue sky"
  },
];

// initialize BiggerPicture
let bp = BiggerPicture({
  target: document.getElementById("inline")
});

// open inline gallery
bp.open({
  items,
  inline: true,
  scale: 1,
  intro: "fadeup",
  noClose: true,
});

Responsive Image Example Code

All you have to do is pass a srcset value as img. The sizes attribute is automatically updated whenever the image dimensions change. Alternatively, you may set your own sizes value.

The map example uses three sizes: 1300, 2500, and 6000 pixels.

The 1300px image will be displayed as the starting image on small screens.

The 2500px image will be loaded as the starting image on most laptops / desktops, or if a user zooms past the 1300px size.

The 6000px image will be loaded as the starting image on very high resolution monitors, or if a user zooms past the 2500px size.

<a
	href="images/exandria-2500.webp"
	data-img="images/exandria-1300.webp 1300w, images/exandria-2500.webp 2500w, images/exandria-6000.webp 6000w"
	data-thumb="images/exandria-1300.webp"
	data-height="3376"
	data-width="6000"
	data-alt="map of critical role's exandria"
	>
	<img
		src="images/exandria-1300.webp"
		alt="map of critical role's exandria"
	/>
</a>

Full Page Galleries

Video / audio / iframes

HTML

Inline Galleries

Responsive Images

Captions

Custom Layout Example - Thumbnails

Image Gallery Example Code

Video / Embed Example Code

Inline Gallery Example Code

Responsive Image Example Code