CODEWITHSUNDEEP
javascriptjqueryhtmlimage-rotation
Seenu
Seenu

Reputation: 83

Jquery dynamic content image rotate not working?

I download plugin from here for the purpose of jquery image drag resize rotate it is working for single image but i want many images thats why i added dynamic content but it was not working.whats wrong with my code
Plugin demo

Mycode

Html 

  <div class="draggable-zone">
        <div class="draggable-wrapper" style="width: 150px; height: 150px; left: 225px; top: 175px;">
            <div class="resizable-wrapper">             
                <img src="images/earth.png" width="150" height="150" alt="Планет Земля" class="elem-wrapper" />
            </div>
        </div>
    </div>

    <button onclick="call()">Button</button>

Javascript

  <script type="text/javascript">
$(document).ready(function() {
    var drWr = $('.draggable-wrapper'),
        rsWr = $('.resizable-wrapper'),
        elem = $('.elem-wrapper');

    elem.resizable({
        aspectRatio: true,
        handles:     'ne, nw, se, sw'
    });

    drWr.draggable();

    elem.parent().rotatable();


    $(".ui-rotatable-handle").live("click",function(){
        alert('fg')

        });
});

function call(){

var s='<div class="draggable-zone"><div class="draggable-wrapper" style="width: 150px; height: 150px; left: 225px; top: 175px;"><div class="resizable-wrapper"><img src="images/earth.png" width="150" height="150" alt="Планет Земля" class="elem-wrapper" /></div></div></div>';
$(s).appendTo(".draggable-zone");
var drWr = $('.draggable-wrapper'),
        rsWr = $('.resizable-wrapper'),
        elem = $('.elem-wrapper');

    elem.resizable({
        aspectRatio: true,
        handles:     'ne, nw, se, sw'
    });

    drWr.draggable();

    elem.parent().rotatable();
}
</script>

Thanks

Upvotes: 1

Views: 745

Answers (1)

Seenu
Seenu

Reputation: 83

Finally I find out a solution

    var count=2;
    function call(){
    count++;
    var s='<div class="draggable-zone" id="draggable_'+count+'"><div class="draggable-wrapper" style="width: 150px; height: 150px; left: 225px; top: 175px;" id="wrapper_'+count+'"><div class="resizable-wrapper" id="resizable_'+count+'"><img src="images/earth.png" width="150" height="150" alt="Планет Земля" class="elem-wrapper" id="elem_'+count+'" /></div></div></div>';

    $(s).appendTo("#all");

    var drWr = $('#'+"draggable_"+count),
            rsWr = $('#'+"wrapper_"+count),
            elem = $('#'+"elem_"+count);
        elem.resizable({
            aspectRatio: true,
            handles:     'ne, nw, se, sw'
        });

        drWr.draggable();

        elem.parent().rotatable();
    }

Html

    <div id="all">
    <div class="draggable-zone" id="draggable_1">
        <div class="draggable-wrapper" id="wrapper_1" style="width: 150px; height: 150px; left: 225px; top: 175px;" >
            <div class="resizable-wrapper" id="resizable_1">                
                 <img src="images/earth.png" width="150" height="150" alt="Планет Земля" class="elem-wrapper" id="elem_1" />

            </div>
        </div>
    </div>

Upvotes: 1

Related Questions