0.0.2 • Published 6 years ago
ember-light-gallery v0.0.2
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