Doesnt work with embercli with ember 2.0 about ember-cli-photoswipe HOT 8 CLOSED

+1

from ember-cli-photoswipe.

I have the same problem. I'm using ember 1.12.0 and ember-cli 1.13.8.
Solve the problem in the following way though:

{{#photo-swipe}}
 {{#each model.product.pictures as |img|}}
     <a class="photo-item" href={{img.readUrl}} data-width="100" data-height="100">
        <img src={{img.readUrl}} width="100" height="100" alt={{img.fileName}}>
     </a>
 {{/each}}
{{/photo-swipe}}

I just realised that this is def. not a good solution. Mainly because data- attributes will always have a static value, and that fact will affect your pictures (height and width) when you open the gallery.

from ember-cli-photoswipe.

Please don't do as @dzena's example shows - this is deprecated, breaks the bindings, and prevents updates to your model from being reflected in the slideshow. Instead, make sure your items are structured as follows:

items = [
  {
    src: 'http://your/photo.jpg',
    w: 320,
    h: 480,
    title: 'fancy pic',
    msrc: 'bigger size url'
  }
];

Then invoke the component like so:

{{#photo-swipe items=items as |item|}}
  <img src={{item.src}} alt={{item.title}} />
{{/photo-swipe}}

For most of us, this will mean mapping your model properties into the PhotoSwipe item structure.

from ember-cli-photoswipe.

Oh and here's another thing - the latest published version 1.1.0 is not using the same code as you see on the master branch; it's a few commits behind and doesn't work with the README you see here. Hopefully the maintainers of this addon will wake up from their deep deep sleep and publish a new version with what they have here in master. Until then, you can pin in package.json:

"ember-cli-photoswipe": "poetic/ember-cli-photoswipe#master"

from ember-cli-photoswipe.

@davidgoli
I still have the same problem. Nothing is being rendered.
ember-cli: 1.13.8
ember: 1.12.0

 items: Ember.computed("model.product.pictures.[]", function () {
    var pictures = this.get("model.product.pictures");

    var items = [];

    pictures.forEach(function (picture) {
      var item = {
        src: picture.get("readUrl"),
        w: 320,
        h: 480,
        title: picture.get("fileName"),
        msrc: "bigger"
      };

      items.push(item);
    });

    return items;
  }),

{{#photo-swipe items=items as |item|}}
      <img class="thumb" src={{item.src}} alt={{item.title}} />
{{/photo-swipe}}

from ember-cli-photoswipe.

@dzena what version of ember-cli-photoswipe are you running?

from ember-cli-photoswipe.

"ember-cli-photoswipe": "poetic/ember-cli-photoswipe#master"

from ember-cli-photoswipe.

I just published 1.2.0 to npm so you should once again be able to point to that version now for this functionality.

from ember-cli-photoswipe.