简体   繁体   中英

Javascript - Wrap my Flickr Api image request with link

I need to wrap the image outputted from this request with a link and my API knowledge is limited so unfortunately I have hit a wall.

Here is my current function that outputs the images from the album. Please see fiddle for working version.

    var endpoint = "https://api.flickr.com/services/rest/"
    var apiKey = "e3e0e77b3f6aa14bc816b1e6855f70b7";
    var photosetId = "72157682947882356";
    var extras = "url_sq,url_t,url_s,url_m,url_o";
    var method = "flickr.photosets.getPhotos";

    var request = endpoint+"?method="+method+
                "&api_key="+apiKey+
                "&photoset_id="+photosetId+
                "&extras="+extras+
                "&format=json&jsoncallback=?";
    $.getJSON(request,buildGallery);

    function buildGallery(data,result){
        if(result=="success"){
            var photos = data.photoset.photo;
            for(var i=0; i<photos.length; i++){
                $('<img class="gallery_image" >').attr("src",photos[i].url_m).appendTo(".flicker");

            }
        }

    }

https://jsfiddle.net/samwsmith/88834z4f/

Thanks for you time.

I managed to work this out and adding this .wrap("<a href='" + photos[i].url_o + "'> </a>"); to my buildGallery function worked.

    var endpoint = "https://api.flickr.com/services/rest/"
    var apiKey = "e3e0e77b3f6aa14bc816b1e6855f70b7";
    var photosetId = "72157682947882356";
    var extras = "url_sq,url_t,url_s,url_m,url_o";
    var method = "flickr.photosets.getPhotos";

    var request = endpoint+"?method="+method+
                "&api_key="+apiKey+
                "&photoset_id="+photosetId+
                "&extras="+extras+
                "&format=json&jsoncallback=?";
    $.getJSON(request,buildGallery);

    function buildGallery(data,result){
        if(result=="success"){
            var photos = data.photoset.photo;
            for(var i=0; i<photos.length; i++){
                $('<img class="gallery_image" >').attr("src",photos[i].url_m).appendTo(".flicker").wrap("<a href='" + photos[i].url_o + "'>  </a>");


            }
        }

    }

Updated fiddle: https://jsfiddle.net/samwsmith/88834z4f/ I hope this helps anyone with the same issue.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM