css AngularJS Lightbox指令

Posted 2021-05-13

var component = angular.module('Components',[]);
"use strict";

component.directive('lightbox', function () {
    return {
        restrict: 'E',
        templateUrl: "/assets/templates/lightbox.html",
        scope: {
            images: '='
        },

        replace: true,

        controller: function ($rootScope, $scope) {
            $scope.path = "src";
            $scope.tileWidth = 150;
            $scope.tileHeight = 150;

            $scope.displayImage = function (img) {
                $scope.selected = $scope.images.indexOf(img);
                $scope.selectedImg = img;
                $scope.showModal = true;
            };

            $scope.source = function (img) {
                return img[$scope.path];
            };

            $scope.hasPrev = function () {
                return ($scope.selected !== 0);
            };
            $scope.hasNext = function () {
                return ($scope.selected < $scope.images.length - 1);
            };

            $scope.next = function () {
                $scope.selected = $scope.selected + 1;
                $scope.selectedImg = $scope.images[$scope.selected];
            };

            $scope.prev = function () {
                $scope.selected = $scope.selected - 1;
                $scope.selectedImg = $scope.images[$scope.selected];
            };
        }
    };
});

<div class="lightbox">
    <div class="lightbox-tiles">
        <span data-ng-repeat="i in images" data-ng-click="displayImage(i)">
            <img width="{{tileWidth}}px" height="{{tileHeight}}px" data-ng-src="{{source(i)}}">
        </span>
    </div>
    <div modal="showModal">
        <div class="lightbox-header">
            {{selectedImg.header}}
            <button class="lightbox-close" data-ng-click="showModal=false;">x</button>
        </div>
        <div class="lightbox-content">
            <div class="lightbox-image">
                <button class="lightbox-prev" data-ng-show="hasPrev()" data-ng-click="prev()">prev</button>
                <img data-ng-src={{source(selectedImg)}}>
            </div>
            <div class="lightbox-description">
                {{selectedImg.description}}
                <button class="lightbox-next" data-ng-show="hasNext()" data-ng-click="next()">next</button>
            </div>
        </div>
    </div>
</div>

.modal {
    width: 800px;
    left: 40%;
}

.lightbox-content {
    width: 100%;
}

.lightbox-image {
    width: 50%;
}

.lightbox-image img {
    max-width: 100%;
    max-height: 100%;
}

.lightbox-description {
    width: 50%;
}

.lightbox-close {
    position: absolute;
    left: 95.8%;
    top: -1%;
}

.lightbox-prev {
    top: 50%;
    position: absolute;
}

.lightbox-next {
    top: 50%;
    position: absolute;
    left: 93%;
}