Lightbox component on top of angular material.
https://alirezamirian.github.io/angular-material-lightbox/demo/
Add dependency:
angular.module("yourApp", ['ame.lightbox'])
Use the ameLightbox
service:
angular.module("yourApp")
.controller("SomeController", function(ameLightbox){
var imageList = ['https://placehold.it/350x150', 'https://placehold.it/250x100'];
var options = {};
ameLightbox.show(imageList, options);
});
TODO
{
initialIndex: 0, // initial image to show
targetEvent: undefined, // to be passed to $mdDialog
buttonClass: "", // a list of classes to be added to navigation buttons
keyboard: true, // keyboard navigation
showDots: true, // whether to show dots or not
backdropOpacity: null, // default to $mdDialog defaults
}
npm install zd.ame-lightbox --save
bower install zd.ame-lightbox --save
npm install
gulp build
- [ ] Add directive
- [ ] make it fullscreen on small screens
- [ ] change dots size and functionality in small screens
- [ ] show thumbnail when image is not loaded yet