ngGallery, AngularJS图像库幻灯片幻灯片

分享于 

2分钟阅读

GitHub

  繁體 雙語
AngularJS Image Gallery Slideshow
  • 源代码名称:ngGallery
  • 源代码网址:http://www.github.com/SchwarzwaldFalke/ngGallery
  • ngGallery源代码文档
  • ngGallery源代码下载
  • Git URL:
    git://www.github.com/SchwarzwaldFalke/ngGallery.git
    Git Clone代码到本地:
    git clone http://www.github.com/SchwarzwaldFalke/ngGallery
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/SchwarzwaldFalke/ngGallery
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    ngGallery

    Angular 仅依赖( 没有 jQuery )。

    示例

    请查看现场演示

    安装

    带 Bower的:
    
    $ bower install ngGallery
    
    
    
    
    示例配置 app.js
    angular.module('app', ['jkuri.gallery']).
     controller('Ctrl', function($scope, $document) {
     var self =this;
     self.images= [
     {thumb:'images/thumbs/1.jpg', img:'images/1.jpg'},
     {thumb:'images/thumbs/2.jpg', img:'images/2.jpg'},
     {thumb:'images/thumbs/3.jpg', img:'images/3.jpg'},
     {thumb:'images/thumbs/4.jpg', img:'images/4.jpg'},
     {thumb:'images/thumbs/5.jpg', img:'images/5.jpg'},
     {thumb:'images/thumbs/6.jpg', img:'images/6.jpg'}
     ];
     }
    );
    index.html
    <htmlng-app="app">
    <head>
     <title>ngGallery</title>
     <linkrel="stylesheet"type="text/css"href="src/css/screen.css">
     <linkrel="stylesheet"type="text/css"href="src/css/ngGallery.css">
    </head>
    <bodyng-controller="Ctrl as ctrl">
    <divclass="content">
     <ng-galleryimages="ctrl.images"></ng-gallery>
    </div>
    <scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <scripttype="text/javascript"src="src/js/ngGallery.js"></script>
    <scripttype="text/javascript"src="app.js"></script>
    </body>
    </html>

    那就是。


    图像  angular  sli  Slide  gal  相册  
    相关文章