0

私はウェブサイトに lightGallery を使用しており、主に携帯電話での読み込みを高速化するために、ギャラリー ページに「さらに読み込む」ボタンを追加したいと考えていました。いろいろな方法を見つけて試してみました。それらのほとんどは機能しないか、要求に応じて要素をロードする必要性に適合しません。

それらの 1 つは AngularJS を使用していました。 

var DemoApp = angular.module("DemoApp", []);
DemoApp.controller("DemoController",

function DemoController($scope) {
    $scope.quantity = 0;
    $scope.temp = [];
    $scope.loadMore = function () {
        for (i = $scope.quantity; i <= $scope.quantity + 1; i++) {
            $scope.temp.push($scope.images[i]);
        }
        $scope.quantity = i;
    }

    $scope.images = [{
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13244856_238092939903469_3778800896503555327_n.jpg?oh=e539748b060ba0cb43852314e2fdef0b&oe=57F01511"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13263891_238096316569798_4073904852035872297_n.jpg?oh=91a76b3515ac628706b912fdd3e9a346&oe=585C3DD1"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13260007_238096336569796_6324932140560503740_n.jpg?oh=1795ba25c4604dced3cdcc91b9729cc7&oe=5820EE5A"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12871473_238096353236461_8115646425269026926_n.jpg?oh=b8958326d24a1a649e6a40adf29b062b&oe=582BFD38"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13256520_238096376569792_9057528716929719317_n.jpg?oh=a6bc66f75992c88260ae35bd4dbc9ff1&oe=5856F934"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13254297_238096389903124_1429633590050411734_n.jpg?oh=5e8c94a0b6a77dea110704a5727e0ee5&oe=5819B551"
    }, {
        "src": "https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13267713_238096416569788_8740461856631991826_n.jpg?oh=739e3268996e498f65867b314265250b&oe=585E4C93"
    }];

    $scope.loadMore();
});

これが私の HTML マークアップです。

<div class="col-xs-12">
<div ng-app="DemoApp" ng-controller="DemoController">
<div id="fotoalbum" class="col-thumb-wrap">

<div class="col-thumb" ng-repeat="image in temp" data-src="{{image.src}}">
<a href="{{image.src}}">
<i class="thumb" style="background-image: url({{image.src}});"></i>
</a>
</div>

</div>
<button class="btn btn-default" ng-click="loadMore()">Ik wil meer</button>
</div>
</div>

「さらに読み込む」ボタン自体は機能しましたが、lightGallery 自体が壊れていました。例: http://cytex.nl/projects/jk-installaties/album2.php

次に、この StackOverflow questionで lightGallery を AngularJS で動作させるための解決策を見つけました

2つを組み合わせようとしましたが、まだ機能しません。これで lightGallery は正常に起動されますが、「もっと読み込む」ボタンは何もしません!

例: http://cytex.nl/projects/jk-installaties/album1.php

var DemoApp = angular.module('DemoApp', []);
DemoApp.controller('DemoController',
function DemoController($scope, $sce) {  
    $scope.total = 0;
  $scope.temp = [];
  $scope.loadMore = function () {
    for (x = $scope.total; x <= $scope.total + 1; x++) {
      $scope.temp.push($scope.photos[x]);
    }
    $scope.total = x;
  }

    $scope.photos = [{
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13244856_238092939903469_3778800896503555327_n.jpg?oh=e539748b060ba0cb43852314e2fdef0b&oe=57F01511'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13263891_238096316569798_4073904852035872297_n.jpg?oh=91a76b3515ac628706b912fdd3e9a346&oe=585C3DD1'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13260007_238096336569796_6324932140560503740_n.jpg?oh=1795ba25c4604dced3cdcc91b9729cc7&oe=5820EE5A'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/12871473_238096353236461_8115646425269026926_n.jpg?oh=b8958326d24a1a649e6a40adf29b062b&oe=582BFD38'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13256520_238096376569792_9057528716929719317_n.jpg?oh=a6bc66f75992c88260ae35bd4dbc9ff1&oe=5856F934'
    }, {
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13254297_238096389903124_1429633590050411734_n.jpg?oh=5e8c94a0b6a77dea110704a5727e0ee5&oe=5819B551'
    },{
        fullres: 'https://scontent-ams3-1.xx.fbcdn.net/v/t1.0-9/13267713_238096416569788_8740461856631991826_n.jpg?oh=739e3268996e498f65867b314265250b&oe=585E4C93'
    }];

  $scope.loadMore();

    for (var i = 0; i < $scope.photos.length; i++) {
        $scope.photos[i].fullres = $sce.trustAsResourceUrl($scope.photos[i].fullres);
    }
})
.directive('lightgallery', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      if (scope.$last) {
        element.parent().lightGallery({
            showThumbByDefault: false
        });
      }
    }
  };
});

私はAngularJSに非常に慣れていないので、これが本当にばかげた質問であれば申し訳ありません. 問題を特定し、これに取り組む方法についての指針を得るのを手伝ってもらえますか?

4

2 に答える 2

0

この問題に遭遇したその他の場合:

もちろん、Ramin Esfahani の答えは正しいです。ただし、「さらに読み込む」ボタンがクリックされるたびに、lightGallery データを破棄する必要もあります。これはディレクティブ部分で行われます。もちろん「#fotoalbum」は自分のIDやクラスに変更してください。これはコードです：

.directive('lightgallery', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      if (scope.$last) {
        element.parent().lightGallery({
            showThumbByDefault: false
        });
        $('#LoadMore').on('click', function(){
          $('#fotoalbum').data('lightGallery').destroy('true');
          $('#fotoalbum').lightGallery({
            showThumbByDefault: false
          });
        });
      }
    }
  };
})
于 2016-08-17T17:01:42.407 に答える