Question

我目前有一个以角度打印的图像数组，我可以选择并在zip文件中下载，我想改变这个功能来创建幻灯片。

我有bootstrap导入的bootstrap所以我可以使用它。

剂量任何人都知道如何将选定的转变为滑块？

Summery

我选择的照片如下所示我想在新的滑块或幻灯片/品牌中显示。

我可以使用自举滑块我需要知道如何插入在滑块中选择的照片。

前端

  <div class="row">
                <div class="mock-ups">
                    <h3 ng-show="canvasHide"> Select up to 3 photos to download</h3>
                    <div class="photos" ng-repeat="slide in gallery track by $index">
                        <img ng-src="{{slide}}" ng-click="select(slide, $index)" ng-class='select[$index]'>
                        <div class="look-up btn btn-primary" ng-click="openLightboxModal($index)">l</div>

                    </div>

                    <div class="dwn-button">
                        <div class="btn btn-primary download" ng-click="download()" ng-show="downloadBtn">Download</div>
                        <!--<div class="btn btn-primary" ng-click='download()'>submit</div-->
                    </div>
                </div>
            </div>

后端节点代码

app.post('/mm3/downloadZip', function(req, res){
        console.log('test zip file started');
        var photos = req.body;
        var out =  photos[0];
        var test = out.split('/');
        var loc  = test.pop();
        var end =  test.join('/');
        console.log('test 3 function Generate zip file');
        console.log(end);
        var outName = '/var/www/html' + end +'/MockUp.zip';
        var output = fs.createWriteStream(outName);
        var archive = archiver('zip', {store: true });
        var zip = function(photos, f){
            for(var t = 0; t < photos.length; t++){
                var file = 'mockUp'+ t +'.jpg';
                var from = '/var/www/html' +  photos[t];
                archive.file( from, { name: file });
            }
            f();
        };

        output.on('close', function() {
            var photos = req.body;
            var out =  photos[0];
            var test = out.split('/');
            var loc  = test.pop();
            var end =  test.join('/');
            res.send(end + '/MockUp.zip');
            console.log('archiver has been finalized and the output file descriptor has closed.');
        });
        archive.on('error', function(err) {
            throw err;
        });

        archive.pipe(output);
        zip(photos, f);
        function f(){
            archive.finalize();
        }
    });

Answer 1

请参阅此angularjs图库教程： https://www.script-tutorials.com/photo-gallery-with-angularjs-and-css3/

类似于：

'use strict';
angular.module('example366', ['ngAnimate', 'ngTouch'])
.controller('MainCtrl', function ($scope) {
// Set of Photos
$scope.photos = [
{src: 'http://farm9.staticflickr.com/8042/7918423710_e6dd168d7c_b.jpg', desc: 'Image 01'},
{src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
{src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
{src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
{src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
{src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
];
// initial image index
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
};
// show next image
$scope.showNext = function () {
$scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};
});

Answer 2

您可以提供某种界面来选择图像并维护该图像列表以进入滑块

vm.generateSlider = function() {
  vm.sliderImageList = vm.imageList.filter(function(x) {
    return x.isSelected;
  });
  if (vm.sliderImageList.length) {
    $('.carousel').carousel({
      interval: 2000
    });
  }
};


<div class="carousel slide" id="myCarousel">
  <div class="carousel-inner">
    <div class="item" ng-repeat="item in sliderImageList">
      <ul class="thumbnails">
        <li class="col-xs-4 col-xs-offset-4">
          <div class="fff">
            <div class="thumbnail">
              <a href="#"><img src="{{item.img}}" alt=""></a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

example here

将所选照片转换为幻灯片放映节点和角度javascript

2 个答案: