Установка нестандартного размера миниатюр изображений, извлекаемых из JQUERY / FLICKR API - PullRequest
3 голосов
/ 05 мая 2011

Я добавляю галерею на веб-сайт и хочу получить изображения из учетной записи Flickr.

У меня это работает, но я бы хотел установить нестандартный размер для миниатюр, а не только маленький, meduim и большой, CSS работает для кадра, но изображение внутри искажается, поэтому размер можно установить в jquery ??

код, который я использую (мои api и id - 00000 только для этого поста), чтобы получить флик flickr:

$(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();
});

});

Кто-нибудь когда-нибудь имел эту проблему?

ура

Ответы [ 3 ]

1 голос
/ 07 августа 2012

Похоже, вы можете получить только определенный список фиксированных размеров для миниатюрных фотографий Flickr , например s (маленький квадрат 75x75), q (большой квадрат 150x150), t (миниатюра, 100 на самом длинном сторона), и т. д. Для динамического размера вам, вероятно, понадобится какой-нибудь инструмент обрезки, например Jcrop .

1 голос
/ 24 июля 2011

Не будет ли переполнением: скрыто справиться?

Как в:

img {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
0 голосов
/ 03 февраля 2013

Я обычно вытягиваю наиболее подходящий размер (_s или _m) и использую обрезку css.Оберните изображение в div шириной 100%.С переполнением: скрыто, вы можете обрезать изображение.

...