2016-04-22 5 views
2

私はウェブアプリケーションでjCropプラグインを使用しています。しかし、私はpre-selectイメージ上の領域にしようとしているが、これは全く動作せず、領域もあらかじめ選択されていない。jQuery:jCrop 'setSelect'がまったく設定されていませんか?

これは私のコードです:

$('.position').live('click', function(){ 

var img = $('.selected').attr('data-image'); 

//create var 
var jscrop_api; 

//set instance to our var 
$('#target').Jcrop({ 
     // start off with jcrop-light class 
     bgOpacity: 0.5, 
     bgColor: 'black', 
     addClass: 'jcrop-dark', 
     boxWidth: 750, 
     boxHeight: 750, 
     bgFade:  true, 
     setSelect: [ 60, 70, 540, 330 ] 
}, function() { 
jcrop_api = this; 

}); 

//change image for instance 
jcrop_api.setImage(img); 

}); 

あなたが見ることができるように、私は問題はそのためであるかどうかわからないんだけど.. setImage();機能を使用していますので、?

または、Zインデックスの問題はありますか? IFインデックスはsetSelectに適用されますか?

誰かがこの問題について助言してもらえますか?

EDIT:

さて、私は意味をなさないかもしれませんが、ここで誰かに理にかなっていない何かを発見しました。

jcrop_api.setImage(img);を削除し、jCrop機能の中にsetImage: img,を追加すると、画像上にあらかじめ選択された領域が追加されますが、選択した画像(img)はクロップ領域に更新または表示されません!

提案がありますか?

+0

どのようなJqueryのバージョンをお使いですか?ブラウザのコンソールにエラーがありますか? –

+0

@ShekharPankaj、私は 'jquery-1.8.3.min.js'を使用しています。いいえ、コンソールには全くエラーはありません。 – Jackson

+0

@ShekharPankaj、すべて私のコードで動作し、私もマウスを使用して領域を選択することができます。しかし、ページの読み込み時にイメージの領域をあらかじめ選択するわけではありません。私は 'setSelect:'その目的のためだと思った? – Jackson

答えて

0

私は自分の質問に答えることができるかはわからないが、これは私の仕事:

$(document).ready(function() { 
    jcrop_api.setSelect([ ($('#target').attr('width')/2) - 10, 
         ($('#target').attr('height')/2) - 10, 
         ($('#target').attr('width')/2) + 10, 
         ($('#target').attr('height')/2) + 10 
        ]); 
}); 

私はそれが私の状況で誰かに役立ちます願っています。

関連する問題