使用jCrop响应设计/流体宽度CSS [英] Using jCrop With Responsive Design/Fluid Width CSS
问题描述
我在为网站的移动版本使用Jcrop的响应宽度图片时遇到问题。
I'm having trouble using Jcrop on responsive width images for the mobile version of a site.
当我对上传的图片应用宽度设置100% - 允许移动设备上的用户提供成功的作物的最佳选择,输出的作物不是选择的作物区域。
When I apply a width setting of 100% to the uploaded image - to allow a user on a mobile device the best option of providing a successful crop, the outputted crop is not the crop area chosen.
这是因为,到jcrop从真正的图像的大小,而不是调整大小的版本(100%宽度),但我不知道如何解决它。
This is due, I think, to jcrop working from the size of the true image, not the resized version (100% width), but I don't know how to fix it.
这个问题(和答案),但我不明白如何申请我的Jcrop函数:
I have seen this question (and answer)but I don't understand how to apply to my Jcrop function:
$(function(){
$('#target').Jcrop({
aspectRatio: 4/3,
bgColor: '#000',
bgOpacity: .4,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
如果我对上传的图片不应用任何大小的CSS,我开始尝试管理显示的图片大小,裁剪的图片是扭曲的。
This works beautifully if I don't apply any size CSS to the uploaded image, but as soon as I start trying to manage the images size for display, the cropped image is skewed.
我认为谷歌会抛出更多的结果,因为我会期望它一个常见的问题 - 或者我太昏暗了,看不出来。
I thought Google would have thrown up more results on this as i would expect it to be a common problem - or maybe I'm just too dim to see the obvious.
我希望有人能帮助你。
推荐答案
<code>
var jcrop_api = [];
$(document).ready(function(){
if($('.slides-thumbs .slide-img').length > 0)
{
$('.slides-thumbs .slide .slide-img').Jcrop({},function(){
jcrop_api.push(this);
});
}
});
$(window).resize(function(){
if(jcrop_api.length > 0)
{
/* this part remove jcrop totally and recreate with new your image with(you need set it by static or set width 100%, just remove attr style with all jcrop styles) */
$.each( jcrop_api, function( key, api ) {
api.destroy();
});
$('.slides-thumbs .slide .slide-img').removeAttr('style');
$('.slides-thumbs .slide .jcrop-holder').remove();
$('.slides-thumbs .slide .slide-img').each(function(){
// reinit jcrop
$.Jcrop(this);
});
}
});
</code>
希望它帮助有人jcrop
i使用jcarousel和有几个图像,需要有jcrop所有的
所以我只是推所有的in数组,然后在调整大小我破坏jcrop和他的持有人,删除风格(对于css resize图像%),然后重新启动它!
Hope it's help someone with jcrop i using jcarousel and have a few images, and need to have jcrop to all of them so i just push all of inits in array,then in resizing i destroy jcrop and his holders, remove style(for css resize image by %) and then reinit it!
这篇关于使用jCrop响应设计/流体宽度CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!