Create a gist now

Instantly share code, notes, and snippets.

@Shiti /lightbox.css
Last active Jun 10, 2016

What would you like to do?
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];
};
}
};
});

Does this directive require actual lightbox? Does it require a modal directive?

TylerLH commented Apr 30, 2014

@tatsuhirosatou it uses what I'm assuming is an old version of AngularUI's modal directive.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment