Skip to content

abodelot/angular-lightbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AngularJS Lightbox

npm npm npm

A minimal lightbox directive for AngularJS. No other dependencies!

Check out the demo page!

Installation

This project is available as npm package angularjs-lightbox:

npm install angularjs-lightbox

Include the directive sources (Javascript and CSS) in your AngularJS application:

<script src="https://code.angularjs.org/1.7.8/angular.min.js"></script>

<script src="angularjs-lightbox/src/angular-lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="angularjs-lightbox/src/angular-lightbox.css">

Usage

Declare an array of image URLs, or a single URL:

var app = angular.module('MyApp', ['angular-lightbox']);

app.controller('MyController',  function($scope) {
  $scope.myImages = ['foobar.png', 'foobaz.jpg', 'barbaz.gif'];

  $scope.imageUrl = 'foobar2.png';
});

In your view, use the lightbox attribute on any element, and use the lightbox-trigger class on any child element to trigger the lightbox opening.

Example for a list:

<ul lightbox="myImages">
  <li ng-repeat="image in myImages">
    <a href="image" class="lightbox-trigger">{{ image }}</a>
  </li>
</ul>

Example for a single image:

<span lightbox="imageUrl">
  <a href class="lightbox-trigger">link</a>
</span>

Keyboard shortcuts

  • Left: Previous image
  • Right: Next image
  • Home: First image
  • End: Last image
  • Escap: Close Lightbox

Dependencies

  • Angularjs >= 1.3

About

A minimal lightbox directive for AngularJS.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published