Lytebox Galerie funktioniert nicht mit AngularJS Paginierung in der Galerie

Question

Für Displayiny Galerie verwende ich lytebox. Für die Paginierung verwende ich AngularJS. Während die erste Seite der Galerie funktioniert, sind die Bilder auf den nächsten Seiten nicht mit lytebox verbunden. Ich denke, dass der Grund dafür ist, dass das Skript lytebox.js nur Bilder auf der ersten Seite nach der Lade-Seite erkennt. Wie lytebox erzwingen, nach den nächsten Galerieseiten zu aktualisieren?

Html und AngularJS Skript für Paginierung:

<div class="row pictures"> 

    <div class="col-xs-3 picture td tac" ng-repeat="galeria in galerie"> 

     <?php if ($this->mySettings['lista_galerii']) : ?> 
      <a href="<?php echo $this->baseUrl; ?>/Galeria/nr/{{ galeria.id}}"> 
       <img ng-src="<?php echo $this->baseUrl; ?>/public/admin/podstrony/{{ galeria.img}}" alt="{{ galeria.galnazwa}}" /> 
      </a> 
      <a href="<?php echo $this->baseUrl; ?>/Galeria/nr/{{ galeria.id}}"> 
       <div class="nazwaGalerii">{{ galeria.galnazwa}}</div> 
      </a> 
     <?php else : ?> 
      <a ng-show="!galeria.length" href="<?php echo $this->baseUrl; ?>/public/admin/podstrony/{{ galeria.img}}" 
       class="lytebox" data-lyte-options="group:galeria titleTop:false navTop:true" 
       data-title="<?php echo htmlspecialchars(stripslashes($html['link'])); ?>" 
       data-description=""> 
       <img class="galeriaImg" ng-src="<?php echo $this->baseUrl; ?>/public/admin/podstrony/{{ galeria.img}}" 
        alt="<?php echo htmlspecialchars(stripslashes($html['link'])); ?>" 
        title="<?php echo htmlspecialchars(stripslashes($html['link'])); ?>" /> 
      </a> 
     <?php endif; ?> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
     <div class="dt center"> 
      <uib-pagination        
       total-items="noArticles" 
       max-size="10" 
       items-per-page="itemsPerPage" 
       ng-model="currentPage" 
       ng-change="pageChanged()"        
       previous-text="&lsaquo;" 
       next-text="&rsaquo;"        
       >        
      </uib-pagination> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    app.controller('GaleriaController', ['$scope', '$filter', function ($scope, $filter) { 
      //   $scope.galerie = <?= json_encode($this->galerie); ?>; 
      $scope.zdjecia = <?= json_encode($this->galeria); ?>; 

      $scope.itemsPerPage = 12; 
      $scope.currentPage = 1; 
      $scope.noArticles = $scope.zdjecia.length; 

      $scope.todos = $scope.zdjecia; 

      $scope.figureOutTodosToDisplay = function() { 
       var begin = (($scope.currentPage - 1) * $scope.itemsPerPage); 
       var end = begin + $scope.itemsPerPage; 
       $scope.galerie = $scope.todos.slice(begin, end); 
      }; 

      $scope.figureOutTodosToDisplay(); 

      $scope.pageChanged = function() { 
       $scope.figureOutTodosToDisplay(); 
      }; 
      $scope.noArticles = $scope.zdjecia.length; 

      $scope.pagesNo = $scope.noArticles/$scope.itemsPerPage; 

      $scope.galerieGlownaMainpage = <?= json_encode($this->galerieStronaGlowna[0]); ?>; 

     }]); 
</script> 

Answer 1

beschloss ich, dieses Problem allein. Ich initiierte lytebox in $scope.pageChanged und es funktioniert.

forceLyteboxInit = function() { 
    setTimeout(
      function() 
      { 
       initLytebox(); 
      }, 500); 
} 

$scope.figureOutTodosToDisplay(); 

$scope.pageChanged = function() { 
    $scope.figureOutTodosToDisplay(); 
    forceLyteboxInit(); 
};