i have built following simple app loads in media instagram api using angularjs. add button @ bottom when click reloads , randomises content. example length of pics 20, , 6 shown, want show random 6 of 20 each time button clicked. how go this?
machinas.com/wip/machinas/instagramfeed/
html
<section ng-controller="showimages images" class="page" ng-hide="pics.length < 6"> <div class="container" data-ng-class="{ 'loaded': pics.length > 0 }"> <div ng-show="layout == 'grid'" class="row"> <!-- view big photos , no text --> <div ng-repeat="p in pics | limitto: 6" class="column large-4 overlay-col"> <a href="{{p.link}}" target="_blank"><img ng-src="{{p.images.standard_resolution.url}}" /></a> <div class="overlay-hover"> <div class="overlay-content"> <a href="{{p.comments.data|getfirstcommentfrom:'alx_lloyd'}}" class="cta-1">discover now</a> </div> </div> </div> </div> .. js
(function(){ //place own instagram client_id below. go https://instagram.com/developer/clients/manage/ , register app client id var client_id = '83aaab0bddea42adb694b689ad169fb1'; //to user id go http://jelled.com/instagram/lookup-user-id , enter instagram user name user id var user_id = '179735937'; var app = angular.module('instafeed', ['nganimate']); app.filter('getfirstcommentfrom',function(){ return function(arr, user){ for(var i=0;i<arr.length;i++) { if(arr[i].from.username==user) return arr[i].text; } return ''; } }) app.factory("instagramapi", ['$http', function($http) { return { fetchphotos: function(callback){ var endpoint = "https://api.instagram.com/v1/users/self/media/liked/"; endpoint += "?access_token=179735937.83aaab0.e44fe9abccb5415290bfc0765edd45ad"; endpoint += "&callback=json_callback"; /* var endpoint = "https://api.instagram.com/v1/users/" + user_id + "/media/recent/?"; endpoint += "?count=99"; endpoint += "&client_id=" + client_id; endpoint += "&callback=json_callback"; */ $http.jsonp(endpoint).success(function(response){ callback(response.data); }); } } }]); app.controller('showimages', function($scope, instagramapi){ $scope.layout = 'grid'; $scope.data = {}; $scope.pics = []; instagramapi.fetchphotos(function(data){ $scope.pics = data; console.log("length "+data.length) }); }); })();
html
<button ng-click="shuffle()"> shuffle </button> js (inside showimages controller)
$scope.shuffle = function() { $scope.pics.sort(function() { return 0.5 - math.random() }); } or
$scope.shuffle = function() { for(var j, x, = $scope.pics.length; i; j = parseint(math.random() * i), x = $scope.pics[--i], $scope.pics[i] = $scope.pics[j], $scope.pics[j] = x); } references:
Comments
Post a Comment