angularjs - turn selected photos into slide show node and angular javascript -


i have array of images printing out in angular can select , download in zip file, want alter function create slide show.

i have bootstrap imported bootstrap can use this.

dose know how turn selected slider ?

summery

the photos select bellow wish display in new slider or slide show/marque.

i can use bootstrap slider jut need know how insert photos selected in slider.

frontend

  <div class="row">                 <div class="mock-ups">                     <h3 ng-show="canvashide"> select 3 photos download</h3>                     <div class="photos" ng-repeat="slide in gallery track $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> 

backend node code

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 = '/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 , output file descriptor has closed.');         });         archive.on('error', function(err) {             throw err;         });          archive.pipe(output);         zip(photos, f);         function f(){             archive.finalize();         }     }); 

see angularjs gallery tutorial: https://www.script-tutorials.com/photo-gallery-with-angularjs-and-css3/

something along lines of:

'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 current image same 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 image $scope.showphoto = function (index) { $scope._index = index; }; }); 

Comments

Popular posts from this blog

javascript - Create a stacked percentage column -

Optimising Firebase database by automatically overwriting data -

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -