CODEWITHSUNDEEP
javascriptjqueryimagejquery-uiresize
Tom Gullen
Tom Gullen

Reputation: 61729

Help with resizing image in container

enter image description here

Ok so I'm just trying to resize the div properly and have the image inside it resize as well.

Here is an example of the container and image that are generated dynamically:

<div id="imgD' + i + '" style="border:1px solid red;display:inline-block;position:absolute;">
    <img alt="Big" id="imgA' + i + '" width="' + Math.round(resourceData[i][2] * currentScale) + '" height="' + Math.round(resourceData[i][3] * currentScale) + '" src="' + uploadFolder + '/' + imgData[resourceData[i][1]][1] + '" />
</div>

Then the image has Jquery resizable added onto it, and the container has the draggable added onto it. All working fine. until I try to resize both elements when the client 'zooms in'.

Here is my resize code:

        $('#imgD' + i).css("width", (resourceData[i][2]*currentScale));
        $('#imgD' + i).css("height", (resourceData[i][3]*currentScale));

        // Lets try every combination, like a hero!
        $('#imgA' + i).css("width", (resourceData[i][2]*currentScale));
        $('#imgA' + i).css("height", (resourceData[i][3]*currentScale));
        $('#imgA' + i).attr("width", (resourceData[i][2]*currentScale));
        $('#imgA' + i).attr("height", (resourceData[i][3]*currentScale));

        $('#imgD' + i).css("left",(resourceData[i][4]*currentScale) + "px");
        $('#imgD' + i).css("top", (resourceData[i][5]*currentScale) + "px");

The resize icon thing bottom right of the image would indicate this is a problem relating to the jquery resizable?

Upvotes: 1

Views: 386

Answers (2)

Neil
Neil

Reputation: 3231

I don't have the answer I'm afraid, but you can optimise your code quite a bit by chaining the methods for an element, like so:

     $('#imgD' + i).css({  width: (resourceData[i][2]*currentScale),
                          height: (resourceData[i][3]*currentScale)});
// Lets try every combination, like a hero!
     $('#imgA' + i).css({  width: (resourceData[i][2]*currentScale),
                          height: (resourceData[i][3]*currentScale)})
                   .attr({ width: (resourceData[i][2]*currentScale),
                          height: (resourceData[i][3]*currentScale)});
     $('#imgD' + i).css({   left: (resourceData[i][4]*currentScale) + "px",
                             top: (resourceData[i][5]*currentScale) + "px"});

Upvotes: 2

Tom Gullen
Tom Gullen

Reputation: 61729

The Jquery resiable adds a DIV to the image.

('#imgA' + i).parent().css("width", (resourceData[i][2]*currentScale));
$('#imgA' + i).parent().css("height", (resourceData[i][3]*currentScale));
$('#imgA' + i).css("width", (resourceData[i][2]*currentScale));
$('#imgA' + i).css("height", (resourceData[i][3]*currentScale));

Use the parent selector to resize that div.

Upvotes: 0

Related Questions