Use dragResize with img

1) Mike Group: Guests
IP: 68.6.--.--

Posted:

This script is so awsome!! Light weight, yet effective.
The only problem is, that it only works with divs, as far as I can tell. I really need it to work with images. I tried substituting the divs with an img like this

<img class="drsElement drsMoveHandle" style="left: 20px; top: 300px; width: 750px; height: 900px;
background: #FDC; text-align: center" src="http://www.layoutnerd.com/images/nerdlogo.jpg">

But it doesn't work as soon as I put in the src.
Is there a way to make images resizable? Thanks.

2) Angus Turnbull Group: Moderators
Posts: 4235 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--

Posted:

Hmm! By default the script attempts to put resize handles inside the element, which won't work at all with images.

If you want resizability you could wrap the IMG in a DIV. Otherwise, if you edit the core script and delete the functions at the bottom relating to resize (either that or add a test for IMG tags that returns if found) you might have better luck!

Cheers - Angus.

4) Angus Turnbull Group: Moderators
Posts: 4235 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--

Posted:

Got your email too! Will look into this. Would require a fair redesign of the drag mechanism.

Never added aspect ratio dragging, but that would be an easier addition.

- Angus.

6) Angus Turnbull Group: Moderators
Posts: 4235 Joined: 7 Dec 2003 Location: New Zealand IP: 203.173.--.--

Posted:

The above conversation came to nothing sadly. However, if you don't care about wrapping your images in a div, you could very easily do:

<div class="all your draggable/resizable classes here">
<img src="blah" style="width: 100%; height: 100%">
</div>

That'll allow for a resizing image within a DIV. The reason the script doesn't easily resize an IMG element on its own is that it creates resize handles *within* the dragged element (using CSS for positioning) and IMGs can't have child elements.

Good luck - Angus.

7) Rich Kucera Group: Guests
IP: 206.241.--.--

Posted:

Here's a blurb that will grab all the images, test for those over 400 pixel width, then wrap them in the required DIV for dragresize... (I depended on prototypejs, I don't know how to accomplish it with just twinhelix stuff). I experimented with cloneNode but found I didn't need it, you can just reassign to another parent apparently.

Twinhelix Dragresize was easiest to approach and lightweight, but now am considering the Ext JS component (also the fact that prototypejs may be raising some conflicts with the enterprise wiki I'm testing (Confluence)).

var images = $$('img');

for (i=0; i<images.length; i++) {

if (images[i].width>400) {

var newdiv=document.createElement("div");
$(newdiv).addClassName('drsElement');
$(newdiv).addClassName('drsMoveHandle');
$(newdiv).setStyle('left: 150px; top: 280px; width: 150px; height: 150px; background: #DFC; text-align: center');

/*
clone_image = images[i].cloneNode(true);
clone_image.style.width = '100%';
clone_image.style.height = '100%';
*/

//newdiv.appendChild(clone_image);

images[i].style.width = '100%';
images[i].style.height = '100%';

images[i].parentNode.appendChild(newdiv);
newdiv.appendChild(images[i]);

}
}

8) Angus Turnbull Group: Moderators
Posts: 4235 Joined: 7 Dec 2003 Location: New Zealand IP: 118.92.--.--

Posted:

Cool! Hope people find that useful.

- Angus.

9) DJB31st Group: Members
Posts: 2 Joined: 30 Mar 2008 Location: Cyprus IP: 87.228.--.--

Posted:

First thanks for the great script..

I've spent some time working on a version that will maintain the aspect ratio (always forced)

Here is the function, simply swap it for the original and include the images as Angus suggests.

<div class="all your draggable/resizable classes here">
<img src="blah" style="width: 100%; height: 100%">
</div>

It does exhibit some "funkyness" when you get to the original size of the div and are dragging from one of the corner handles, although it is fit for the purpose i need. If anyone manages to fix this however i would be interested to know.

Code in the next post (hopefully)

Thanks

Dave

www.djbwebs.com

10) DJB31st Group: Members
Posts: 2 Joined: 30 Mar 2008 Location: Cyprus IP: 87.228.--.--

Posted:

DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this)
{
//ratio additions added by DJB31st for auto engraver preview script for OSC
var ratio = elmW/elmH;

// Passed the mouse movement amounts. This function checks to see whether the
// drag is from a resize handle created above; if so, it changes the stored
// elm* dimensions and mOffX/Y.

var hClass = handle && handle.className &&
  handle.className.match(new RegExp(myName + '-([tmblr]{2})')) ? RegExp.$1 : '';

// If the hClass is one of the resize handles, resize one or two dimensions.
// Bounds checking is the hard bit -- basically for each edge, check that the
// element doesn't go under minimum size, and doesn't go beyond its boundary.
var dY = diffY, dX = diffX, processed = false;
if (hClass.indexOf('t') >= 0)
{
  rs = 1;
if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight));
  else if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
  elmY += diffY/ratio;
  elmH -= diffY/ratio;
  elmW -= diffY; //divided by ratio
  processed = true;
}
if (hClass.indexOf('b') >= 0)
{
  rs = 1;
if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH));
  else if (elmY + elmH + dY > maxTop) mOffY = (dY - (diffY = maxTop - elmY - elmH));
  elmH += diffY/ratio;
elmW += diffY;
  processed = true;
}
if (hClass.indexOf('l') >= 0)
{
  rs = 1;
if (elmW - dX < minWidth) mOffX = (dX - (diffX = elmW - minWidth));
  else if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
  elmX += diffX;
  elmW -= diffX;
  elmH -= diffX/ratio;
  processed = true;
}
if (hClass.indexOf('r') >= 0)
{
  rs = 1;
if (elmW + dX < minWidth) mOffX = (dX - (diffX = minWidth - elmW));
  else if (elmX + elmW + dX > maxLeft) mOffX = (dX - (diffX = maxLeft - elmX - elmW));
  elmW += diffX;
elmH += diffX/ratio;
  processed = true;
}

return processed;
}};

Post a Reply: