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

``bash
ember install ember-photoswipe
`

Then include the following in your app.scss file:

`scss
@import 'ember-photoswipe';
`

Usage

`js
// 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,
},
];
}
`

`hbs


{{#each this.items as |item index|}}

{{/each}}

`

$3

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

$3

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

`hbs



`

Configuration

$3

You can use custom PhotoSwipe variables.

`scss
//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';
`

$3

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:

`js
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.