m00s / angular-photoswipe Goto Github PK

Add the possibility to add a variable to slideSelector

ionic.bundle.js:26799 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

Hi, I have installed angular-photoswipe via npm but when I try to use it I have this error:

angular_angular.js:13439 ReferenceError: PhotoSwipe is not defined
    at g (angular-photoswipe.min.js:7)
    at angular-photoswipe.min.js:7
    at Scope.$digest (angular_angular.js:16884)
    at Scope.$apply (angular_angular.js:17148)
    at HTMLAnchorElement.<anonymous> (angular_angular.js:24828)
    at HTMLAnchorElement.jQuery.event.dispatch (jquery.js:4723)
    at HTMLAnchorElement.elemData.handle (jquery.js:4391)

I use angular on meteor framework.

I have the same error if I try to include it directly without using npm.

Any hint would be appreciated, let me know if you need further details.

Best regards.

I'm trying to restore a specific image with the full url i.e. http://localhost:8080/demo/ng/#&gid=1&pid=5
and it doesn't seems to work with the v0.2.0.

Is it currently supported or a I need to do something to make it work properly?

Could be problematic if I allow user to share pic.

Thank you for a fast insight on this one.
Mathieu

Hi.
This library fails to load for me, because in the import the dependency is named Photoswipe instead of photoswipe (capital letter).

The npm import is photoswipe which should be correct.
See here

We are using Yeoman scaffolding in our project. When we run grunt serve:dist, the default-skin.png file doesn't found in dist folder - photoswipe plugin look for styles/default-skin.png.

Hi guys, I want to ask that is there any way to integrate carousel slider on any other slider to angular photoswipe images.

Thanks

The directive template is inserted on the DOM but when I click on an image the photoswipe gallery doesn't show.

In the minified version of my yeoman proyect I can see the Photoswipe and ng-photoswipe code.

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.

Can you provide NG2 for photoswipe?

Hi @m00s, can you help me resolve this error thanks.

bower.json file has "main": "angular-aviary.min.js".
I'm guessing this should be angular-photoswipe.min.js for this to work.
At least changing that worked for me.

This error is causing other problems such as unstable gallery performance.

I don't know if it is only me, but I don't see any animations, and it is a bit disturbing, sice that is one of main reasons, why I wanted PhotoSwipe. (in demo)

when change angular-photoswipe.min.js to angular-photoswipe.js is error
photoswipe.js:508 Uncaught TypeError: Cannot read property 'x' of undefined

plz help me
thanks...

While trying to use this module, I encountered an error with the default URL for the template defined in the directive.

function linkFn(scope, iElement, iAttrs) {
        scope.template = scope.template || 'views/ng-photoswipe.html';

        scope.$on(scope.startOn, function () {
          scope.start();
        });

This caused my browser to look for the template at http://example.com/views/ng-photoswipe.html, rather than within the ng-photoswipe directory (in bower_components).

Hi.

I'd like to set some angular bindings in the template, like ng-class or ng-click, referring the current slide, something like ng-click="markAsSelected(currentSlide)", or ng-class="{ 'selected': currentSlide.selected }".

Is it possible? How?

Thanks!

Hi,

your demo script gets the error:

"Error: $injector:unpr
Unknown Provider
Unknown provider: bProvider <- b <- ngPhotoswipeDirective"

Can you help me to run the demo?

When I display an image with the Photoswipe UI, it appends a &gid=x&pid=x query string to the URL. This causes UI Router to see it as a different URL than the base URL of the page as defined in that URL's .state, causing it to immediately redirect to the URL defined in $urlRouterProvider.otherwise().

I can turn this off with Photoswipe's history option, but is there any way to keep the gid&pid history while using this with UI Router?

#I'm using ng-Photoswipe, with images from my database.

But when I click on the image to view it, I get "Unable to load Image -(Request-URI Too Long)". Does the src attribute have to be a folder/ https link to the image?

First image loads properly but after swiping to next image all the elements under element are destroyed.

Goodday,

I have been trying to use photoswipe with wordpress the last few days but i get it to work i know i am doing alot of things wrong.

The link is http://plant.bb2mediatestwebsite.nl/products/terrariaterrariums/
the code is

I'm testing your demo and this does not work, what happens?

Thanks for this great module.

In the demo, if any other image has previously been selected & displayed, clicking the first thumbnail image (index 0) image will open the Photoswipe UI displaying the previous image. Clicking on the second image (index 1) works correctly, as do all subsequent images. Only images with index 0 do not work properly.

From #9 by @hirbod

While this is working fine when you only have one gallery, how to go on with multiple ones?

There is an official doc about that:
http://photoswipe.com/documentation/getting-started.html#dom-to-slide-objects

and a working example:
http://codepen.io/dimsemenov/pen/ZYbPJM

But I really don't have a clue right now, how to use this with this directive. Any guesses?

I think it can be a major improvements even though a not-so-common scenario.

I open this issue to think and discuss about it

https://vimeo.com/264209784

this what happened to my angular photoswipe
when i route to another page after clicking the image and opening photoswipe
the page redirect me to home
but
https://vimeo.com/264213915
this video shows okay i used to click the another album after clicking the image then route to
another page and it works fine

i did not used all your codes
this is my html codes

        <div class="album-panel">
            <ul>
                <li ng-repeat="wed in Album" ng-click="AlbumClick(wed)">
                    <img image-exist ng-src="{{wed.WebPath}}" />
                    <div class="descp">
                        <p>{{wed.Title}}</p>
                        <p class="sub">{{wed.PhotoCount}} PHOTO(S)</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="photo-panel">
            <div id="photos">
                <div ng-repeat="s in Pictures.slides track by $index" ng-click="showGallery($index)">
                    <img ng-src="{{ s.src }}" image-exist alt="slide number {{ $index }}" />
                </div>
                <div photo-swipe slides="Pictures.slides" open="Pictures.open" slide-selector="#photos > div > img" options="Pictures.options"></div>
            </div>
        </div>
    </div>

then this is my directive

`var photoSwipe = function (c, h, temp) {
return {
restrict: 'AE',
replace: true,
scope: {
open: '=',
options: '=',
slides: '=',
slideSelector: '@',
template: '@'
},
link: function (scope, element, attrs) {
scope.template = scope.template || 'dialogs/PhotoSwipe.html';

            h.get(scope.template, { cache: temp }).then(function (r) {
                var template = angular.element(r.data);
                element.append(c(template)(scope));
            }) 
            var sGallery = (function () {
                var pswpElement = document.querySelectorAll('.pswp')[0];
                if (angular.isUndefined(scope.options.getThumbBoundsFn) &&
                    angular.isDefined(scope.slideSelector)) {
                    scope.options = angular.merge({}, {
                        getThumbBoundsFn: function (index) {
                            var tn = document.querySelectorAll(scope.slideSelector)[index];
                            var pageYscroll = window.pageYOffset || document.documentElement.scrollTop;
                            var r = tn.getBoundingClientRect();
                            return { x: r.left, y: r.top + pageYscroll, w: r.width };
                        }
                    }, scope.options)
                } 
                scope.gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default || false, scope.slides, scope.options);
                scope.gallery.init();
                scope.item = scope.gallery.currItem; 
                scope.gallery.listen('destroy', function () {
                    scope.open = false;  
                }); 
            }); 
            scope.$watch('open', function (nVal, oVal) {
                if (nVal != oVal) {
                    if (nVal != undefined) {
                        sGallery();
                    }
                } else if (!nVal && scope.gallery) {
                    scope.gallery.close();
                    scope.gallery = null;
                }
            }); 
        }
    };
} 
wDirectivesApp.directive('photoSwipe', ['$compile', '$http', '$templateCache', photoSwipe]);`

then this is my controller

$s.Pictures.options = { index: 0 }

    $s.AlbumClick = (function (ap) {    
        $s.Pictures.open = undefined; 
        $s.Pictures.slides =  Enumerable.From($s.Album).Where(function (x) { return x.ID == ap.ID }).Join($s.BKPic, function (x) { return x.ID }, function (a) { return a.ID_Album }, function (x, a) { return { src: a.WebPath, h: a.Height, w: a.Width } }).OrderBy(function (x) { return x.SeqNo }).ToArray() ;
    }) ;
    $s.showGallery = (function (i) { 
        if (angular.isDefined(i)) {
            $s.Pictures.options.index = i;
        }
        $s.Pictures.open = true;
    });`

i just paste all the codes that need only to use photoswipe

sorry i modify your codes but this codes works fine, but when i used your code im having a problem in
closing and opening the photoswip so i modify some of your codes.

when using unminified version. Will not happen on minified version. #6