ember-cli-lightbox

Ember-cli-lightbox

A lightbox component for ember using Lightbox2.

Usage

• npm install --save ember-cli-lightbox
• ember g ember-cli-lightbox

Preview image on image click

{{light-box href=imageUrl
			data-lightbox=name 
			data-title=title
			data-class=imgClassName}}

Preview image on some DOM click

{{#light-box 	href=imageUrl
				data-lightbox=name
				data-title=title
				inlineImage=false}}
    <!-- DOM Element here -->
{{/light-box}}

Configuration

Setting global lightbox options:

// config/enironment.js
module.exports = function(environment) {
  var ENV = {
    //...
    'ember-cli-lightbox': {
    	lightboxOptions: {
    		alwaysShowNavOnTouchDevices: 	false,
    		albumLabel:						"Image %1 of %2",
    		disableScrolling:				false,
    		fadeDuration:					500,
    		fitImagesInViewport:			true,
    		maxWidth:						1000,
    		maxHeight:						1000,
    		positionFromTop:				50,
    		resizeDuration:					700,
    		showImageNumberLabel:			true
    	}
    }
  };
  //...

  return ENV;
};

Ember Compatibility Table

Ember Version	Ember-Cli-Lightbox Version
1.8 through 1.10	0.2.0
1.11 through 1.13	0.3.0 =< x < 1.0.0
2.0 and beyond	>=1.0.0

Demo

Check out the demo on github pages. Alternatively you can clone this repo and run the app

$ npm install -g ember-cli
$ git clone [e-mail]:ramybenaroya/ember-cli-lightbox
$ cd ember-cli-lightbox
# install dependencies
$ npm install; bower install
$ ember g ember-cli-lightbox
# fire up local server
$ ember serve

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.