Angular-Bootstrap-Lightbox是一个基于AngularJS和Bootstrap的轻量级图片浏览库。它提供了丰富的图片预览功能，比如缩放、旋转、拖动等。
安装
在使用Angular-Bootstrap-Lightbox之前，需要先安装它。可以通过npm进行安装：
npm install angular-bootstrap-lightbox --save
安装完成之后，在你的Angular应用中引入Angular-Bootstrap-Lightbox模块：
angular.module('myApp', ['bootstrapLightbox']);使用
基本用法
使用Angular-Bootstrap-Lightbox最简单的方法是在HTML模板中添加指令，并将相应的图片数据传递给指令：
<lightbox images="images"></lightbox>
其中images是一个数组，包含了所有要显示的图片信息，比如URL、标题等。例如：
-- -------------------- ---- -------
------------- - -
-
---- --------------------------------
-------- ------ --
--
-
---- --------------------------------
-------- ------ --
-
--这样就能在页面上显示两张图片，并且用户可以通过点击图片来进行查看。
高级用法
除了基本用法，Angular-Bootstrap-Lightbox还提供了许多高级功能，比如预加载、自定义模板等。下面将介绍一些常用的高级用法。
预加载
如果页面中有大量的图片需要加载，用户可能需要等待较长时间才能看到他们。为了加快加载速度，可以使用预加载功能。
<lightbox images="images" preload></lightbox>
在指令中添加preload属性即可启用预加载功能。
自定义模板
默认情况下，Angular-Bootstrap-Lightbox会使用内置的模板来显示图片。如果需要自定义模板，可以使用template-url属性：
<lightbox images="images" template-url="my-template.html"></lightbox>
其中my-template.html是你自己定义的模板文件。
事件监听
Angular-Bootstrap-Lightbox提供了多种事件，可以让你对图片的操作进行监听，比如打开、关闭、旋转等。例如，如果你想要监听用户在打开图片时的行为：
$scope.$on('lightbox.image.open', function(event, args) {
console.log(args);
});当用户打开一张图片时，控制台将输出打印出这张图片的详细信息。
示例代码
以下是一个完整的示例代码，展示了如何使用Angular-Bootstrap-Lightbox来显示一些图片：
-- -------------------- ---- ------- --------- ----- ----- --------------- ------ ------ ---------------- --------------- --------- -------- ------------ ------ ---------------- ----------------------------------------------------------------------------- -------- ------------------------------------------------------------------------------------ -------- -------------------------------------------------------------------------------------------------------------------------- ------- ----- ----------------------- ----- ------------------ ------------- --------- -------- --------- ----------- --------------- ------------------- ------- --------- ----- --- - ----------------------- ----------------------- -------------------------- ---------------- ---------- ---------------- - - --- - --- ---- -------------------------------- --- -------- ------ -- --- -- --- - --- ---- -------------------------------- --- -------- ------ -- --- -- --- - --- ---- -------------------------------- --- -------- ------ -- --- - ----- ----- ---------- ------- -------
结语
使用Angular-Bootstrap-Lightbox可以方便地为你的网站
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37268