データベースから複数の画像がロードされており、onload="imgLoaded($(this));"
呼び出されたときに画像をドラッグ可能、サイズ変更可能、および削除可能にすることができます。
画像:
<img src='data:image/".$ext.";base64,".base64_encode(XXXXX)."' style=\"width:inherit; height:inherit;\" class='img_set' onload=\"imgLoaded($(this));\">
関数 imgLoaded:
function imgLoaded(imgElemt)
{
$('.db_result').html('<img src="images/loader.gif" />');
var full_url = document.URL;
if(full_url.indexOf('idedit') <= 0 || imgAreaMap > 0){
if(imgElemt.closest(".child").width() < imgElemt.width() || imgElemt.closest(".child").height() < imgElemt.height()){
if(imgElemt.closest(".child").width() > imgElemt.closest(".child").height()){
imgElemt.parent(".imgh").height("100%");
imgElemt.parent(".imgh").width(imgElemt.width());
}else{
imgElemt.parent(".imgh").width("100%");
imgElemt.parent(".imgh").height(imgElemt.height());
}
}
else{
imgElemt.parent(".imgh").width(imgElemt.width());
}
}
$('.db_result').delay(500).queue(function(n) { $(this).html(''); });
$('#liveDimensions').text('Largura: '+imgElemt.width()+' px\nAltura: '+imgElemt.height()+' px');
$('.imgh').on( 'resize', function( event, ui ) {
$('#liveDimensions').text('Largura: '+$(this).width()+' px\nAltura: '+$(this).height()+' px');
});
imgElemt.parent('.imgh').append('<div class=\"close\"><img src=\"images/delete.png\"/></div>');
imgElemt.closest('.child').children('.fileinput-holder').remove();
imgElemt.closest('.imgh').draggable({ containment: imgElemt.closest('.child'), scroll: true, snap: true, snapTolerance: 5 });
imgElemt.closest('.imgh').resizable({ containment: imgElemt.closest('.child') });
}
私の問題は、読み込まれた最後の画像だけが関数 imgLoaded を呼び出すことです。
ロードされた単一のイメージごとにすべてのオンロードを強制するにはどうすればよいですか?