LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  
  

  Flickr

    
    
    
  




  
    

Flickr Search

CSS
#search-input {
  text-align: center;
}

#photos {
  margin: auto;
}

.photo {
  width: 100px;
  height: 100px;
  margin: 1px;
  float: left;
  overflow: hidden;
}
.photo img {
  min-width: 100%;
  min-height: 100%;
  max-width: 150%;
  max-height: 150%;
}

#search-bar {
  background: none;
  position: absolute;
  width: 100%;
  top: 44px;
  height: 40px;
  z-index: 3;
}
#search-bar .item {
  background: none;
  border: none;
}
#content {
  top: 44px;
  padding-top: 45px;
  padding-bottom: 20px;
}
JS
angular.module('ionicApp', ['ionic', 'ngResource'])

.factory('Flickr', function($resource, $q) {
  var photosPublic = $resource('http://api.flickr.com/services/feeds/photos_public.gne', 
      { format: 'json', jsoncallback: 'JSON_CALLBACK' }, 
      { 'load': { 'method': 'JSONP' } });
      
  return {
    search: function(query) {
      var q = $q.defer();
      photosPublic.load({
        tags: query
      }, function(resp) {
        q.resolve(resp);
      }, function(err) {
        q.reject(err);
      })
      
      return q.promise;
    }
  }
})

.controller('FlickrCtrl', function($scope, Flickr) {

  var doSearch = ionic.debounce(function(query) {
    Flickr.search(query).then(function(resp) {
      $scope.photos = resp;
    });
  }, 500);
  
  $scope.search = function() {
    doSearch($scope.query);
  }

})

.directive('pushSearch', function() {
  return {
    restrict: 'A',
    link: function($scope, $element, $attr) {
      var amt, st, header;

      $element.bind('scroll', function(e) {
        if(!header) {
          header = document.getElementById('search-bar');
        }
        st = e.detail.scrollTop;
        if(st < 0) {
          header.style.webkitTransform = 'translate3d(0, 0px, 0)';
        } else {
          header.style.webkitTransform = 'translate3d(0, ' + -st + 'px, 0)';
        }
      });
    }
  }
})

.directive('photo', function($window) {
  return {
    restrict: 'C',
    link: function($scope, $element, $attr) {
      var size = ($window.outerWidth / 3) - 2;
      $element.css('width', size + 'px');
    }
  }
});

Description

Demo of loading images using the Flickr API with Ionic.
Term
Mon, 11/27/2017 - 21:32

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv