ember-light-gallery's Introduction

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}}