Removing jquery imgareaselect plugin from element
Asked Answered
N

7

14

So im using this neat jquery plugin http://odyniec.net/projects/imgareaselect/ It works fine, but i'm firing it with jquery ui callback function (dialog), and i need to remove the selection after dialog closes.

function initialize_selection() {
$('#image_area').imgAreaSelect({ x1: 10, y1: 10, x2: $('#image_area').width()-10, y2: $('#image_area').height()-10 , fadeSpeed: 400, handles: true});
}

$(function() {
$('#image_edit').click(function(){
    $('#edit_image_dialog').load('actions.php?action=edit_temp_image', function(){
            $('#edit_image_dialog').dialog({
                modal: true,
                resizable: false,
                width: 480,
                    buttons: {
            Ok: function() {
                        //foo_bar                                                                        
            },
                        Cancel: function() {
                        //foo_bar
            }
                    },
                    beforeclose: function(){
                    //What should i put here ???
                    ;}
            });
    initialize_selection();
        });
    });
});

I would really appreciate some tips, because i'm new to jquery and I can't work this out by myself.

Thank you

Nerty answered 5/3, 2010 at 13:26 Comment(1)
Not sure, but +1 to the question for sharing a very cool jQuery plugin!Dumbarton
S
22

http://odyniec.net/projects/imgareaselect/usage.html

$('#image_area').imgAreaSelect({remove:true});

should work, but not sure

Shamrao answered 5/3, 2010 at 13:49 Comment(0)
A
6

The only way I've found to get the selection treatment areas removed was the following:

"Close": function() { 
  $(".imgareaselect-selection").parent().remove();
  $(".imgareaselect-outer").remove();
  $(this).dialog("close"); 
},

The following did not work for me (in the jquery and jqueryui elements in Wordpress 3.0.5)

$(selector).imgAreaSelect( {remove: true} );
Armillia answered 20/2, 2011 at 23:42 Comment(1)
+1 . $(selector).imgAreaSelect( {remove: true} ); didn't work for me.Corniculate
S
5

This worked for me:

var $ias = $('#imageArea').imgAreaSelect({
    instance: true
});

$('#clearBtn2').click(function() {
    $ias.cancelSelection();
});
Scalenus answered 14/10, 2011 at 20:19 Comment(1)
This is a better answer if you want to re-open your dialog and do the image area select again. @Daniele's answer will completely remove/destroy the plugin from your element, but this will simply remove the visual selection box and background.Busby
P
3

According to the documentation for the options at HomeimgAreaSelect Documentation

$('#image_area').imgAreaSelect( {remove: true} );

will do the trick

Paraguay answered 5/3, 2010 at 13:38 Comment(0)
M
1

According to the documentation: http://odyniec.net/projects/imgareaselect/usage.html

{remove: true} will actually remove the imgAreaSelect-y-ness completely. If all you want to do is box and grayed out area, (but allow the user to drag a new box later) you want {hide: true}.

$('#image_area').imgAreaSelect( {hide: true} );
Military answered 19/10, 2012 at 19:0 Comment(0)
D
1
$('#image_area').imgAreaSelect({remove:true}); //For hiding the imagearea
$('#image_area').imgAreaSelect({remove:false}); //For resetting the imagearea

First statement hides the imgareaselect and the second statement helps in reloading the crop functionality when the modal is loaded the next time.

I used both the statements while returning to the main window from the modal so that there is no issue loading the crop functionality next time.

Donny answered 22/8, 2014 at 2:14 Comment(0)
R
0

ya it really work but after -->$('#image_area').imgAreaSelect({remove:true}); It cannot work on tagging other photo

Ricker answered 31/3, 2010 at 9:14 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.