I have a list of elements. Ever element has a gallery attached to it. I use a modal to show the gallery of each. It s working perfectly.
Now the problem I have is about the pictures that are showed first. Let s say I have this in the first element :
Gallery
-JrYz8TI7N9ItkAoVtUZ
-JrYz8TJatqcBm-MBXIK
-JrYz8TJatqcBm-MBXIL
-JrYz8TLYhbKEnVEYmBC
and this in the second element
Gallery
-JrYz8sPnCEYM-TXHJ9I
-JrYz8sSLq_mJ6k_tSfG
I would like to always start showing the elements from the first element. This does not ahppen here. I somhow end up having an index of 3 in a Gallery of 2 elements..
Can you tell me how I can change this behaviour?
Here is my modal ctroller:
// Dealing with modals for the gallery
$ionicModal.fromTemplateUrl('Cards/image-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function(index) {
$scope.currentGallery = $scope.cards[index].Gallery;
//console.log('This is' + $scope.cards[index].Gallery);
console.log("When slide opens " + $scope.slideIndex);
$scope.modal.show();
// Important: This line is needed to update the current ion-slide's width
// Try commenting this line, click the button and see what happens
$ionicSlideBoxDelegate.update();
};
$scope.closeModal = function() {
console.log("When slide closes " + $scope.slideIndex);
$scope.slideIndex = 0;
console.log("When slide closes and I change it to " + $scope.slideIndex);
$scope.modal.hide();
};
// Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
console.log('Modal is destroyed!');
});
// Execute action on hide modal
$scope.$on('modal.hide', function() {
// Execute action
console.log('Modal is hidden!');
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
console.log('Modal is removed!');
});
$scope.$on('modal.shown', function() {
console.log("When slide is on MODAL.SHOW " + $scope.slideIndex);
console.log('Modal is shown!');
});
// Call this functions if you need to manually control the slides
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
console.log("When slide changes " + $scope.slideIndex);
};
here is my modal code:
<div class="modal image-modal transparent" ng-click="closeModal()">
<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false">
<ion-slide ng-repeat="item in currentGallery">
<img ng-src="{{item.picture}}" class="fullscreen-image" />
<p class="info">{{item.caption}}</p>
</ion-slide>
</ion-slide-box>
</div>
Can you please help? I tried to change that index ay many places, and I do but it does not affect the slideshow moving forward..
Thank you in advance,
And cheers!
It has been solved... I basically used this :
This way, it always goes back to the beginning whenever I close it. Cheers!