Ember PhotoSwipe

An ember-cli addon for using PhotoSwipe in Ember applications.

Demo

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v12 or above

Getting Started

Install in ember-cli application

ember install ember-photoswipe

Then include the following in your app.scss file:

@import 'ember-photoswipe';

Usage

// Controller
import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  items = [
    {
      src: 'https://picsum.photos/1024/768?random&id=0',
      w: 1024,
      h: 768,
    },
    {
      src: 'https://picsum.photos/1024/768?random&id=1',
      w: 1024,
      h: 768,
    },
    {
      src: 'https://picsum.photos/1024/768?random&id=2',
      w: 1024,
      h: 768,
    },
  ];
}

<!-- Template -->
<PhotoSwipe @items={{this.items}} as |photoSwipe|>
  {{#each this.items as |item index|}}
    <img src={{item.src}} {{on 'click' (fn photoSwipe.actions.open (hash index=index))}} >
  {{/each}}
</PhotoSwipe>

Photoswipe options

You can pass items and photoswipe options directly into photo-swipe component. All list of options is available here.

Event

Phowo-swipe sends actions based on the corresponding photoswipe events.

<PhotoSwipe @items={{this.items}} @history={{false}} @onInitialZoomInEnd={{this.onInitialZoomInEnd}} as |photoSwipe|>
  <img src={{this.items.firstObject.src}} {{on 'click' photoSwipe.actions.open}} >
</PhotoSwipe>

Configuration

Custom variables and theme

You can use custom PhotoSwipe variables.

//We use $pswp__assets-path because images of default-skin stored in assets/images folder
$pswp__assets-path: 'images/';
@import 'ember-photoswipe/main.scss';
@import 'ember-photoswipe/default-skin/default-skin.scss';

System-wide config

If you want to apply some options to all your photo-swipe components, you need create the photo-swipe component and apply options inside it:

import PhotoSwipeComponent from 'ember-photoswipe/components/photo-swipe';

export default class extends PhotoSwipeComponent {
  history = false;
  bgOpacity = 0.7;
};

Contributing

See the Contributing guide for details.

License

ember-photoswipe is released under the MIT License. See the bundled LICENSE file for details.