1

For displayiny gallery I use lytebox. For pagination I use AngularJS. While first page of gallery works fine, pictures on next pages are not connected with lytebox. I think that the reason is becouse script lytebox.js discover only pictures on first page, after load page. How to force lytebox to refresh after next gallery pages ?

Html and AngularJS script for pagination:

    <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>
Tomasz
  • 1,368
  • 3
  • 17
  • 31

1 Answers1

0

I resolved that problem by myself. I initialized lytebox in $scope.pageChanged and it works.

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

$scope.figureOutTodosToDisplay();

$scope.pageChanged = function () {
    $scope.figureOutTodosToDisplay();
    forceLyteboxInit();
};
Tomasz
  • 1,368
  • 3
  • 17
  • 31