An ember-cli addon for using PhotoSwipe in Ember applications.
- Ember.js v2.18 or above
- Ember CLI v2.13 or above
Install in ember-cli application
ember install ember-photoswipe
Then include the following in your app.scss
file:
@import "ember-photoswipe";
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,
},
]
});
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.
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}}
You can use custom PhotoSwipe variables.
//We use $pswp__assets-path becouse 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:
import PhotoSwipe from 'ember-photoswipe/components/photo-swipe';
export default PhotoSwipe.extend({
// Place here your preferences
itemProperties: ['name'],
history: false,
bgOpacity: 0.7
});
ember-photoswipe is released under the MIT License. See the bundled LICENSE file for details.