Re: [jQuery] Implementing JCrop in Ajax Upload
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_titleLabel Infohr//h1
div id=templatemo_bi_full
h2Label Setting/h2
div id=container
/div
!--container--
br/
h2Avatar/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
[jQuery] Implementing JCrop in Ajax Upload
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_titleLabel Infohr//h1
div id=templatemo_bi_full
h2Label Setting/h2
div id=container
/div
!--container--
br/
h2Avatar/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
[jQuery] ask jquery upload progessbar
Hi ..., I'm trying to search jquey upload with progess bar. Could you suggest me what plugin must I use ? Thanks -- 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
[jQuery] Delete Row table using jquery
Hi ...
Supposed I have table like this
idnameaddressaction
--
s1n1a1delete
s2n2a2delete
delete is a link for example `a href=http://localhost/student/delete/1;`.
In the real case I delete the student
using ajax. In order to simplify the code, I just alert the link
$(document).ready(function() {
$(a).click(function(event) {
alert(As you can see, the link no longer took you to jquery.com);
var href = $(this).attr('href');
alert(href);
event.preventDefault();
});
);
I want, After I alert the link the selected row will be remove
automatically. Is there any suggestion how to implement this one ?
--
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
[jQuery] how to get href value
I'm trying to get href value from anchor tag.
code
$(document).ready(function() {
$(a).click(function(event) {
alert(As you can see, the link no longer took you to
jquery.com);
//$(a).html.href;
event.preventDefault();
});
});
a href=http://jquery.com/;jQuery/a
/code
Re: [jQuery] how to get href value
Got it ..., thanks all
On Wed, Jan 20, 2010 at 1:22 PM, Michael Geary m...@mg.to wrote:
But that would give you the href for the first A element in the document,
not necessarily the one you clicked.
Going back to the OP's code, this.href would be the easiest way to get it:
$(document).ready(function() {
$(a).click(function(event) {
alert( You clicked http://jquery.com/a link to +
this.href );
return false;
});
});
-Mike
On Tue, Jan 19, 2010 at 9:14 PM, Matt Quackenbush quackfu...@gmail.comwrote:
$(a).attr(href);
--
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
