photo.media.m 显示大的 flickr 图像答案

【问题标题】：photo.media.m display large flickr imagesphoto.media.m 显示大的 flickr 图像
【发布时间】：2017-05-03 21:49:27
【问题描述】：

我正在尝试在砖石网格中显示 Flickr 图像。我有它的工作，但图像太像素化，所以我需要显示图像的大版本。

我知道要这样做我需要更改（将 .jpg 之前的 m 更改为 b）

http://farm6.staticflickr.com/5830/23743383991_5c7fecec1a_m.jpg

到

http://farm6.staticflickr.com/5830/23743383991_5c7fecec1a_b.jpg

如何将 b 添加到以下代码行？

photoHTML += '<img src="' + photo.media.m + '">'

完整代码如下

//AJAX
    var flickrAPI = "//api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&extras=url_l";

    var photoSelection = 'ALL';

    var flickrOptions = {
        id: "49752549@N04",
        tags: photoSelection,
        format: "json"
    };

    function displayPhotos(data){

        var photoHTML = '<div class="grid-sizer"></div>';


        $.each( data.items, function(i, photo){
            photoHTML += '<div class="grid-item">';
            photoHTML += '<img src="' + photo.media.m + '">'
            photoHTML += '</div>';
        });

        photoHTML += '';

        $('.grid').html(photoHTML);
var $grid = $('.grid').imagesLoaded( function() {
  $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer'
  });

【问题讨论】：

标签： jquery json flickr

【解决方案1】：

改变

$.each( data.items, function(i, photo){
        photoHTML += '<div class="grid-item">';
        photoHTML += '<img src="' + photo.media.m + '">'
        photoHTML += '</div>';
    });

到

$.each( data.items, function(i, photo){
        var x = photo.media.m;
        var firstPart = (x).substr(0,x.lastIndexOf("_m"));
        var secondPart = (x).substr(x.lastIndexOf("_m")+2);            
        photoHTML += '<div class="grid-item">';
        photoHTML += '<img src="' + (firstPart + "_b" + secondPart ) + '">'
        photoHTML += '</div>';
    });

但不建议使用此方法，flickr API 中必须有选项来更改图像大小。

【讨论】：