https://github.com/jbutz/bootstrap-lightbox

A simple lightbox plugin based on the bootstrap modal plugin.
https://github.com/jbutz/bootstrap-lightbox

Last synced: 13 days ago
JSON representation

A simple lightbox plugin based on the bootstrap modal plugin.

• Host: GitHub
• URL: https://github.com/jbutz/bootstrap-lightbox
• Owner: jbutz
• License: other
• Created: 2012-04-20T16:18:56.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2022-09-02T17:06:49.000Z (about 2 years ago)
• Last Synced: 2024-10-19T00:23:08.893Z (24 days ago)
• Language: HTML
• Homepage: http://jbutz.github.io/bootstrap-lightbox/
• Size: 854 KB
• Stars: 1,048
• Watchers: 96
• Forks: 290
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
**THIS PLUGIN IS NO LONGER BEING MAINTAINED. IF SOMEONE ELSE WANTS TO MAINTAIN IT FEEL FREE TO FORK THE REPO.**

[Bootstrap - Lightbox](http://jbutz.github.com/bootstrap-lightbox/) [![Build Status](https://secure.travis-ci.org/jbutz/bootstrap-lightbox.png)](http://travis-ci.org/jbutz/bootstrap-lightbox)

=================

This is a plugin for Twitter Bootstrap that adds a lightbox that is based off the modal dialog

Quick start

-----------

You have several options. You can clone the repository `git clone git://github.com/jbutz/bootstrap-lightbox.git`, grab an [archive](https://github.com/jbutz/bootstrap-lightbox/tags), or use [cdnjs](http://cdnjs.com/#bootstrap-lightbox).

Once you have the files include the CSS and JavaScript files in your page and then give the example code below a shot.

Example

-----------

```html

Open Lightbox



	


		


			

			


				Your caption here

			

		

	



```


Usage

-----------

### Via data attributes ###

All you need to do is add `data-toggle="lightbox"` and `href="#lightbox"` or `data-target="#lightbox"` to a link, and set the `href` so it references the lightbox you want to display.

```html

Open Lightbox

```

### Via JavaScript ###

Open the lightbox with the id `myLightbox`.

```javascript

$('#myLightbox').lightbox(options)

```

### Options ###

	

		

			Name

			Type

			Default

			Description

		

	

	

		

			backdrop

			boolean

			true

			This adds a modal-backdrop element.

		

		

			keyboard

			boolean

			true

			Pressing escape closes the lightbox.

		

		

			show

			boolean

			true

			Shows the lightbox when initialized.
Note: This only applies when using JavaScript to setup the lightbox.

		

		

			resizeToFit

			boolean

			true

			This resizes the image to fit the window if the image is too large.