CODEWITHSUNDEEP
javascriptjqueryimg-area-select-jquery
sonalgoyal
sonalgoyal

Reputation: 359

ImgAreaSelect in jquery

I am new in jquery. my task in jquery is "ImgAreaSelect" I am trying this from morning but not achive the goal. please review my code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
<script>
    $(document).ready(function () {
    $('#ladybug_ant').imgAreaSelect({
        handles: true,
        onSelectEnd: function(img, selection){
            if (!selection.width || !selection.height){
                return;
            }
            $('#x1').val(selection.x1);
            $('#y1').val(selection.y1);
            $('#x2').val(selection.x2);
            $('#y2').val(selection.y2);
            $('#w').val(selection.width);
            $('#h').val(selection.height); 
        }
    });
});

    </script>
</head>
<body>
   <img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</body>
</html>

Upvotes: 2

Views: 7459

Answers (3)

mukhtar alam
mukhtar alam

Reputation: 323

you have used script tag for the css link. Use "link" tag instead of "script" tag also i.e use

<link rel="stylesheet" type="text/css" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"/>

instead of 

<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>

this will solve the issue without any further changes.

Upvotes: 0

paljain
paljain

Reputation: 1

I also face this problem.I made some changes in Css and Bingo,It is resolved. Actully the parent div position should be relative to make imagearea scrollable.

You has to define the "parent:"imgParentDivID"" and set position:relative of that div. It will work perfectly.

Code:

<div id="imgParentDivID" style="position:relative">
<img id="imgID" src="http://jotform.org/demo/jquery-image-area-select-   plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</div>

$("#imgID").imgAreaSelect({
        parent: "#imgParentDivID",           
            aspectRatio: '1:1',
            handles: true,
            fadeSpeed: 200,
            selectionOpacity: 1,               
            onSelectChange: preview
        });

I hope this will help you.

Upvotes: 0

Spokey
Spokey

Reputation: 10994

You seem to be missing the plugin itself that you have to download from http://odyniec.net/projects/imgareaselect/

jQuery is just the Core and does not include an image area select method

After loading the plugin you will be able to use $('#ladybug_ant').imgAreaSelect({ .. });

This is an example http://jsfiddle.net/8TwRJ/

Upvotes: 2

Related Questions