Доброго времени суток. Помогите разобраться.
Давно планировал освоить js bitrix, вот столкнулся с такой проблемой.
У меня имеется компонент, который обрезает картинку как в контакте,типа грузишь картинку, и выбираешь область на фото.
Для этого подключил Jcrop(http://deepliquid.com/content/Jcrop.html)
Вот когда я вызываю данный компонент через ajax в модальном окне то начинает ругаться на плагин, типа не объявлен. http://i.imgur.com/JFG5Qp8.png
Пробовал делать так
[CODE]
BX.delegate(BX('target_avatar'),function(){
console.log('Сработал');
$(this).Jcrop({...})
});
[/CODE]Дело в том что условия и не выполнялось,т.е в консоль ничего не выводилось.
Как правильнее написать.
Вот весь js[CODE]BX.ready(function(){
var jcrop_api, boundx, boundy;
BX.bind(BX("image_file_avatar"),'change',function(){
$(".bl_edit_property_user .info,.bl_dowloand_file").hide();
// получить выбранный файл
var oFile = $('#image_file_avatar')[0].files[0];
// скрыть все ошибки
$('.avatar_error').hide();
// проверить тип изображения (JPG и PNG разрешено)
var rFilter = /^(image\/jpeg|image\/png)$/i;
if (!rFilter.test(oFile.type)) {
$('.avatar_error').html($("#avatar_error_2").val()).show();
return;
}
// Предварительный элемент
var oImage = BX('target_avatar');
// подготовить HTML5 FileReader
var oReader = new FileReader();
oReader.on load = function(e){
// e.target.result содержит DataURL который мы можем использовать в качестве источника изображения
oImage.src = e.target.result;
oImage.on load = function () { // onload event handler
$("#preview_img_avatar").attr('src',oImage.src);
// отображение блока.
$('.avatar_step2').fadeIn(500);
if($("#target_avatar")[0].naturalWidth > 3000){
$("#target_avatar").attr("height","");
$("#target_avatar").attr("width","500px");
$(".bl_edit_property_user").css('min-height','406px');
$(".avatar_bl_pane").css({"height":"274"});
}
// отобразить некоторую базовую информацию об изображении
var sResultFileSize = bytesToSize(oFile.size); // размер файла
$('#avatar_filesize').val(sResultFileSize);
$('#avatar_filetype').val(oFile.type);
$('#avatar_filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);
// уничтожить Jcrop если она существовала
if (typeof jcrop_api != 'undefined') {
jcrop_api.destroy();
jcrop_api = null;
$('#target_avatar').width(oImage.naturalWidth);
$('#target_avatar').height(oImage.naturalHeight);
}
var $preview = $('#preview-pane_avatar'),
$pcnt = $('#preview-pane_avatar .preview-container'),
$pimg = $('#preview-pane_avatar .preview-container img'),
naturalWidth = $("#target_avatar")[0].naturalWidth,
currentWidth = $("#target_avatar").width(),
currentHeight = $("#target_avatar").height(),
k = naturalWidth/currentWidth,
thumbWidth = 200,
thumbHeight = 280,
xsize = $pcnt.width(),
ysize = $pcnt.height();
var api;
console.log("Работаем с Jcrop");
//setTimeout(function(){
BX.delegate(BX('#target_avatar'),function(){
console.log('Сработал');
});
/*
$('#target_avatar').Jcrop({
minSize: [thumbWidth/k, thumbHeight/k], // min crop size
aspectRatio : (thumbWidth/thumbHeight), // keep aspect ratio 1:1
onChange: updatePreview,
onSelect: updatePreview,
onRelease: clearInfo
// aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
api = this;
var s = [
currentWidth/2-(thumbWidth/k)/2,
currentHeight/2-(thumbHeight/k)/2,
(currentWidth/2-(thumbWidth/k)/2)+thumbWidth/k,
(currentHeight/2-(thumbHeight/k)/2)+thumbHeight/k
];
api.setSelect(s);
api.setOptions({ bgFade: true });
api.ui.selection.addClass('jcrop-selection');
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
//},100);*/
};
};
// читать выбранного файла DataURL
oReader.readAsDataURL(oFile);
});
});
[/CODE]Вот html
[CODE]<fo rm id="upload_form_avatar" enctype="multipart/form-data" method="post" action="" on submit="return checkForm()">
<?="eeee"?>
<!-- hidden crop params -->
<input type="hidden" id="avatar_x1" name="x1" />
<input type="hidden" id="avatar_y1" name="y1" />
<input type="hidden" id="avatar_x2" name="x2" />
<input type="hidden" id="avatar_y2" name="y2" />
<div class="bl_dowloand_file">
<input type="file" name="image_file_avatar" id="image_file_avatar" class="btn btn-primary"/>
</div>
<div class="avatar_step2">
<div class="title_select_area"><?=GetMessage("Selecting_the_area");?></div>
<div class="info">
<input type="hidden" id="avatar_filesize" name="filesize" />
<input type="hidden" id="avatar_filetype" name="filetype" />
<input type="hidden" id="avatar_filedim" name="filedim" />
<input type="hidden" id="avatar_w" name="w" />
<input type="hidden" id="avatar_h" name="h" />
<input type="hidden" id="avatar_error_1" name="error_1" value="<?=GetMessage("error_1");?>">
<input type="hidden" id="avatar_error_2" name="error_2" value="<?=GetMessage("error_2");?>">
<input type="hidden" id="avatar_error_3" name="error_3" value="<?=GetMessage("error_3");?>">
</div>
<div class="avatar_error" ></div>
<div class="avatar_bl_pane">
<img height="300" id="target_avatar" alt="[Jcrop Example]" />
<div id="preview-pane_avatar">
<div class="preview-container">
<img src="" class="jcrop-preview" id="preview_img_avatar" alt="Preview" />
</div>
</div>
</div>
<div class="clear"></div>
<div class="bl_button">
<input type="submit" class="btn btn-primary" value="<?=GetMessage("Upload");?>" />
<input type="button" class="btn but_cancel" value="<?=GetMessage("text_but_cancel");?>" />
</div>
<div class="clear"></div>
</div>
</form>
[/CODE]
