Ember lightGallery integration Addon

Lightweight, full customizable addon for lightGallery plugin! This addon is compatible with fastboot!

Installation

ember install ember-light-gallery

Usage documentation

Simple component

{{#light-gallery-content as |gallery|}}
  {{gallery.image href="http://my-image1.jpg"}}
  {{gallery.image href="http://my-image2.jpg"}}
  {{gallery.image href="http://my-image3.jpg"}}
{{/light-gallery-content}}

With provide collection param

export default Controller.extend({
  images: ['http://my-image1.jpg', 'http://my-image2.jpg', 'http://my-image3.jpg']
})

{{#light-gallery-content collection=images as |image gallery|}}
  {{gallery.image href=image}}
{{/light-gallery-content}}

Configuration

environment.js (optional config)

ENV = {
  ...,
  'ember-light-gallery': {
    plugins: ['thumbnail', 'fullscreen', 'zoom'],
    transitions: true
  }
}

| Key | Type | Available Values | Default Value | | ------------- |:----------------:|:-----------------:|:-------------:| | plugins | Array of string | ['thumbnail', 'autoplay', 'video', 'fullscreen', 'pager', 'zoom', 'hash', 'share'] | ['thumbnail', 'fullscreen'] | transitions | Boolean| true, false | true

Customization

Params is full suported to lightgallery documentation

You can provide explicit params to component

{{#light-gallery-content collection=images thumbnail=false as |image gallery|}}
  {{gallery.image href=image}}
{{/light-gallery-content}}

Or with options param

export default Controller.extend({
  images: ['http://my-image1.jpg', 'http://my-image2.jpg', 'http://my-image3.jpg'],
  options: {thumbnail: false}
})

{{#light-gallery-content collection=images options=options as |image gallery|}}
  {{gallery.image href=image}}
{{/light-gallery-content}}

You can mixin explicit params and options param

export default Controller.extend({
  images: ['http://my-image1.jpg', 'http://my-image2.jpg', 'http://my-image3.jpg'],
  options: { mode: 'lg-zoom-in-out' }
})

{{#light-gallery-content collection=images thumbnail=false options=options as |image gallery|}}
  {{gallery.image href=image}}
{{/light-gallery-content}}

To do

• [ ] Captions
• [ ] Videos
• [ ] Demo