Flickr Photos on Ionic Cards

ionic-v1
1

Hi,

How can I get the photos from Flickr to be displayed on swipeable cards on Ionic? I tried to include Flickr image link on controller but it doesn’t display the image.

Here is the codepen:

codepen

Thanks in advance!

2

You are including the link to the images’s flickr page, not the image itself.
Try using this instead.

http://c1.staticflickr.com/9/8623/16316458139_a81138e0ed_n.jpg

To get this, go to the flickr page, inspect the element of the image,
you will see some img tags, find what image you need and use that image’s src.

Hope this helps :slight_smile:

3

Hi @EffakT ,

Thanks for pointing that out. I got it working now. Time to get rid of my laziness :smile:
And, how would I show a “no connection/network” Icon/Message if the connectivity is too slow for the image to load?

4

HI @naveenkarippai1, you may create new topic about this question. In my options, i will create a directive to handle it:

angular.directive('imageListener', ['YOUR_NOTIFICATION_SERVICE', function (YOUR_NOTIFICATION_SERVICE) {
  return {
    ...
    restrict: 'A',
    link: function (scope, element, attrs) {
        element.on('load', function () {
            var configs = {
                maxLoadTime: 3 // second
            };

            var start = new Date();

            element.on('load', function () {
                var end = new Date();
                var diff = (end.getTime() - start.getTime()) * 1000;

                if (diff > configs.maxLoadTime) {
                    // Use $ionicModal or other service to do some notification
                    YOUR_NOTIFICATION_SERVICE ...
                }
            });
        });
    }
  }
}]);

and then add this directive to img:

<img image-listener ng-src="URL_FOR_IMAGE">

Hope this can help you :smile:

1 Like