jcrop zoom, rotate, crop and resize later - php

http://hollywoodlacewigs.netsmartz.us/
I am working on above project.
user upload pic form 'upload' button and then 'select area' and then click 'mix' button.
this will show the cropped area onto other image.
click email link will compose two images.
But before that I want to let user 'rotate', 'zoom in/out' image before cropping the image.
am using jcrop, jquery ui draggable
here's the script :
$(document).ready(function() {
$('#UploadForm').change('submit', function(e) {
e.preventDefault();
$('#SubmitButton').attr('disabled', ''); // disable upload button
$('#left-pic').hide();
$('#output').show();
//show uploading message
$("#output").html('<img style="margin:45px 0px 0px 35px; " src="images/ajax-loader.gif" alt="Please Wait"/>');
$(this).ajaxSubmit({
target: '#output',
success: afterSuccess //call function after success
});
});
});
function afterSuccess(){
$('#UploadForm').resetForm(); // reset form
$('#SubmitButton').removeAttr('disabled'); //enable submit button
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords,
bgOpacity: 0.5,
bgColor: 'white',
addClass: 'jcrop-dark',
setSelect: [ 34, 50, 134, 155 ]
});
}
function updateCoords(c){
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
function checkCoords(){
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
}
$(function() {
$('#draggable3').draggable({
containment: $('#draggable3').parent(),
cursor: "move", cursorAt: { top: 56, left: 56 },
drag: function(event, ui) {
// Show the current dragged position of image
var currentPos = $(this).position();
// $("#xpos").text("CURRENT: \nLeft: " + (currentPos.left-580) + "\nTop: " + (currentPos.top-82));
$('#x3').val(currentPos.left-580);
$('#y3').val(currentPos.top-82);
}
});
});

You can use http://www.cropzoom.com.ar/demo/, I used and like it.
In IE exists one bug - fix is described on Draggable element in VML get stuck when size change (height, width) in IE 8
(I want to add answer in comment, but don't have permission)

Related

How to enable drag and drop on double click of a image?

I am working on drag and drop of images.my drag and drop is working fine.when i drag any image from sidebar and drop it then it shows a control box with dragged item and all this is working fine. Now i need to do the same functionality on click or double click of a image.when user will click any image in sidebar then that image will be automatically dropped in the dropable div area. This is my drag and drop code. Do i need to do same code again on double click of an image?
jQuery(document).ready(function ()
{
dragablediv();
});
function dragablediv()
{
var x = null;
jQuery(".get-image .drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true,
/* stop: function (event, ui) { ... } */
});
jQuery(".droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
drop: function (e, ui) {
if (jQuery(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
jQuery("#droppable .resize-img").css({"display":"inline-table"});
/* To show Controls first time on Dragged Image*/
var droppedItemId = ui.draggable.attr("data-item-id");
jQuery(".controls ").attr("controls-item-id",droppedItemId);
jQuery("#droppable").find(".ui-resizable-handle").hide(); // To show Controls
jQuery(".controls").show();
dragEl = jQuery(this);
stopPosition = dragEl.position();
var height = x.height(); // To show the controls with exact position
var width = x.width(); //alert("stoppos"+stopPosition+"leftpos"+leftPos);
var topPos = ui.position.top;
var leftPos = ui.position.left;
var mytop = topPos+height;
var myleft = leftPos + width /2;
//alert("left"+leftPos);
jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"});
x.draggable({
helper: 'original',
cursor: 'move',
containment: '#droppable',
tolerance: 'fit',
drop: function (event, ui) {
jQuery(ui.draggable).remove();
},
drag: function() {
},
stop: function() {
dragEl = jQuery(this);
stopPosition = dragEl.position();
var leftPos = dragEl.position().left;
var topPos = dragEl.position().top;
stopOffset = dragEl.offset();
document_id = dragEl.data("document-id");
signer_id = dragEl.data("signer-id");
var height = x.height();
var width = x.width();
var mytop = stopPosition.top+height;
//var myleft = stopPosition.left + width /2;
jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"});
dataItem = jQuery(this).attr('data-item-id');
jQuery("#droppable").find(".ui-resizable-handle").hide();
jQuery(".controls").hide();
jQuery(this).closest(".drag").find(".ui-resizable-handle").show();
jQuery(".controls").show();
jQuery(".controls ").attr("controls-item-id",dataItem);
}
});
x.resizable({
maxHeight: jQuery('#droppable').height(),
maxWidth: jQuery('#droppable').width(),
aspectRatio: true,
helper: "ui-resizable-helper",
handles: "nw, ne, sw,se"
});
//x.addClass('remove');
x.appendTo('.droppable');
}
}
});
}

draggable and droppable not giving latest position?

Please have a look in to my code below
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true,
});
$("#droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
drop: function(e, ui) {
if ($(ui.draggable)[0].id != "") {
$("#placeholderimg").css("visibility", "show");
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
cursor: 'move',
containment: '#droppable',
tolerance: 'fit',
drop: function(event, ui) {
$(ui.draggable).remove();
}
});
}
}
});
The Process :-
User will have some images on LHS and they will grag those into rightside panel
But the problem is when I move that dragged image new position is not getting .Actually I am hoping to get new position after image is moved to some position and leave .
Please help

Can't open more than once jquery dialog

i have a jquery dialog, which in i have:
$(document).ready(function() {
if( window.location.href.indexOf( '#product' ) != -1 ) {
var productID = window.location.href.split('-');
showDialog(productID[1]);
}
});
function showDialog(productID)
{
$( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>" );
$( "#dialog-modal_"+productID ).dialog({
width: 790,
height: 590,
modal: true,
open: function(event, ui)
{
}
});
}
it works fine when i open it, but if i close that window and try to re-open it - it does not responding.
thanks!!
Below is a sample of how jQuery UI Dialog code should appear. Remember, you need a way to open the dialog. So create a function that calls showDialog on that modal again. A button, or link would work.
jQuery UI Code
function showDialog(productID)
{
var container = $('#dialog-modal_'+productID).html('<blah blah>');
container.dialog({
autoOpen: false,
modal: true,
width: 790,
height: 590
});
container
.dialog('option', 'title', 'Your Title')
.dialog('option', 'buttons', {
Close: function() {
$(this).dialog('close');
}
})
.dialog('open');
//do open event work here
}
DOM for a Open Button
Open My Modal
jQuery for Open Button
$('a#open').click(function(e) {
e.preventDefault();
showDialog(<your id>);
});

Rollover Animation for Masonry JQuery

I am using the jquery masonry on my website http://zakiyadavidson.com.
I am wanting to do a rollover effect such as what is on http://damiencorrell.com/. My end result would be when you rollover a picture text appears.
I attempted to add in the below js code:
//Set div dimensions equal to image's dimensions:
$('#image_holder1').width($('#image_1').width());
$('#image_holder1').height($('#image_1').height());
$('#image_1').each(function(){
//set css of right:
$(this).css({right: '-' + $(this).width() + 'px'})})
//tell the browser what to do when hovering on the div:
$('#image_holder1').hover(function() {
//when mouse hover:
$('#image_0').animate({
right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
},
function() {
//when mouse out, no hover:
$('#image_0').animate({
right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
});​
Along with the above js code I added in the css block below:
#image_holder1 {
overflow: hidden;
}
.image1 {
position: absolute;
}​
The masonry html looks like the below with the above added changes:
<div class="box photo col3" id="image_holder1">
<img id="image_0" src="image_17.jpg" title="Family First" alt="Family First" />
<img id="image_1" src="image_17Hover.jpg" />
...
Rather than the images showing as you mouse over you are able to see it soon as you load the page. The masonry layout is now not aligned properly. Is it because I have the function under the onload event? Any assistance is greatly appreciated.
I figured it out!!!
A simple Jquery script does the trick and will allow you to do as many pictures as necessary!!
<script>
jQuery(function () {
$(".imgSwap img").hover(function () {
this.src = this.src.replace("_off", "_on");
}, function () {
this.src = this.src.replace("_on", "_off");
});
});
</script>
I hope this helps others of you.
You can check out the working script by going to my site http://zakiyadavidson.com

Jquery overlay from checking php variable

I have this script from JQuery.
<script>
// create custom animation algorithm for jQuery called "drop"
$.easing.drop = function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
// loading animation
$.tools.overlay.addEffect("drop", function(css, done) {
// use Overlay API to gain access to crucial elements
var conf = this.getConf(),
overlay = this.getOverlay();
// determine initial position for the overlay
if (conf.fixed) {
css.position = 'fixed';
} else {
css.top += $(window).scrollTop();
css.left += $(window).scrollLeft();
css.position = 'absolute';
}
// position the overlay and show it
overlay.css(css).show();
// begin animating with our custom easing
overlay.animate({ top: '+=55', opacity: 1, width: '+=20'}, 400, 'drop', done);
/* closing animation */
}, function(done) {
this.getOverlay().animate({top:'-=55', opacity:0, width:'-=20'}, 300, 'drop', function() {
$(this).hide();
done.call();
});
}
);
$("img[rel]").overlay({
effect: 'drop',
mask: '#789'
});
</script>
Right now it works by me clicking on an image. Then the overlay comes up with whatever is in the div. However I want to take out clicking the image and just have the overlay come up with an if statement in PHP. any ideas...im not very good at js.
EDIT:
yes im using the JQuery plugin Easing. However the overlay works great...and the overlay works by clicking on an image with the rel attribute like this
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/>
However I don't want to click on the images I want it to come up automatically.
<?php if ($whatever) { ?>
$(document).ready(function() {
$("img[rel]").click();
});
<?php } ?>

Categories