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
Post a Comment