Hai Everybody,
i have did multiple image uploader(max 20 images).
the uplaoded show in 3 different groups.
group 1:first 2 pics
group2: after 3 pic
group3: after 4 pic
again start group1
anybody plz help me.
var c;
var pCrop;
var crop_api;
var rotate = false;
var temp;
var tempZIndex;
$(document).ready(function()
{
var uploader = new qq.FileUploader(
{
element: document.getElementById('btnUploadPlanPicture'),
action: upload_url,
params:
{
album: album,
type: 'plan',
desc: 'plan',
},
allowedExtensions: ['jpg','png','gif'],
onProgress: function(id, fileName, loaded, total){
fnOpenDialog();
// $('#container_upload').append(imgTagStr);
},
onComplete: function(id, fileName,responseJSON)
{
createPlanspaceImage(responseJSON);
return true;
}
});
var left = (Math.random() * (0,600));
var top = (Math.random()*(0,400));
var rot =(Math.random()*(-40,40));
});
var $Dialog_div;
function fnOpenDialog() {
$Dialog_div = $('<div id=\'ThisDialog\'>Arrange Pictures Randomly</div>').prependTo('body');
//var responseJSON = data;
$Dialog_div = $('#autoarrange').dialog({
autoOpen: true,
draggable: true,
resizable: true,
title: 'Dialog',
modal: true,
stack: true,
height: '400',
width: '200px',
buttons: {
'OK': function() {
$Dialog_div.dialog('close');
}
}
});
}
function createPlanspaceImage(data)
{
//var responseJSON = $.parseJSON(data);
var responseJSON = data;
var uploadFilePath = responseJSON.filePath;
var left = (Math.random() * (0,600));
var top = (Math.random()*(0,400));
var rot =(Math.random()*(-40,40));
imgTagStr = "";
imgTagStr += "<div id='image_container' class='planspace-image' >";
imgTagStr += "<div class='image_controls' id='control-"+responseJSON.fileName+"' style='display:none; z-index:1;'>";
imgTagStr += "<img src='"+too_path+"/images/rotate.png' class='rotate' width='20px' >";
imgTagStr += "<img src='"+too_path+"/images/remove.png' class='remove' width='20px' >";
imgTagStr += "<img src='"+too_path+"/images/crop.png' class='crop' width='20px' >";
//imgTagStr += "<img src='"+too_path+"/images/resize.png' class='resize' width='20px'>";
imgTagStr += "</div>";
imgTagStr += "<img class='upload_pic' name='"+responseJSON.fileName+"' src='"+uploadFilePath+"' id="+responseJSON.id+" />" ;
imgTagStr += "</div>";
$('#container_upload').append(imgTagStr);
$('#container_upload').css('width','+='+200);
$('#planspace').css('width','+='+200);
$(document).ready(function()
{
$('.upload_pic').mouseover(function(e)
{
$(this).parent().css('border','1px solid');
});
$('.upload_pic').mouseout(function()
{
$(this).parent().css('border','none');
});
$('.upload_pic').click(function(e)
{
var uploadPic = $(this);
var controlDiv = document.getElementById($(this).parent().find('.image_controls').attr('id'));
$('html').click(function(e)
{
if( e.target.id == uploadPic.attr('id') )
{
//$('#test-text').html('in clicked'+e.target.id);
//tempZIndex = $(this).parent().css('z-index');
//$(this).parent().css('z-index','2');
//controlDiv.style.display = 'block';
//updateControlImageCoords($(this).parent());
//attachEvents($(this).parent());
tempZIndex = uploadPic.parent().css('z-index');
uploadPic.parent().css('z-index','2');
controlDiv.style.display = 'block';
updateControlImageCoords(uploadPic.parent());
attachEventsImage(uploadPic.parent());
}
else
{
//$('#test-text').html('out clicked'+e.target.id);
detachEvents(uploadPic.parent());
controlDiv.style.display = 'none';
}
});
});
});
}
function attachEventsImage(obj)
{
obj.draggable();
obj.resizable(
{
handles: 'se',
start: function(e, ui)
{
obj.draggable('destroy');
updateControlImageCoords(obj);
},
resize: function(e, ui)
{
var img = $(this).find('.upload_pic');
img.width($(this).css('width'));
img.height($(this).css('height'));
updateControlImageCoords(obj);
},
stop: function(e, ui)
{
obj.draggable();
updateControlImageCoords(obj);
}
});
obj.find('.crop').click(function()
{
showImageCropDiv($(this).parent().parent());
});
obj.find('.remove').click(function()
{
mode = 'remove';
removeImageDiv($(this).parent().parent());
});
obj.find('.rotate').draggable(
{
handle: obj,
opacity: 0.01,
helper: 'clone',
delay: 0,
distance: 8,
drag: function(event, ui)
{
imageRotateOnMouse(event, obj);
}
});
}
