An Ember addon for using Photoswipe in Ember applications.
npm install ember-photoswipeAn ember-cli addon for using PhotoSwipe in Ember applications.
Install in ember-cli application
``bash`
ember install ember-photoswipe
Then include the following in your app.scss file:
`scss`
@import 'ember-photoswipe';
`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}}
You can pass items and photoswipe options directly into photo-swipe component. All list of options is available here.
Phowo-swipe sends actions based on the corresponding photoswipe events.
`hbs`
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';
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;
};
``
See the Contributing guide for details.
ember-photoswipe is released under the MIT License. See the bundled LICENSE file for details.