ember-light-gallery

0.0.2 • Public • Published

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

Package Sidebar

Install

npm i ember-light-gallery

Weekly Downloads

2

Version

0.0.2

License

MIT

Last publish

Collaborators

  • marucjmar