私の問題は次のとおりです。ユーザーが現在のページに表示されている画像をズームできるようにするスクリプトを開発しました。$('div#imageBox').html()
クリックする<div>
と、 と を介してロードされます<img>
。以下では、読み込まれた画像のwidth
やなどの情報を取得しています。height
うまくいくこともあれば、うまくいかないこともあります。DOM の読み込みに問題があることは知っていますが、奇妙なことに、それが機能する場合と機能しない場合がある理由がわかりません。のであるため、<div>
の0x19px
サイズをロードします。<img>
0x0
ここに私のjQueryコードがあります:
function imageBox(src, legende)
{
$('DIV#imageBox').empty().fadeIn().html('<div><a href="'+src+'" target="_blank"><img src="'+src+'" /></a></div>');
var marginLeft = $('DIV#imageBox DIV').width() / 2;
var marginTop = $('DIV#imageBox DIV').height() / 2;
var hauteur = $('DIV#imageBox IMG').height();
var largeur = $('DIV#imageBox IMG').width();
var bottom = $('DIV#imageBox SPAN').height();
//alert(marginLeft+'/'+marginTop+'/'+hauteur+'/'+largeur+'/'+bottom);
if(legende)
$('DIV#imageBox').find('DIV').append('<span>'+legende+'</span>');
if(largeur > $(window).width())
largeur = $(window).width() * 0.8;
if(hauteur > $(window).height())
hauteur = $(window).height() * 0.8;
// Récupération des nouvelles valeurs au cas où l'image soit redimensionné car trop grande
$('DIV#imageBox IMG').hide().height(hauteur);
largeur = $('DIV#imageBox IMG').width();
marginTop = hauteur / 2;
marginLeft = largeur / 2;
if(!$('DIV#imageBox IMG').is(':animated')) {
$('DIV#imageBox IMG').show().height(0).animate({'height': hauteur}, 300);
$('DIV#imageBox SPAN').width(0).animate({'width': largeur-10}, 300);
}
$('DIV#imageBox DIV').css({
'top': '50%',
'left': '50%',
'marginTop': '-'+(marginTop)+'px',
'marginLeft': '-'+(marginLeft)+'px'
});
$('DIV#imageBox SPAN').css('bottom', '-'+bottom+'px');
$('DIV#imageBox SPAN:before').css('top', hauteur);
}
ご不明な点がございましたら、お気軽にお問い合わせください。期待したほど明確ではなかったかもしれません。