Skip to content

Instantly share code, notes, and snippets.

@edwinestrada
Forked from Shiti/lightbox.css
Created October 30, 2015 12:24
Show Gist options
  • Save edwinestrada/c81f6029d6df226dc396 to your computer and use it in GitHub Desktop.
Save edwinestrada/c81f6029d6df226dc396 to your computer and use it in GitHub Desktop.
AngularJS Lightbox directive
.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%;
}
<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>
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];
};
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment