I got it, i must
chage the crop function declaration become
function jCrop(f) {
$(f).Jcrop({
aspectRatio: 1,
setSelect: [0,0,150,150],
onSelect: updateCoords,
onChange: updateCoords
});
}
and call this function after ajax upload complete
My meaning about image selection is a box image selection. While we want to
crop an image, we must select the image. and while we have selected the
image, the selection box will displayed.
path is the url of the image.
On Fri, Jan 29, 2010 at 12:52 AM, brian <zijn.digi...@gmail.com> wrote:
> What do you mean by, "the image selection doesnt work"? Can you give a
> clearer description o fwhere you think the problem lies?
>
> Are you certain that the path sent back from the server is correct?
> What does alert(data.path) show?
>
> On Wed, Jan 27, 2010 at 8:21 PM, adi sembiring <sembiring....@gmail.com>
> wrote:
> > Hi ...., I'm trying to develop image crop using JQuery.
> > I use ajax to upload the image. after the image success fully uploaded. I
> > load the uploaded image using jquery to its container.
> >>
> >> $("#image_upload").html("<img src='" + data.path + "' width=\"460\"
> >> id=\"cropbox\" alt=\"cropbox\" />");
> >
> > but the image selection doesnt work. why it could be happened ?
> > this is my code:
> >
> >> <style type="text/css">
> >> #preview {
> >> width: 150px;
> >> height: 150px;
> >> overflow: hidden;
> >> }
> >> </style>
> >> <script type="text/javascript" src="<?php echo
> >> base_url()?>asset/jqupload/js/ajaxfileupload.js">
> >> </script>
> >> <script type="text/javascript" src="<?php echo
> >> base_url()?>asset/jcrop/jquery.Jcrop.pack.js">
> >> </script>
> >> <link rel="stylesheet" href="<?php echo
> >> base_url()?>asset/jcrop/jquery.Jcrop.css" type="text/css" />
> >> <script type="text/javascript">
> >> function ajaxFileUpload(){
> >> $("#loading").ajaxStart(function(){
> >>
> >> $(this).show();
> >> }).ajaxComplete(function(){
> >> $(this).hide();
> >> });
> >>
> >> $.ajaxFileUpload({
> >> url: '<?php echo site_url()?>/upload/do_upload',
> >> secureuri: false,
> >> fileElementId: 'fileToUpload',
> >> dataType: 'json',
> >> success: function(data, status){
> >> if (typeof(data.error) != 'undefined') {
> >> if (data.error != '') {
> >> $("#image_upload").html(data.error);
> >> $("#image_upload").fadeIn("slow");
> >> }
> >> else {
> >> $("#image_upload").html("<img src='" + data.path
> +
> >> "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" />");
> >> $("#image_upload").fadeIn("slow");
> >> $("#orig_h").val(data.width);
> >> $("#orig_w").val(data.height);
> >> //alert("<a href='" + data.path + "' />");
> >> }
> >> }
> >> },
> >> error: function(data, status, e){
> >> $("#image_upload").html(e);
> >> $("#image_upload").fadeIn("slow");
> >> }
> >> })
> >>
> >> return false;
> >> }
> >>
> >> $(document).ready(function(){
> >> $(function(){
> >> $('#cropbox').Jcrop({
> >> aspectRatio: 1,
> >> setSelect: [0, 0, $("#oring_w").val(),
> >> $("#oring_h").val()],
> >> onSelect: updateCoords,
> >> onChange: updateCoords
> >> });
> >> });
> >>
> >> function updateCoords(c){
> >> showPreview(c);
> >> $("#x").val(c.x);
> >> $("#y").val(c.y);
> >> $("#w").val(c.w);
> >> $("#h").val(c.h);
> >> }
> >>
> >> function showPreview(coords){
> >> var rx = $("#oring_w").val() / coords.w;
> >> var ry = $("#oring_h").val() / coords.h;
> >>
> >> $("#preview img").css({
> >> width: Math.round(rx * $("#oring_w").val()) + 'px',
> >> height: Math.round(ry * $("#oring_h").val()) + 'px',
> >> marginLeft: '-' + Math.round(rx * coords.x) + 'px',
> >> marginTop: '-' + Math.round(ry * coords.y) + 'px'
> >> });
> >> }
> >> });
> >> </script>
> >> <!-- begin main content -->
> >> <div id="templatemo_content_area">
> >> <h1 class="content_title">Label Info<hr/></h1>
> >> <div id="templatemo_bi_full">
> >> <h2>Label Setting</h2>
> >> <div id="container">
> >> </div>
> >> <!--container-->
> >> <br/>
> >> <h2>Avatar</h2>
> >> <div class="info">
> >> </div>
> >> <div id="avatar_container">
> >> <form name="form" action="" method="POST"
> >> enctype="multipart/form-data">
> >> <ul>
> >> <li class="leftHalf ">
> >> <label class="desc" for="lbl_type">
> >> Change Your Avatar
> >> </label>
> >> <div>
> >> <div id="avatar">
> >> <img src="<?php echo $avatar?>"
> >> width="130" height="130" />
> >> </div>
> >> <div id="avatar_upload">
> >> <input id="fileToUpload"
> >> name="fileToUpload" class="field field" value="" size="30" tabindex="5"
> >> type="file" /><input id="buttonUpload" name="buttonUpload" class="btTxt
> >> submit" type="submit" value="Upload" onclick="return
> >> ajaxFileUpload();"/><img id="loading" src="<?php echo
> >> base_url()?>asset/jqupload/images/loading.gif" style="display:none;">
> >> </div>
> >> </div>
> >> </li>
> >> </ul>
> >> <ul id="crop_container">
> >> <li class="leftHalf ">
> >> <label class="desc" for="lbl_name">
> >> Avatar for crop
> >> </label>
> >> <div id="image_upload">
> >> <img src="<?php echo $avatar?>" width="450"
> >> height="130" id="cropbox" name="cropbox" />
> >> </div>
> >> </li>
> >> <li class="rightHalf ">
> >> <label class="desc" for="lbl_type">
> >> Crop Display
> >> </label>
> >> <div id="preview">
> >> <img src="<?php echo base_url() . 'files/'
> ?>"
> >> alt="thumb" />
> >> </div>
> >> </li>
> >> <div class="info">
> >> </div>
> >> <li class="buttons ">
> >> <input name="saveForm" class="btTxt submit"
> >> type="submit" value="Crop and Save" />
> >> </li>
> >> </ul>
> >> <input type="text" id="x" name="x" />
> >> <input type="text" id="y" name="y" />
> >> <input type="text" id="w" name="w" />
> >> <input type="text" id="h" name="h" />
> >> <input type="text" id="oring_w" name="oring_w" />
> >> <input type="text" id="oring_h" name="oring_h" />
> >> </form>
> >> </div>
> >> <div class="cleaner">
> >> </div>
> >> </div>
> >> <div class="cleaner">
> >> </div>
> >> </div>
> >> <!-- end main content -->
> >
> > Help me please ....
> >
> > --
> > Adi Gunanta Sembiring
> > Blog: http://adisembiring.wordpress.com
> > YM: adisembir...@yahoo.com
> > GTalk: adi.sembir...@gmail.com
> > e-mail: sembiring....@gmail.com
> > Facebook: sembiring....@gmail.com
> > HP: +62 852 6892 4259
> >
> >
>
--
Adi Gunanta Sembiring
Blog: http://adisembiring.wordpress.com
YM: adisembir...@yahoo.com
GTalk: adi.sembir...@gmail.com
e-mail: sembiring....@gmail.com
Facebook: sembiring....@gmail.com
HP: +62 852 6892 4259
