0

UPDATE: I changed my code (based on this example... http://www.script-tutorials.com/photo-gallery-with-angularjs-and-css3/) and now swiping right works, but swiping left doesn't

I created a controller for an image gallery and managed to get the main image to change when the thumbnails are clicked. I want the main image to also change to the next thumdnail image when swiped with ng-swipe-left however. The main image will swipe out of view, but the new image does not show. Here is my controller...

controller('blogpageCtrl', ['$scope','$routeParams','$http',
function($scope, $routeParams, $http){
  $http.get('views/pages/' + $routeParams.articleId + '.json').success(function(data){
    $scope.article = data;

  //$scope.setImage = function(imageUrl){
  //$scope.mainImageUrl = imageUrl;
  //};
  $scope._Index = 0;

  // if a current image is the same as requested image
  $scope.isActive = function (index) {
    return $scope._Index === index;
  };

  // show prev image
  $scope.showPrev = function () {
    $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.data.images.length - 1;
  };

  // show next image
  $scope.showNext = function () {
    $scope._Index = ($scope._Index < $scope.data.images.length - 1) ? ++$scope._Index : 0;
  };

  // show a certain image
  $scope.showPhoto = function (index) {
    $scope._Index = index;
  };

  });
}]);

and here is my html...

 <img ng-repeat="img in article.images" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{img}}" class="photobg">
<ul class="article-thumbs">
  <li ng-repeat="img in article.images" ng-class="{'active':isActive($index)}">
    <img ng-src="{{img}}" ng-click="showPhoto($index);">
  </li>
</ul>

UPDATE: Thanks to user814628 pointing me in the right direction. I got it working by modifying my controller with simplified code....

  $scope._Index = 0;

  // if a current image is the same as requested image
  $scope.isActive = function (index) {
    return $scope._Index === index;
  };

  // show prev image
  $scope.showPrev = function () {
    $scope._Index = Math.max(0, $scope._Index - 1);
  };

  // show next image
  $scope.showNext = function () {
    $scope._Index = Math.min(3, $scope._Index + 1);
  };

  // show a certain image
  $scope.showPhoto = function (index) {
    $scope._Index = index;
  };
mlkingh
  • 19
  • 7
  • Its hard to tell from my point of view, but your showPrev can be simplified, by using `$scope._Index = Math.max(0, $scope._Index - 1)` and similar for showNext.Also I'm not sure how ng-swipe is implemented, but depending on its implementation, you might have to wrap the showNext and showPrev is $timeout block. – dchhetri Nov 03 '14 at 04:19
  • 1
    Thanks! your shortened code worked perfect and it also got me started on the right path to get the left swiping working. I edited the code above just in case you want to use it also! – mlkingh Nov 03 '14 at 04:27
  • Nice looks good. One suggestion is that you don't really need Index in your scope. It can just be a private variable inside that directive or controller. You should put only what's needed on scope like those functions. – dchhetri Nov 03 '14 at 15:38

0 Answers0