Utilizing ion-slider to display images has been a seamless experience, except for one hiccup. If I navigate directly from the first full image back to the home screen, the slider ceases to function properly.
To address this challenge, I have employed specific views and controllers in my setup.
Here is an example of the Home Template View:
<ion-view view-title="Home">
<ion-content>
<div class="padding">
<ion-slide-box>
<ion-slide ng-repeat="Image in gallery" ng-click="showImages($index)" repeat-done="repeatDone()">
<img data-ng-src="{{sdcardpath}}{{Image.Path}}" width="100%"/>
<ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
Additionally, here is an overview of the Controller:
.controller('HomeController', function($scope,$cordovaFile,$ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicPopup, $timeout) {
$scope.sdcardpath = cordova.file.externalRootDirectory + foldername;
$scope.gallery = [
{ Path: 'img1.png' },
{ Path: 'img2.png' },
{ Path: 'img3.png' },
];
$scope.repeatDone = function() {
$ionicSlideBoxDelegate.update();
};
/*
* Show Full Screen Sliding Gallery Images
*/
$scope.showImages = function(index) {
$scope.activeSlide = index;
$scope.showModal('templates/image-popover.html');
};
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
};
$scope.zoomMin = 1;
$scope.updateSlideStatus = function(slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$timeout(function(){
$ionicSlideBoxDelegate.enableSlide(true);
});
} else {
$timeout(function(){
$ionicSlideBoxDelegate.enableSlide(false);
});
}
};
}
Furthermore, a glimpse of the Modal View - image-popover.html:
<div class="modal image-modal">
<ion-slide-box active-slide="activeSlide" show-pager="false">
<ion-slide ng-repeat="Images in gallery">
<ion-scroll direction="xy" locking="false" scrollbar-x="false" scrollbar-y="false"
zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%"
delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)" on-release="updateSlideStatus(activeSlide)">
<img data-ng-src="{{sdcardpath}}{{Images.Path}}" width="100%"/>
</ion-scroll>
</ion-slide>
</ion-slide-box>
</div>
Lastly, there is a Directive included in the setup - repeatDone:
.directive('repeatDone', function () {
return function (scope, element, attrs) {
if (scope.$last) { // all are rendered
scope.$eval(attrs.repeatDone);
}
}
If you have any insights or solutions to resolve this issue, your input would be greatly appreciated!