Ik moet 2 verschillende "soorten" afbeeldingen kunnen croppen en heb daarvoor 2 api's nodig.
Als ik hiervoor 1 api gebruik dan gaat de eerste afbeelding dingen doen waarvan ik niet wil dat deze ze gaat doen.
Mijn eerste jcrop_api werkt de 2e (jcrop_api2) geeft een undefined terug.
Iemand een idee waarom de 2e dit terug geeft en ook hoe ik dit werkend kan krijgen?
//profielfoto
var jcrop_api, jcrop_api2;
$(function(){
//vars voor setSelect
var x_pos = $('#x_pos').val();
var y_pos = $('#y_pos').val();
var width = $('#width').val();
var height = $('#height').val();
if(width == 0){
var width = 100;
var height = 100;
}
// Create variables (in this scope) to hold the API and image size
var boundx,
boundy;
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane #preview-container'),
$pimg = $('#preview-pane #preview-container img'),
fxsize = $pcnt.width(),
fysize = $pcnt.height();
$('#cropbox').Jcrop({
setSelect: [ x_pos, y_pos, x_pos + width, y_pos + height ],
minSize: [100,100],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: fxsize / fysize
},function(){
// Store the API in the jcrop_api variable
jcrop_api = this;
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
});
//uploadenfoto
$('#photoimg').live('change', function()
{
$('#imageform').ajaxSubmit({
type: "POST",
url: "<?php echo Settings::$url;?>/"+ReadCookie('lang')+"/ajax/profile/uploadimg",
success: function(){
var realavatar = $('#crop-size').attr('rel');
jcrop_api.setImage(realavatar + "?t="+(Math.random()));
}
});
});
//fotoedit opslaan
$('#saveeditprofielfoto').click(function(){
var user_id = $(this).attr('rel');
var oldimg = $('#oldimg').val();
var oldimgsmall = $('#oldimgsmall').val();
var path = $('#path').val();
var url = $('#url').val();
var avatarurl = $('#avatarurl').val();
var x = $('#x').val();
var y = $('#y').val();
var w = $('#w').val();
var h = $('#h').val();
$.ajax({
type: "POST",
url: "<?php echo Settings::$url;?>/"+ReadCookie('lang')+"/ajax/profile/saveimg",
data: {
user_id : user_id,
oldimg : oldimg,
oldimgsmall : oldimgsmall,
path : path,
url : url,
x : x,
y : y,
w : w,
h : h
},
success: function(){
$('#profielfotoform, #profielblurreffect').fadeOut(300);
$('#profielfotocontent').delay(1000).fadeOut(300, function(){
$('#profielfotocontent').remove();
$('#profielfotoloader').fadeIn(300).fadeOut(300, function(){
$('.profielfoto').append("<img id='profielfotocontent' src='"+avatarurl+"' />");
});
});
}
});
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = fxsize / c.w;
var ry = fysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
}
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
});
//bedrijfslogos
$(function(){
$('.bedrijvenlogo').click(function(){
var bedrijf_id = $(this).attr('rel');
$('.saveeditbedrijvenlogo').attr('rel', bedrijf_id );
$('.bedrijf_id').val(bedrijf_id);
var parturl = $('.abedrijfurlrealsize').val();
var pathrs = $('.abedrijfpathrealsize').val();
var defaultbpath = $('.defaultbpath').val();
$.ajax({
type: "POST",
url: "<?php echo Settings::$url;?>/"+ReadCookie('lang')+"/ajax/profile/checklogo",
data: { pathrs : pathrs, bedrijf_id : bedrijf_id },
success: function(url){
if(url == defaultbpath){
jcrop_api2.destroy();
$('.logo-preview-pane').hide();
$('.logo-crop-size').append("<img src='"+url+"' class='defaultlogo' />");
} else {
$(".defaultlogo").remove();
jcrop_api2.destroy();
initJcrop();
jcrop_api2.setImage(url + "?t="+(Math.random()));
}
}
});
$('.bedrijvenlogoform').delay(200).fadeIn(300);
$('.bedrijvenblurreffect').delay(200).fadeIn(300);
});
//vars voor setSelect
var x_pos = $('.logo_x_pos').val();
var y_pos = $('.logo_y_pos').val();
var width = $('.logo_width').val();
var height = $('.logo_height').val();
if(width == 0){
var width = 175;
var height = 125;
}
// Create variables (in this scope) to hold the API and image size
var boundx,
boundy;
// Grab some information about the preview pane
$logopreview = $('.logo-preview-pane'),
$logopcnt = $('.logo-preview-pane .logo-preview-container'),
$logopimg = $('.logo-preview-pane .logo-preview-container img'),
xsize = $logopcnt.width(),
ysize = $logopcnt.height();
function initJcrop(){
$('.logo-cropbox').Jcrop({
setSelect: [ x_pos, y_pos, x_pos + width, y_pos + height ],
minSize: [175,125],
onChange: logoupdatePreview,
onSelect: logoupdatePreview,
onSelect: logoupdateCoords,
aspectRatio: xsize / ysize
},function(){
// Store the API in the jcrop_api variable
jcrop_api2 = this;
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
});
};
//uploadenlogo
$('.logoimg').live('change', function()
{
var bedrijf_id = $('.bedrijf_id').val();
$('.logoform').ajaxSubmit({
type: "POST",
url: "<?php echo Settings::$url;?>/"+ReadCookie('lang')+"/ajax/profile/uploadlogo",
data: { bedrijf_id : bedrijf_id },
success: function(){
var reallogo = $('.abedrijfurlrealsize').val();
var imgname = $('.bedrijf_id').val();
$('.defaultlogo').remove();
$('.logo-preview-pane').show();
jcrop_api2.destroy();
initJcrop();
jcrop_api2.setImage(reallogo+imgname+".png?t="+(Math.random()));
}
});
});
//logoedit opslaan
$('.saveeditbedrijvenlogo').click(function(){
var bedrijf_id = $(this).attr('rel');
var abedrijfurl = $('.abedrijfurl').val();
var abedrijfurlrealsize = $('.abedrijfurlrealsize').val();
var abedrijfpath = $('.abedrijfpath').val();
var burl = abedrijfurl+bedrijf_id+".png";
var burlrealsize = abedrijfurlrealsize+bedrijf_id+".png";
var bpath = abedrijfpath;
var x = $('.logo_x').val();
var y = $('.logo_y').val();
var w = $('.logo_w').val();
var h = $('.logo_h').val();
$.ajax({
type: "POST",
url: "<?php echo Settings::$url;?>/"+ReadCookie('lang')+"/ajax/profile/savelogo",
data: {
bedrijf_id : bedrijf_id,
burlrealsize : burlrealsize,
bpath : bpath,
x : x,
y : y,
w : w,
h : h
},
success: function(){
$('.bedrijvenlogoform, .bedrijvenblurreffect').fadeOut(300);
$('.bedrijvenlogosize[rel="'+bedrijf_id+'"]').delay(1000).fadeOut(300, function(){
$('.bedrijvenlogosize[rel="'+bedrijf_id+'"]').remove();
$('.bedrijvenlogopos[rel="'+bedrijf_id+'"]').append("<div class='bedrijvenlogosize' style='background: #fff url("+burl+") center no-repeat;'' rel='"+bedrijf_id+"']></div>");
});
}
});
});
function logoupdatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$logopimg.css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
}
function logoupdateCoords(c)
{
$('.logo_x').val(c.x);
$('.logo_y').val(c.y);
$('.logo_w').val(c.w);
$('.logo_h').val(c.h);
};
});
