Is it possible to change the pictures automatically

[nevyen]

Hi,

I want to let my pictures change automatically after a few seconds.

Is this possible ?

Thanks in advance

[Melanitski]

Hello

Sure, you can add some code to your controller:

app.controller 'GalleryController', ($scope, $interval) ->

    $scope.baseIndex = 1

    $scope.gallery = [
        {text: 'Item 1'}
        {text: 'Item 2'}
        {text: 'Item 3'}
    ]

    $scope.onGalleryInit = (gallery) ->
        $interval((->
            gallery.setIndex( gallery.getIndex() + 1)
        ), 2000);

div.wrapper(
    ng-controller="GalleryController"
    cycle-gallery
    config-buffer="2"
    config-animation-time="250"
    gallery-index="baseIndex"
    gallery-init="onGalleryInit"
)
    div.slider(cycle-gallery-holder)
        div.gallery-item(gallery-repeater="item in gallery")
            h1() {{item.text}}

[nevyen]

Hi what you write sounds logic. But I don't get it in my productive system.

Here is my controller:

'use strict';

(function() {

  class MainController {
    constructor($http, $scope, socket, $interval, $q) {
      this.$http = $http;
      this.$interval = $interval;
      $scope.baseIndex = 1;
     $http.get('/api/pictures').then(response => {
        $scope.images = response.data;
        socket.syncUpdates('image', this.images);
      });
      $scope.$on('$destroy', function() {
        socket.unsyncUpdates('image');
      });
      $scope.onGalleryInit = function() {
        $interval(( $scope.images.setIndex($scope.images.getIndex() + 1)), 2000)
      }
    }
  }
  angular.module('gallery2App')
    .controller('MainController', MainController);
})();

and here my view:

<div class="main-box">
  <div class="gallery-wrapper" cycle-gallery="cycleGallery" config-buffer="2"
       config-animation-time="1000"
       gallery-index="baseIndex"
       gallery-init="onGalleryInit">
    <div cycle-gallery-holder="cycle-gallery-holder" class="gallery-slider in-index ng-isolate-scope">
      <div gallery-repeater="item in images" class="gallery-item" style="background-image: url(/uploads/img/thumb/{{item.path}})">
      </div>
    </div>
    <i class="gallery-overflow"></i>
    <button gallery-button="animateNext" class="action-button next animate ng-isolate-scope">Animate next</button>
    <button gallery-button="animatePrev" class="action-button prev animate ng-isolate-scope">Animate prev</button>
  </div>
  <div class="main-box-data">
    <img class="main-title" src="../../assets/images/head.png"/>
  </div>
</div>

I hope you can help me with this code?

Thanks in advance

[Melanitski]

You should change:

      $scope.onGalleryInit = function() {
        $interval(( $scope.images.setIndex($scope.images.getIndex() + 1)), 2000)
      }

to:

      $scope.onGalleryInit = function(gallery) {
        $interval(( gallery.setIndex(gallery.getIndex() + 1)), 2000)
      }

[nevyen]

Ok for now I getting this error:

Error: null is not an object (evaluating 'this._$hostElement.children')
getItemWidth@http://localhost:9000/bower_components/angular-cycle-gallery/build/angular-cycle-gallery.min.js:1:18829
__calculatePositionForIndex@http://localhost:9000/bower_components/angular-cycle-gallery/build/angular-cycle-gallery.min.js:1:19236
_getPositionForNecessaryIndex@http://localhost:9000/bower_components/angular-cycle-gallery/build/angular-cycle-gallery.min.js:1:13769
_applyPositionForNecessaryIndex@http://localhost:9000/bower_components/angular-cycle-gallery/build/angular-cycle-gallery.min.js:1:13540
_rerender@http://localhost:9000/bower_components/angular-cycle-gallery/build/angular-cycle-gallery.min.js:1:14559
setIndex@http://localhost:9000/bower_components/angular-cycle-gallery/build/angular-cycle-gallery.min.js:1:10231
setIndex@http://localhost:9000/bower_components/angular-cycle-gallery/build/angular-cycle-gallery.min.js:1:1868
onGalleryInit@http://localhost:9000/app/main/main.controller.js:25:33

[Melanitski]

Could you show code main.controller.js?

[nevyen]

Sorry for the late answer.

Here is my Controller:

'use strict';

(function() {

  class MainController {


    constructor($http, $scope, socket, $interval) {
      this.$http = $http;
      this.$interval = $interval;
      this.baseIndex = 1;

      $http.get('/api/pictures').then(response => {
        $scope.images = response.data;
        socket.syncUpdates('image', this.images);
      });

      $scope.$on('$destroy', function() {
        socket.unsyncUpdates('image');
      });

      $scope.onGalleryInit = function(gallery) {
        $interval(( gallery.setIndex(gallery.getIndex() + 1)), 2000)
      }
    }

  }

  angular.module('gallery2App')
    .controller('MainController', MainController);

})();

[Melanitski]

Try this variant:

'use strict';

(function() {

  class MainController {


    constructor($http, $scope, socket, $interval) {
      this.$http = $http;
      this.$interval = $interval;
      $scope.images = [];

      $http.get('/api/pictures').then(response => {
        $scope.images = response.data;
        socket.syncUpdates('image', this.images);
      });

      $scope.$on('$destroy', function() {
        socket.unsyncUpdates('image');
      });

      $scope.onGalleryInit = function(gallery) {
        $interval(( gallery.setIndex(gallery.getIndex() + 1)), 2000)
      }
    }

  }

  angular.module('gallery2App')
    .controller('MainController', MainController);

})();