AJAX image resizing
Hi I got an issue, Previously I got paid premiere support to get an AJAX image resizing to work, however its not quite working how I intended.
The resizing works (to he extent that it saves via the AJAX request etc. but for client usability, I need to it tweaked.
The image has an outer border so that the my client mouse-holds on the bottom right they can drag and resize, however because the outer border is associated with the outer DIV it means if the client resizes smaller than the actual image then the bottom side and the right side of the border disappears under the actual image..(even though the resize does work). I just want to tweak it so that its clearer for my client when resizes images so they can judge better. I understand why the bottom and right sides of the border disappear because they are associates with the outer div container. One solution I had would be to create width/height of 100% or the image class...however on page refresh the image is displayed at its native width and height (when doing the AJAX width/height resize its saving those values to the database and Im using those values on my main homepage - which is fine) but in the admin editor because im using 100% for width and height its obviously taking the values from the actual image file stored on my server. So I kinda got a catch 22 situation.
Heres my CSS code:
.assetwrap {
cursor: move;
border: 1px dashed #D3D3D3;
}
.asset-text {
cursor: move;
}
.editImg {
}
heres my html code:
<div class="assetwrap">
<span class="asset-delete" style="display:none" ><a href="../../account.php?Access=asset-delete&AssetID=<?php echo $row_rsAssets['AssetID']; ?>"><img src="../../images/template/delete.png" width="16" height="16" alt="" /></a></span><span class="asset-edit" style="display:none"><a href="../../account.php?Access=asset-image-update&AssetID=<?php echo $row_rsAssets['AssetID']; ?>"><img src="../../images/template/pencil.png" width="16" height="16" alt="" /></a></span>
<img class="editImg" src="../../images/slides/<?php echo $row_rsAssets['Content']; ?>" width="<?php echo $row_rsAssets['img-width']; ?>" height="<?php echo $row_rsAssets['img-height']; ?>"/></div>
and heres the AJAX code:
$( ".assetwrap" ).resizable({
stop: function(event, ui) {
var endW = $(this).outerWidth();
var endH = $(this).outerHeight();
$(this).find(".editImg").prop("width",endW);
$(this).find(".editImg").prop("height",endH);
var links = $(this).find("a");
var href = (links[0].href);
var aid = href.substring(href.lastIndexOf("=")+1);
$.ajax({
url:"admin/slides/slide-update-size-asset.php?aid="+aid+"&img-width="+endW+"&img-height="+endH
});
}
});
I have tried a different approach.....but still now joy.......
.assetwrap {
cursor: move;
border: 1px dashed #D3D3D3;
position: absolute;
}
.asset-text {
cursor: move;
}
.editImg {
position: relative;
height: 100%;
width: 100%;
}
<div class="assetwrap" style="width=<?php echo $row_rsAssets['img-width']; ?>px; height=<?php echo $row_rsAssets['img-height']; ?>px">
<span class="asset-delete" style="display:none" ><a href="../../account.php?Access=asset-delete&AssetID=<?php echo $row_rsAssets['AssetID']; ?>"><img src="../../images/template/delete.png" width="16" height="16" alt="" /></a></span><span class="asset-edit" style="display:none"><a href="../../account.php?Access=asset-image-update&AssetID=<?php echo $row_rsAssets['AssetID']; ?>"><img src="../../images/template/pencil.png" width="16" height="16" alt="" /></a></span>
<img class="editImg" src="../../images/slides/<?php echo $row_rsAssets['Content']; ?>" width="100%" height="100%"/></div>