Card image

How to call flickr api in html website?

To begin using the Flickr API:

Step 1:

Add single line of html code

<div id="links"></div>

Step 2:

Add few line of javascript code


    url: (window.location.protocol === 'https:' ? 'https://secure' : 'http://api') + '',

    data: {

        format: 'json',

        method: 'flickr.photosets.getPhotos',

        api_key: 'YOUR-API-KEY',

        photoset_id: 'YOUR-ALBUM-ID'


    dataType: 'jsonp',

    jsonp: 'jsoncallback'

}).done(function (result) {

    var linksContainer = $('#links'),



    // Add the demo images as links with thumbnails to the page:

    $.each(, function (index, photo) {

        baseUrl = 'http://farm' + + '' + photo.server + '/' + + '_' + photo.secret;

       $('').append($('').prop("src", baseUrl + ".jpg"))

        .prop('href', baseUrl + '_b.jpg')

        .prop('title', photo.title)

        .attr('data-gallery', '')

        .attr('class', 'col-md-4')

        .attr('data-toggle', 'lightbox')




Writen By Shah Mohammed Ahsen Imadi
Created at 2019-12-27
Comment 1



Thank you for useful article. You have given very good information. Find out more information about web designing company in hyderabad

Writen By web designing company in hyderabad Created at 2020-03-20

Leave your comment