Question

我试图在砌体网格中显示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'
  });

Answer 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中必须有选项才能对图像大小进行更改。

photo.media.m显示大型flickr图像

1 个答案: