The lightbox can be easily customized and has a many options that allows for a fine-tuned and individual experience.

The lowest specificity have the default options. This values are used if nothing else has been set.

defaults = {
	//prefix for the data attribute
	dataprefix: 'bblb-',

	//trigger event that opens the lightbox
	trigger: 'click',

	//default lightbox theme
	theme: 'standard',

	//show close-button
	contentclose: true,
	//close lightbox with click on background
	backgroundclose: true,
	//remove lightbox from dom after closing
	removeonclose: false,

	//show fullscreen-button
	fullscreen: true,
	//open lightbox in fullscreen-mode
	openfullscreen: false,
	//lightbox added behind trigger element
	inline: false,

	//allow previous of first -> last, and next of last -> first
	loop: true,
	//preload n-slides, can be set to array [preload x previous slides, preload y next slides]
	preload: 1,

	//show pager
	pager: true,
	//show pager with preview-images
	pagergallery: false,

	//close lightbox with key [ESC]
	closekeys: [27],
	//next slide with key [pageup, left, a, j]
	prevkeys: [33,37,65,74],
	//previous slide with key [pagedown, right, d, l]
	nextkeys: [34,39,68,76],

	//enable swipe gesture
	enableswipe: true,
	//max duration for swipe gesture
	maxswipeduration: 250,
	//min distance horizontal
	minswipex: 200,
	//max distance vertical
	maxswipey: 100,

	//default transition-options
	transition: {
		open: 'growin',
		close: 'shrinkout',
		slide: 'slideslide'

	//overrides for images
	image: {
		//show with zoom-option
		zoom: false,
		zoomfactor: 2

	//overrides for iframe
	iframe: {
		closehidden: true,
		proportional: true

	//overrides for modals
	modal: {
		contentclose: false,
		backgroundclose: false,
		fullscreen: false,
		closesubmit: true

	//max-width of iframe/video
	width: 800,
	//max-height of iframe/video
	height: 600,

	//copy events of html elements
	copyevents: true,
	loadcss: false,
	loadjs: false,

	//default translations
		close: 'close',
		fullscreen: 'fullscreen',
		previous: 'previous',
		next: 'next',
		alert: {
			ok: 'ok'
		confirm: {
			ok: 'ok',
			cancel: 'cancel'
		prompt: {
			ok: 'ok',
			cancel: 'cancel'
		error: 'Resource could not be loaded.',
		zoom: 'toggle zoom'

You can override the defaults for all slides in the lightbox by passing an options-object with the initialization. The structure of the options-object is the same as the defaults-object. You can override only parts of an object like translation as all values are overridden recursively.

	width: 1024,
	height: 768,
	translation: {
		error: 'Resource was not available.'

The highest priority have the inline-options you set directly at the trigger-element. They are namespaced so they will not interfere with other plugins.

<a href="" class="bblb" data-bblb-width="1024" data-bblb-height="768">Iframe</a>

It is also possible to override nested options. For every nesting-level the name of the option will be added to the attribute:

<a href="image.png" title="my big image" class="bblb" data-bblb-translation-error="Image could not be loaded">Image</a>