Image

var lb = $.bbLightbox({ type: 'image', src: 'image.png', alt: 'my big image' });

lb.open();

with options:

var lb = $.bbLightbox({ type: 'image', src: 'image.png', alt: 'my big image', options: {
	zoom: 1
});

lb.open();

Without a zoom-factor the zoomed-image will have the original size of the image, a zoom-factor of 3 says that the zoomed-image will be 3 times as big as the image in the lightbox. It is also possible to set an alternative image, e.g. same image with a higher resolution.

var lb = $.bbLightbox({ type: 'image', src: 'image.png', alt: 'my big image', options: {
	zoom: 'zoom-image.png',
	zoomFactor: 3
});

lb.open();

Video

var lb = $.bbLightbox({ type: 'video', videos: ["video.mp4", "video.webm", "video.swf"] });

lb.open();

with options:

var lb = $.bbLightbox({ type: 'video', videos: ["video.mp4", "video.webm", "video.swf"], options: {
		width: 640,
		height: 480,
		poster: poster.png
	}
});

lb.open();

Iframe

var lb = $.bbLightbox({ type: 'iframe', src: external-url.com });

lb.open();

with options:

var lb = $.bbLightbox({ type: 'iframe', src: external-url.com, options: {
		width: 640,
		height: 480,
		closehidden: false,
		proportional: false
	}
});

lb.open();

Ajax

var lb = $.bbLightbox({ type: 'ajax', src: internal-url.html });

lb.open();

with options:

var lb = $.bbLightbox({ type: 'ajax', src: internal-url.html, options: {
		selector: 'selector',
		loadcss: true,
		loads: true
	}
});

lb.open();

HTML

var lb = $.bbLightbox({ type: 'html', content: 'selector' });

lb.open();

or:

var lb = $.bbLightbox({ type: 'html', content: '<p>my custom content</p>' });

lb.open();

or:

var lb = $.bbLightbox({ type: 'html', content: jQuery-element });

lb.open();

or:

var lb = $.bbLightbox({ type: 'html', content: DOM-element });

lb.open();

If the content is already inside the DOM, the content will be cloned and the outmost container will be removed.

with  options:

var lb = $.bbLightbox({ type: 'html', content: 'selector', options: {
		selector: 'selector',
		copyevents: false,
		loadjs: true
	}
});

lb.open();

Modals

Alert

var lb = $.bbLightbox({ type: 'modal', kind: 'alert', message: 'alert text' });

lb.open();

with options:

var lb = $.bbLightbox({ type: 'modal', kind: 'alert', message: 'alert text', options: {
		translationAlertOk: 'Text Button'
	}
});

lb.open();

Confirm

var lb = $.bbLightbox({ type: 'modal', kind: 'confirm', message: 'confirm text' });

lb.open();

with options:

var lb = $.bbLightbox({ type: 'modal', kind: 'confirm', message: 'confirm text', options: {
		translationConfirmOk: 'Text Confirm Button',
		translationConfirmCancel: 'Text Cancel Button'
	}
});

lb.open();

Prompt

var lb = $.bbLightbox({ type: 'modal', kind: 'prompt', message: 'prompt text' });

lb.open();

with options:

var lb = $.bbLightbox({ type: 'modal', kind: 'prompt', message: 'prompt text', options: {
		translationPromptOk: 'Text Submit Button',
		translationPromptCancel: 'Text Cancel Button'
	}
});

lb.open();

with callback-function:

var lb = $.bbLightbox({ type: 'modal', kind: 'prompt', message: 'prompt text' }, {
		onmodal: function(lb, data) { console.log(data); }
	}
);

lb.open();