In Internet Explorer werkt de JCrop niet.
De afbeelding word niet weergegeven maar deze word wel opgehaald maar de jcrop_api2.setImage(); doet niets.

Dit is in Chrome:
http://d.pr/i/Rnsz

Dit is in IE:
http://d.pr/i/SLTk

Iemand een idee hoe ik het ook werkend kan krijgen in IE?

Code:

	var jcrop_api2;
	//logo editing
	$('.bedrijvenlogo').click(function(){
		var bedrijf_id = $(this).attr('rel');
		$('.saveeditbedrijvenlogo').attr('rel', bedrijf_id );
		$('.bedrijf_id').val(bedrijf_id);

		var bedrijf_naam = $('.bedrijvennaam[rel="'+bedrijf_id+'"]').html();
		$('.jcropformtitel').html("Bedrijfslogo wijzigen van " + bedrijf_naam);

		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){
				console.log(url);
				if(url == defaultbpath){
					if(jcrop_api2) jcrop_api2.destroy();
					$('.logo-preview-pane').hide();
					$('.logo-crop-size').append("<img src='"+url+"' class='defaultlogo' />");
				} else {
					$('.defaultlogo').remove();
					if(jcrop_api2) jcrop_api2.destroy();
					initJcrop();
					if(jcrop_api2) jcrop_api2.setImage(url + "?t=" + (Math.random()));
					$('.logo-jcrop-preview').attr('src', url + "?t=" + (Math.random()));
				}
			}
		});

		$('.bedrijvenlogoform').delay(300).fadeIn(300);
		$('.bedrijvenblurreffect').delay(300).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;
	}

	// 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;
		});
	};

	//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();
				if(jcrop_api2) jcrop_api2.destroy();
				initJcrop();
				jcrop_api2.setImage(reallogo + imgname + ".png?t=" + (Math.random()));
				$('.logo-jcrop-preview').attr('src', 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 + "?t=" + (Math.random()) + ") 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;

			var tmp = jcrop_api2.getBounds();

			$logopimg.css({
				width: Math.round(rx * tmp[0]) + 'px',
				height: Math.round(ry * tmp[1]) + '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);
	};
Als je Google gebruikt kom je al snel bij wat antwoorden uit, blijkbaar werkt het als je onSelect en onRelease toevoegd aan je object(en).

Voorbeeld script.
<script>
$(document).ready(function () {
    var api = $.Jcrop('#cropbox', {
        aspectRatio: 1,
        onSelect: update,
        onChange: update,
        onRelease: update
    });
});

function update(c) {
    //Store coords here
}
</script>
Het werkte voor een andere crop maar niet deze.
Ik krijg nu errors dat de functies
- logoupdatePreview();
- logoupdateCoords();
niet werken.

Uncaught TypeError: Cannot read property 'x' of undefined profile.php:273
logoupdateCoords profile.php:273
release jquery.Jcrop.js:1027
setImage jquery.Jcrop.js:1436
$.ajax.success profile.php:152
e.resolveWith jquery-1.5.2.min.js:16
w jquery-1.5.2.min.js:16
d

Komt misschien omdat het in een functie staat?



 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,
            onRelease: logoupdatePreview,
            onRelease: logoupdateCoords,
            aspectRatio: xsize / ysize
        },function(){
            // Store the API in the jcrop_api variable
            jcrop_api2 = this;
        });
    };

Reageren