Updating images/aspect ratio in jCrop / jCrop API issue?
My question is 2 fold perhaps:
1. Is there are "best" way to be able to update images of various sizes while using jCrop with thumbnail
2. Is there something tricky about the API as I keep getting an undefined response.
To explain I'm using jcrop in a backward sort of way not to crop but to zoom an image (like this but with a small zoom window image controlling a larger image http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail)
I update the images based on an ajax response supplying a new url and while the larger image is easily targeted the smaller one only partially update the "top" image when starting to crop in the "old" image appears (due no doubt to the creation of the crop)
The API seemed like the way to go as I need to set the aspectRatio and also wondered if I may need to destroy and recreate jCrop on the new images but I have tried using the API methods and for some reason the variable / methods are not recognised even though I can see it in firebug when watching the var.
The api attempts have been basically straight out of the sample
$(window).load(function(){
var jcrop = $.Jcrop('#cropbox',
{onChange: showPreview,
onSelect: showPreview,
aspectRatio: 4/3
});
});
Attempting to call jcrop.disable or jcrop.setOptions in the update function below results in "jcrop is undefined"
I've also tried manually targeting the "behind" image but for the life of me can't seem to find it AND I need to apply a recalculated aspect ratio so not an ideal solution (just desperation)
The update is a simple function that returns json data roughly like the simplified version below so I'm really scratching my head.
Any help would be hugely, greatly, amazingly appreciated and includes Beer if you're nearby
!
:::: example ::::
function update() {
$.post("xhr/refreshpage.php", {various: values},
function(data){
if(data) {
$("#cropbox").hide().attr('src', data.thumburl).show();
$("#preview").hide().attr('src', data.imageurl).fadeIn('slow'); // update the main image
}
}
1. Is there are "best" way to be able to update images of various sizes while using jCrop with thumbnail
2. Is there something tricky about the API as I keep getting an undefined response.
To explain I'm using jcrop in a backward sort of way not to crop but to zoom an image (like this but with a small zoom window image controlling a larger image http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail)
I update the images based on an ajax response supplying a new url and while the larger image is easily targeted the smaller one only partially update the "top" image when starting to crop in the "old" image appears (due no doubt to the creation of the crop)
The API seemed like the way to go as I need to set the aspectRatio and also wondered if I may need to destroy and recreate jCrop on the new images but I have tried using the API methods and for some reason the variable / methods are not recognised even though I can see it in firebug when watching the var.
The api attempts have been basically straight out of the sample
$(window).load(function(){
var jcrop = $.Jcrop('#cropbox',
{onChange: showPreview,
onSelect: showPreview,
aspectRatio: 4/3
});
});
Attempting to call jcrop.disable or jcrop.setOptions in the update function below results in "jcrop is undefined"
I've also tried manually targeting the "behind" image but for the life of me can't seem to find it AND I need to apply a recalculated aspect ratio so not an ideal solution (just desperation)
The update is a simple function that returns json data roughly like the simplified version below so I'm really scratching my head.
Any help would be hugely, greatly, amazingly appreciated and includes Beer if you're nearby
!:::: example ::::
function update() {
$.post("xhr/refreshpage.php", {various: values},
function(data){
if(data) {
$("#cropbox").hide().attr('src', data.thumburl).show();
$("#preview").hide().attr('src', data.imageurl).fadeIn('slow'); // update the main image
}
}
Topic Participants
brad