Geek asks and answers

Customize the size of thumbnail images pulled from the JQUERY / FLICKR API

I am adding a gallery to the site and I want to pull images from the flickr account.

It works for me, but I would like to set a custom size for thumbnails, not only small, medium and large, css works for the frame, but the image inside is distorted, so the size can be set in jquery ??

im code using (my api and id is 00000 for this post only) to pull the flickr stream:

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

});

Does anyone have such a problem?

greetings

+3
source share
3 answers

Not overflow: do hidden ones do the trick?

How in:

img {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
+1
source

, Flickr, s ( 75x75), q ( 150x150), t (, 100 ) .. , , - , Jcrop.

+1

I usually pull out the most suitable size (_s or _m) and crop using css. Wrap the image 100% wide div. Overflow: Hidden, you can crop the image.

0
source

More articles:


All Articles