angularjs-lightbox
Advanced tools
Comparing version
{ | ||
"name": "angularjs-lightbox", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "A minimal lightbox directive for AngularJS.", | ||
@@ -5,0 +5,0 @@ "repository": { |
@@ -1,4 +0,7 @@ | ||
Angular Lightbox | ||
---------------- | ||
# AngularJS Lightbox | ||
 | ||
 | ||
 | ||
A minimal lightbox directive for AngularJS. No other dependencies! | ||
@@ -10,9 +13,15 @@ | ||
Include the directive (Javascript and CSS) in your angular application: | ||
This project is available as npm package `angularjs-lightbox`: | ||
``` | ||
npm install angularjs-lightbox | ||
``` | ||
Include the directive sources (Javascript and CSS) in your AngularJS application: | ||
```html | ||
<script src="https://code.angularjs.org/1.7.8/angular.min.js"></script> | ||
<script src="src/angular-lightbox.js"></script> | ||
<link type="text/css" rel="stylesheet" href="src/angular-lightbox.css" /> | ||
<script src="angularjs-lightbox/src/angular-lightbox.js"></script> | ||
<link type="text/css" rel="stylesheet" href="angularjs-lightbox/src/angular-lightbox.css"> | ||
``` | ||
@@ -37,2 +46,3 @@ | ||
Example for a list: | ||
```html | ||
@@ -47,2 +57,3 @@ <ul lightbox="myImages"> | ||
Example for a single image: | ||
```html | ||
@@ -49,0 +60,0 @@ <span lightbox="imageUrl"> |
@@ -14,3 +14,3 @@ /** | ||
scope: { | ||
lightbox: '=lightbox' | ||
lightbox: '<*' | ||
}, | ||
@@ -49,6 +49,6 @@ link: function(scope, element, attrs) { | ||
'<span class="angular-lightbox-inner">' + | ||
'<a href class="previous" title="Previous">«</a>' + | ||
'<img src="" />' + | ||
'<a href class="next" title="Next">»</a>' + | ||
'<a href class="close" title="Close">×</a>' + | ||
'<a href class="previous" title="Previous">‹</a>' + | ||
'<img src="">' + | ||
'<a href class="next" title="Next">›</a>' + | ||
'<a href class="close" title="Close">×</a>' + | ||
'</span>' + | ||
@@ -61,2 +61,7 @@ '</div>' | ||
// Hide navigation buttons for single image | ||
if (scope.images.length === 1) { | ||
dom.classList.add('single-image'); | ||
} | ||
// Find image matching clicked link | ||
@@ -80,3 +85,5 @@ var index = scope.images.indexOf(clickedElement.getAttribute('href')); | ||
scope.showNext(); | ||
} else if (e.target.classList.contains('close')) { | ||
} else if (e.target.classList.contains('close') | ||
|| e.target.classList.contains('angular-lightbox-overlay')) { | ||
// Click on close or empty space | ||
scope.closeLightbox(); | ||
@@ -99,3 +106,2 @@ } | ||
scope.onKeyDown = function(event) { | ||
console.log('toto') | ||
switch (event.which) { | ||
@@ -102,0 +108,0 @@ case 37: // Left arrow |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
190086
0.39%223
4.69%73
17.74%