Not able to open photoswipe using the example

[sebastiangrebe]

I have looked at the demo and tried to reproduce it inside in one project. I am using the demo code for it first but somehow the gallery does not open. From my point of view it has got something to do with the event but I am not sure what exactly is wrong.
Here the part of the HTML code I am using:

<div ng-controller="demoCtrl as vm">
    <button ng-click="vm.showGallery()"> Show Gallery (external btn) </button>
        <ul class="slide-list">
                 <li ng-repeat="s in vm.slides track by $index" ng-click="vm.showGallery($index)">
                        <img ng-src="{{ s.src }}" alt="slide number {{ $index }}" />
                 </li>
         </ul>
     <div ng-photoswipe slides="vm.slides" start-on="{{ vm.startEvent }}" options="vm.opts"></div>
</div>

And this is my javascript code:

test.controller('demoCtrl', function($scope) {
    var vm = this;

  vm.title = 'ngPhotoswipe';
  vm.startEvent = 'START_GALLERY';

  vm.opts = {
    index: 0
  };

  vm.slides = [{
      src: 'http://lorempixel.com/500/500/nature',
      w: 500, h: 500
    }, {
      src: 'http://lorempixel.com/500/500/abstract',
      w: 500, h: 500
    }, {
      src: 'http://lorempixel.com/500/500/sports',
      w: 500, h: 500
    }, {
      src: 'http://lorempixel.com/500/500/city',
      w: 500, h: 500
    }, {
      src: 'http://lorempixel.com/500/500/food',
      w: 500, h: 500
    }, {
      src: 'http://lorempixel.com/500/500/animals',
      w: 500, h: 500
    }, {
      src: 'http://lorempixel.com/500/500/business',
      w: 500, h: 500
    }, {
      src: 'http://lorempixel.com/500/500/fashion',
      w: 500, h: 500
    }];

  vm.showGallery = function (i) {
    vm.opts.index = i || vm.opts.index;
    $scope.$broadcast(vm.startEvent);
  };
});

This is my top line where I initialize the angular app which I have got included in the body tag:

var test = angular.module('test', ['ngRoute', 'ngCookies', 'ngDialog', 'pascalprecht.translate', 'ngFileUpload', 'satellizer', 'ngSanitize', 'ngTouch', 'superswipe', 'cropme', 'google.places', 'moment-picker', 'infinite-scroll', 'cgNotify','ngPhotoswipe']).config(function($authProvider) {

When I click on an image or the button nothing happens. The function is run since I tried a console.log which gives me the correct value for i and for the event name. Also everything is working fine in the html code so that the scope variables are correctly used. I do not get any error in the console when clicking or loading the gallery. From my point of view something does not work with the event. The demoCtrl is inside another controller which is inside the main controller. I hope this is not the problem.

[m00s]

Hi @Sebi55, you are probably using the last version looking at an example for an older version.

The PR #3 introduced a new way to open the gallery, that is a variable 2-way-bound to the directive..
I just saw the Readme is out of date as well as the gh-pages demo, so I'll update them ASAP.

For now you can find the last working example here

[sebastiangrebe]

Thanks it would work now if there wasn't the problem with the router did you already find a solution when using the history option?

[m00s]

@Sebi55 Are you talking about #5? I didn't spend much time on that but you can find some quick workarounds. One could be setting a regex in the url of the page where your ngPhotoswipe is, so that the router doesn't trigger a pageChange..

[tanmuhittin]

@m00s I am working on the same problem too. Could you give an example where we can prevent router to be fired

[sebastiangrebe]

It would be helpful if it would work with any router since I am not using the ui-router for example I am using the normal angular route.js

[sebastiangrebe]

An easy solution would be of course to turn off the history option an add your own history support by adding a parameter to the url which is took and then opens the correct image. That should reproduce any feature or am I wrong?

[hirbod]

I am really thankful for this plugin, but not updating README is irresponsible. I spent 4 hours debugging why the heck the example does not work, until I started looking here for the issues... OMG. It works - finally.

[m00s]

@hirbod My bad, I had the updated version in local because I'm fixing other small issues, and I forgot to push the README first.. I just updated it manually, to avoid your situation, hopefully a deeper usage guide will arrive soon.

Close this for now.

[hirbod]

Thanks 👍