设置从 JQUERY/FLICKR API 提取的缩略图图像的自定义大小
我正在向网站添加画廊，并且想从 flickr 帐户中提取图像。
我可以正常工作，但我想为缩略图设置自定义大小，而不仅仅是小、中和大，CSS 适用于框架，但内部图像会变形，因此可以在 jquery 中设置大小吗？
我使用的代码（我的 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();
});
});
有人遇到过这个问题吗？
干杯
I am adding a gallery to a website and I want to pull the images from a flickr account.
I have it working but I would like to set a custom size to the thumbnails not just the small , meduim and large, css works for the frame but the image inside gets distorted so can the size be set in jquery ??
the code im using (my api and id are 00000 for this post only) to pull the flickr feed is:
$(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();
});
});
anyone ever have this issue?
cheers
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
overflow:hidden 不能解决问题吗？
如：
Wouldn't overflow: hidden do the trick?
As in:
您似乎只能检索特定Flickr 缩略图照片的固定尺寸列表，例如 s（小方块 75x75）、q（大方块 150x150）、t（缩略图，最长边 100）等。对于动态尺寸，您可能需要某种类型Jcrop 等裁剪工具。
It looks like you can only retrieve a certain list of fixed sizes for Flickr thumbnail photos, for example s (small square 75x75), q (large square 150x150), t (thumbnail, 100 on longest side), etc. For a dynamic size you would probably need some kind of cropping tool like Jcrop.
我通常会拉出最合适的尺寸（_s 或 _m）并使用 css 裁剪。将图像包裹在 div 宽度 100% 中。使用溢出：隐藏，您可以裁剪图像。
I normally pull the most appropriate size (_s or _m) and the use css cropping. Wrap the image in a div width 100%. With overflow:hidden you can crop the image.