Question

我正在为网站添加一个图库，我想从flickr帐户中提取图像。

我有它工作，但我想为缩略图设置一个自定义大小，而不仅仅是小，meduim和大，css适用于帧，但内部的图像变形，所以可以在jquery中设置大小？< / p>

我正在使用的代码（我的api和id仅为此帖子的00000）来拉动flickr Feed：

$(function() {
var apiKey = '000000000000000000000000000000';
var userId = '000000000';
var tag = 'gsow,cycle,event';
var perPage = '20';
var showOnPage = '8';

$.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
    'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + 
    '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', 
function(data){
    var classShown = 'class="lightbox"';
    var classHidden = 'class="lightbox hidden"';

    $.each(data.photos.photo, function(i, rPhoto){
        var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
            + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

        var thumbPhotoURL = basePhotoURL + '_s.jpg';
        var mediumPhotoURL = basePhotoURL + '.jpg';

        var photoStringStart = '<a ';
        var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ 
            mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + 
            rPhoto.title + '"/></a>;'
        var photoString = (i < showOnPage) ? 
            photoStringStart + classShown + photoStringEnd : 
            photoStringStart + classHidden + photoStringEnd;

        $(photoString).appendTo("#flickr");
    });
    $("a.lightbox").lightBox();
});

}）;

有人遇到过这个问题吗？

欢呼

Answer 1

不会溢出：隐藏这样做吗？

如：

img {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

Answer 2

看起来你只能检索某个list of fixed sizes for Flickr thumbnail photos，例如s（小方块75x75），q（大方块150x150），t（缩略图，最长边100）等。对于动态大小您可能需要某种裁剪工具，例如Jcrop。

Answer 3

我通常会拉出最合适的尺寸（_s或_m）并使用css裁剪。以100％的div宽度包裹图像。使用溢出：隐藏，您可以裁剪图像。

设置从JQUERY / FLICKR API中提取的缩略图图像的自定义大小

3 个答案: