jquery imgareaselect and facebox

Question

I am trying to integrate imgareaselect (http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/) and facebox (http://defunkt.io/facebox/) however I am having no luck at all and hoping someone can help.

imgareaselect calls a

 header("location:");

command after the image is uploaded but this actually reloads the entire page not just the facebox component. I am quite stuck with this as I have never used the imgareaselect plugin before.

Any help is appreciated.

Answer 1

you could try replacing header("location:"); with:

echo '<script type="text/javascript">jQuery.facebox({ image: \'newCroppedImage.jpg\' });</script>';

below are some different facebox methods as shown on http://defunkt.io/facebox/

 **Arbitrary Text**
    jQuery.facebox('something cool');
    jQuery.facebox('something cool', 'my-groovy-style');
    **Remote files**
    jQuery.facebox({ ajax: 'remote.html' });
    jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style');
    **Image**
    jQuery.facebox({ image: 'images/stairs.jpg' });
    jQuery.facebox({ image: 'images/stairs.jpg' }, 'my-groovy-style');
    **A Page Element**
    jQuery.facebox({ div: '#box' });
    jQuery.facebox({ div: '#box' }, 'my-groovy-style');