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);

            }
        });

    }

I did not understand your problem. Can you explain your self better?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.