angular-bootstrap-lightbox, 使用用户界面 Bootstrap Modal 构建的AngularJS lightbox

分享于 

7分钟阅读

GitHub

  繁體 雙語
Lightbox using AngularUI Bootstrap Modal
  • 源代码名称:angular-bootstrap-lightbox
  • 源代码网址:http://www.github.com/compact/angular-bootstrap-lightbox
  • angular-bootstrap-lightbox源代码文档
  • angular-bootstrap-lightbox源代码下载
  • Git URL:
    git://www.github.com/compact/angular-bootstrap-lightbox.git
    Git Clone代码到本地:
    git clone http://www.github.com/compact/angular-bootstrap-lightbox
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/compact/angular-bootstrap-lightbox
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    angular-bootstrap-lightbox

    这里收藏夹使用 AngularUI Bootstrap Modal ( v0.14 ) 显示图像。

    打开后,可以通过单击按钮 上面 来实现上一个/下一个图像,单击左/右箭头键或者右/右( 可选 ngTouch )。 关闭模式的退出键被 AngularUI Bootstrap 自动绑定。

    大图像被缩放以适应 inside 窗口。 图像的左上角有一个可选的图像标题覆盖。

    演示

    演示/Plunker

    设置

    • 按以下方式之一安装:
    • 使用 Bower 安装: bower install angular-bootstrap-lightbox --save
    • 使用npm安装: npm install angular-bootstrap-lightbox --save
    • 手动保存来自 dist的脚本和样式表。
    • 在你的应用程序中包含样式表:
    <linkrel="stylesheet"href="angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.css">
    • 在你的应用程序中包含脚本:
    <scriptsrc="angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
    • Angular MODULE 名为 bootstrapLightbox。 将它作为一个依赖项添加到模块中:
    angular.module('app', ['bootstrapLightbox']);
    • 可选依赖项:

    基本示例

    图库:

    <ulng-controller="GalleryCtrl">
     <ling-repeat="image in images">
     <ang-click="openLightboxModal($index)">
     <imgng-src="{{image.thumbUrl}}"class="img-thumbnail">
     </a>
     </li>
    </ul>

    控制器:

    angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
     $scope.images= [
     {
     'url':'1.jpg',
     'caption':'Optional caption',
     'thumbUrl':'thumb1.jpg'// used only for this example },
     {
     'url':'2.gif',
     'thumbUrl':'thumb2.jpg' },
     {
     'url':'3.png',
     'thumbUrl':'thumb3.png' }
     ];
     $scope.openLightboxModal=function (index) {
     Lightbox.openModal($scope.images, index);
     };
    });

    配置

    更改模式收藏夹的外观

    lightbox的默认视图模板是 lightbox.html。 通过创建自定义模板和/或者添加CSS规则,可以改变它的外观;例如使用选择器 .lightbox-image-caption 来设置标题的样式。

    如果你自己制作模板并在 lightbox.html 中保存,则不需要进一步的代码。 如果将它保存在另一个路径中,请在提供程序中将它的设置为:

    angular.module('app').config(function (LightboxProvider) {
     // set a custom templateLightboxProvider.templateUrl='path/to/your-template.html';
    });

    禁用键盘导航

    可以随时启用/禁用 lightbox/right键的键盘导航,通过更改布尔值的值来启用/禁用。

    图像的array

    Lightbox.openModal的第一个参数必须是 array,它的元素可能是任何类型。 在基本示例 上面 中,它是具有属性 urlcaption的对象的array,但这只是默认值并且不是必需的。 要让 Lightbox 服务知道正确的值,请在提供程序中设置以下方法:

    angular.module('app').config(function (LightboxProvider) {
     LightboxProvider.getImageUrl=function (image) {
     return'/base/dir/'+image.getName();
     };
     LightboxProvider.getImageCaption=function (image) {
     returnimage.label;
     };
    });

    图像和模态缩放

    在默认情况下,只有当图像过大而不包含滚动时,图像才会缩放。

    如果希望将所有图像都缩放到可能的最大尺寸,请更新 Lightbox.fullScreenMode 布尔值:

    angular.module('app').config(function (LightboxProvider) {
     LightboxProvider.fullScreenMode=true;
    });

    有关更多自定义行为,请参见 calculateImageDimensionLimitscalculateModalDimensions 方法的文档

    视频

    如果'图像'array 中的元素是具有值为 video ( 参见演示。)的type 属性的对象,则将它的视为视频。 若要更改这里选项,请编写自己的LightboxProvider.isVideo 方法。

    如果视频在 .mp4.ogg 或者 .webm 中结束,则会直接嵌入视频。 其他的url被认为是来自外部共享服务( 如 YouTube )的视频。 若要更改这里检查,请编辑 LightboxProvider.isSharedVideo 方法。 如果 ng-videosharing-embed 库包含在你的应用程序中,则用于嵌入共享视频。 你可以通过更改模板来使用其他视频库。

    目前,最大视频尺寸是固定在 1280 x720 ( 16: 9 )。

    插件开发

    • API文档 Angular 模块中的服务和指令

    • 设置:

      npm install
      bower install
    • 生成:

      grunt
    • 生成文档:

      grunt jsdoc2md
    • 为GitHub页面提供服务:

      git checkout gh-pages
      git checkout master -- dist/angular-bootstrap-lightbox.min.js dist/angular-bootstrap-lightbox.min.css
      bundle install
      bundle exec jekyll serve

    BOO  angular  Light  引导  Bootstrap  modal  
    相关文章