Routing to another page error #36
Description
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.