0.0.2 • Published 6 years ago

ember-light-gallery v0.0.2

Weekly downloads
46
License
MIT
Repository
github
Last release
6 years ago

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
  }
}
KeyTypeAvailable ValuesDefault Value
pluginsArray of string'thumbnail', 'autoplay', 'video', 'fullscreen', 'pager', 'zoom', 'hash', 'share''thumbnail', 'fullscreen'
transitionsBooleantrue, falsetrue

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