mnutt / ember-photoswipe

An Ember addon for using Photoswipe in Ember applications.

Ember PhotoSwipe

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

Demo

Compatibility

• Ember.js v3.4 or above
• Ember CLI v2.13 or above
• Node.js v8 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

We have array of javascript objects, but you can use array of Ember.Objects too. Inside photo-swipe all required properties will be to take through getProperties.

// app/controller/application.js
import Ember from 'ember';

export default Ember.Controller.extend({
  items: [
    {
      src: 'https://picsum.photos/1024/768?image=42',
      w: 1024,
      h: 768,
    },
    {
      src: 'https://picsum.photos/768/1024?image=80',
      w: 768,
      h: 1024,
    },
    {
      src: 'https://picsum.photos/768/768?image=108',
      w: 768,
      h: 768,
    },
  ]
});

Photoswipe options

You can pass items and photoswipe options directly into photo-swipe component

// app/templates/application.hbs
{{#photo-swipe items=items history=false as |photoswipe|}}
  {{#each items as |item index|}}
    <img src={{item.src}} {{action photoswipe.actions.open (hash index=index)}} />
  {{/each}}
{{/photo-swipe}}

All list of options is available here.

Event

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

{{#photo-swipe items=items onInitialZoomInEnd=(action "onInitialZoomInEnd") as |photoswipe|}}
  {{#each items as |item index|}}
    <img src={{item.src}} {{action photoswipe.actions.open (hash index=index)}} />
  {{/each}}
{{/photo-swipe}}

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 PhotoSwipe from 'ember-photoswipe/components/photo-swipe';

export default PhotoSwipe.extend({
  // Place here your preferences
  itemProperties: ['name'],
  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.